Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

.each element timeline, repeat but pause on first element when animations complete?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Is there a better way to handle this? Still learning, and tried searching for answers unsuccessfully.


The best method I found to repeat a timeline on each element was this code, but then after it runs through once, I needed the first element to come back and pause. So I decided to use a setTimeout after 16 seconds (each element runs for 4 seconds, so after 16 seconds the animation is over) and then do another timeline on the first element to show it again and essentially pause the animation.


This works, but I doubt this is the best way, and there might be a native timeline way to handle this?


Codepen Link


    var tl = new TimelineMax();

    $(".title__sub").each(function(index, element){
      tl.to(element, 1, {opacity:1})
        .to(element, 1, {x:400, opacity:0, ease:Power2.easeIn}, "+=2")
        .to(element, 0, {x:0})

      tl.to(".title__sub--1", 1, {x:0, opacity: 1});
    }, 16000)



See the Pen QRbgpL by anon (@anon) on CodePen

Link to comment
Share on other sites

If I understand your desired result here, you don't need to set any timeout. You can just manually add that last tween at the end of the timeline like this.


$(".title__sub").each(function(index, element) {
  tl.to(element, 1, {opacity:1});
  tl.to(element, 1, {x:400, opacity:0, ease:Power2.easeIn}, "+=2");
  tl.to(element, 0, {x:0});

tl.to(".title__sub--1", 1, {opacity: 1});


You also don't need to animate the x position as that was done in the each() loop. Is this what you meant, or have I misunderstood the desired outcome?


Happy tweening.



Link to comment
Share on other sites

Ah, I didn't realize I could just add it that way, perfect, thank you!


And whoops, you're right about the X position! 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.