Jump to content
Search Community

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

NickCB test
Moderator Tag

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})
    })

    setTimeout(function(){
      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

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.
×
×
  • Create New...