Search code examples
javascriptjqueryanimationgsap

GSAP and jQuery: play animation on the next page load

I have a simple animation I'd like to fire on a page after it has loaded.

I can fire the animation on window load using jQuery like so:

$(window).on('load', function(){
  myTimelineAnimation.play();
})

But this way only works when I manually refresh the page. I'd like it to fire every time when I go to the page via a link, or via the browser back button and on page refresh.

Is this possible?

Example timeline:

var myTimelineAnimation = new TimelineLite({paused:true});
    myTimelineAnimation
      .to(element, 0.5, {opacity: 1});
Solution

  • If the page is not ajax loaded, then just try

    $(document).ready(()=>{
// you code
})

    If it is, you need to handle the ajax loading event and trigger your event after the loading.