Leichy

Hey, thank you for responding but won't this just make my elements blurry without it actually looking like motion blur.

I have a pretty simple animation, a reel of items that moves down so it looks like the reel is spinning vertically. I'm trying to add motion blur to it but it's not working and searching for motion blur in gsap gives no results. I added "motionBlur: true" to the timeline modifiers but that did nothing. Any help would be greatly appreciated.

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. verticalLoop example

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.

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.

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.