Converting an SVG into a jQuery function

Question

I have an svg

I'm trying to use it as a page transition so that it covers the entire screen before the next page loads but the problem I'm having is that even with SVGSVGELEMENT.getCurrentTime(), I can't seem to pause it at the correct spot and so the svg will pause at different points.

  $('.the_box').removeClass('loaded');
  $('.ccs').load('/wordpress/wp-content/themes/Tsunami-Waves-PHP/img/waves.svg', function() {
    var svgDoc = $('.ccs svg');
    var animWatch = setInterval(function() {
      if (svgDoc[0].getCurrentTime() > 0.56 && !($('.the_box').hasClass('loaded'))) {
        svgDoc[0].pauseAnimations();
        console.log(svgDoc[0].getCurrentTime());
      } else if (svgDoc[0].getCurrentTime() > 0.56 && $('.the_box').hasClass('loaded')) {
        svgDoc[0].unpauseAnimations();
        $('.the_box').siblings('.slider-transition').html($('.the_box').html());
        $('.slider-transition').children('.slider-transition').unwrap();
        $('video').trigger('play');
        clearInterval(animWatch);
      }
    }, 10);
  });
  // $('#holder').load(function(){ var imgcount = $('#holder img').length; $('#holder img').load(function(){ imgcount--; if (imgcount == 0) { /* now they're all loaded, let's display them! */ } }); });
  $('.the_box').load(href + ' .slider-transition', function() {
    var svgDoc = $('.ccs svg');
    $(this).addClass('loaded');
    $('.woocommerce-product-gallery').each(function() {
      $(this).wc_product_gallery();
    });
    slideShowInit();
    initParalax();
  });

Even with the interval being 10 (or even 1), the pause will occur at completely different times and can't seem to catch it at the correct moment so I figure my best bet is to convert the svg into jQuery so that I have better control of it, is there an easy way of doing this or do I have to learn up on how to do it?

ccprog · Accepted Answer

If I understand correctly what you want to achieve, the first animation for each path should run immediately, and the second only when the new page has loaded. If that is the case, you can do this explicitly.

Set an id="reveal" and begin="indefinite" for the earliest of the second animations, and start it with $('#reveal')[0].beginElementAt(). The other two animations can then be started with relative begin times: begin="reveal.begin+0.1s".

For the start time of the second group of animations you now need to wait for the load event. If the first group of animations is still running, you can delay the start time for the second. The beginEvent triggers the other actions.

  $('.the_box').removeClass('loaded');
  var svgLoad = $.Deferred(), sliderLoad = $.Deferred();
  // first animations start immediatly after svg load
  $('.ccs').load('/wordpress/wp-content/themes/Tsunami-Waves-PHP/img/waves.svg', svgLoad.resolve);
  $('.the_box').load(href + ' .slider-transition', sliderLoad.resolve);
  // wait for both load events
  $.when(svgLoad, sliderLoad).then(function() {
    var svgDoc = $('.ccs svg');
    // delay start time of second animations if load is earlier than 0.53s
    var startTime = Math.max(0.53, svgDoc[0].getCurrentTime());
    var reveal = $('#reveal');
    // link DOM change and video play to animation beginEvent
    reveal.on('beginEvent', function () {
        $('.the_box').siblings('.slider-transition').html($('.the_box').html());
        $('.slider-transition').children('.slider-transition').unwrap();
        $('video').trigger('play');
    });
    reveal[0].beginElementAt(startTime);
    $(this).addClass('loaded');
    $('.woocommerce-product-gallery').each(function() {
      $(this).wc_product_gallery();
    });
    slideShowInit();
    initParalax();
  });

Converting an SVG into a jQuery function

Answers (1)

Related Questions