Jump to content
GreenSock

Leichy

Is it possible to create a timeline with an indefinite animation followed by a finite animation?

Moderator Tag

Recommended Posts

Hello, 
I'm trying to create a carousel that spins when a button is pressed. I want it to initially ease-into the spinning animation, then spin at a constant speed for an indefinite amount of time (while the code is waiting for a response from the back-end) and lastly ease-out of the animation during a final spin. 

I tried creating a timeline and adding the 3 animations to it but the middle animation (with it's repeat set to -1) gives me trouble. I haven't found a correct way to go from the second to the third animation. I tried killing the second animation expecting the timeline to proceed to the final animation but that causes the carousel to abruptly stop.

 

So if there was a way to stop the "infinite" animation in a timeline and proceed to run the next animation that would be very helpful. Alternatively a way to repeat the second animation without setting repeat to -1 could also work. Any help is greatly appreciated.

See the Pen ExdYNMo?editors=1111 by Leichy (@Leichy) on CodePen

Link to comment
Share on other sites

Hi there, it would be really helpful to see your attempt so far so that we can advise on a solution. It's pretty tough to troubleshoot without a minimal demo

I can think of a few solutions but my advice would depend on how you've structured this so far and what your animation looks like.

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Once we see an isolated demo, we'll do our best to jump in.

Link to comment
Share on other sites

From what you're describing, I think creating one timeline and animating the timeScale would be the way to go. Basic example.

See the Pen ExgExxL by PointC (@PointC) on CodePen

 

Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

Hello, I added the code to my post. I thought I could just create a timeline, add to it the 3 animations and that they would play in the order that they are added. The execution is not what I want though, in this example you can see that the 3 animations happen but after the third animation the carousel keeps spinning. I guess that's because the second animation is set to run infinitely so it goes back to it and that's why it spins. I also tried killing the second animation but that immediately stops all the animations.

 

I hope that I described my problem well enough. I searched on this forum but found nothing about having an infinite animation in a timeline followed by a finite animation. That is what I'm trying to do. Let the carousel spin "infinitely" (because I don't know when the response from the backend will come) and when necessary stop it and proceed to the final animation (the easing-out) so the carousel would slowly stop spinning.

Link to comment
Share on other sites

Hi,

 

I've read this thread a few times and I'm a bit fuzzy on what you're trying to do.

 

Why not use @PointC's approach? Creating an animation that has an endless loop between other two instances seems a bit counter intuitive to me. Now if you don't want the second animation running for ever then you can set a number of times that it'll repeat before going onto the next one.

 

It seems to me that you want the boxes to stop at a certain point or at certain box number? If so you should definitely check the Horizontal Endless Loop helper function:

https://greensock.com/docs/v3/HelperFunctions#loop

 

That should provide a solid starting point.

 

Hopefully this helps.

Happy Tweening!

  • Like 2
Link to comment
Share on other sites

There are lots of routes really, you could kill and add another animation but it depends on what those animations are doing.

See the Pen rNqByoa by GreenSock (@GreenSock) on CodePen



Craig's route seems the most foolproof, that would work no matter what sort of motion the timeline is comprised of. A demo showing your code would be very useful if you're still stumped.

  • Like 1
Link to comment
Share on other sites

Thank you guys for all the help. @PointC's approach is great but it doesn't have a way to predetermine the box that is going to be in the middle when the carousel stops spinning.. It would be best if the carousel could start spinning and while it's spinning the code could select the box that is going to be in the middle when the carousel stops spinning.

 

  • Like 1
Link to comment
Share on other sites

Hi,

 

The Horizontal Endless Loop helper function has a bunch of methods that can help you do that:

/*
This helper function makes a group of elements animate along the x-axis in a seamless, responsive loop.

Features:
- Uses xPercent so that even if the widths change (like if the window gets resized), it should still work in most cases.
- When each item animates to the left or right enough, it will loop back to the other side
- Optionally pass in a config object with values like "speed" (default: 1, which travels at roughly 100 pixels per second), paused (boolean),  repeat, reversed, and paddingRight.
- The returned timeline will have the following methods added to it:
- next() - animates to the next element using a timeline.tweenTo() which it returns. You can pass in a vars object to control duration, easing, etc.
- previous() - animates to the previous element using a timeline.tweenTo() which it returns. You can pass in a vars object to control duration, easing, etc.
- toIndex() - pass in a zero-based index value of the element that it should animate to, and optionally pass in a vars object to control duration, easing, etc. Always goes in the shortest direction
- current() - returns the current index (if an animation is in-progress, it reflects the final index)
- times - an Array of the times on the timeline where each element hits the "starting" spot. There's also a label added accordingly, so "label1" is when the 2nd element reaches the start.
*/

The toIndex() method might be what you're looking for.

 

Hopefully this helps.

Happy Tweening!

  • Like 2
Link to comment
Share on other sites

Hey @Rodrigo I'm playing around with the verticalLoop() helper function and yeah that's exactly what I'm looking for. I'm just running into one problem. In the example linked in the greensock docs there is a weird small gap between the start and the end of the div that contains the "box" divs. I added some borders to the example so it's easier to see. You can see the gap under the Skype logo with a number 9 inside it. I played around with the css, trying to fix it by adjusting various heights but I can't seem to get rid of it.

See the Pen PoyYrNY by Leichy (@Leichy) on CodePen

Link to comment
Share on other sites

That's because you don't have box-sizing set to border-box, so the 2px borders are throwing off the calculations. You can fix that by setting a paddingBottom on your verticalLoop() config like (-4 because 2px on top and 2px on bottom of each): 

paddingBottom: gsap.utils.toArray("#wheel_1 .box1").length * -4

Better? 

  • Like 1
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.
×