Infinitely repeat fading sequence of images

[Nwekar 1 Likes (Newbie)]

Hi, I'm having trouble getting the animation to repeat  smoothly

 

thanks.

See the Pen vYWJROm by N-Nwekar20 (@N-Nwekar20) on CodePen

[GreenSock 18,567 Likes (Superhero)]

That's just a logic problem due to the fact that after you fade the last image up, you're having the timeline just replay from the start, thus there's no fading of the last image to the first one. What's tricky is that you must factor in the stacking order of things, so you can't just fade the first one in again at the end, since the last one will be sitting on TOP of it, making it impossible to see the first image fading back in. 

 

Here's one approach: 

See the Pen KKyvxEm?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I'm just using staggers and then handling the final transition in a custom way. This code allows you to add as many images as you want and it'll all "just work" instead of writing a new tween for each and every image. 

 

Does that clear things up? 

[Nwekar 1 Likes (Newbie)]

You solved my logic problem Thank you so much , I really appreciate it!

❤️

[Joseph chimebuka 0 Likes (Newbie)]

But what if you only have two images instead of three what would you do?

 

[Cassie 5,370 Likes (Superhero)]

Hi there Joseph - you can just remove one image from the HTML. Hope this helps

[Bureau Blanc 0 Likes (Newbie)]

Is there a way get the active / current visible image?

I would like to add a dots under the images to show the number of images and which one is currently active.

[mvaneijgen 1,709 Likes (Superhero)]

Hi @Bureau Blanc welcome to the forum!

 

You could easily do that by creating the dots in HTML for the amount of images you have in your setup (or do something fancy with JS, get the amount of images and create as many dots for them). Then style them with CSS and with the same timing as the images animate in/out animate your dots .from() and .to() the one being active. 

 

If you can create a minimal demo and show what you've already tried, someone here will be sure to take a look. To be extra sure create a new topic for your question and just reverence this one.  Hope it helps and happy tweening! 

[Bureau Blanc 0 Likes (Newbie)]

21 minutes ago, mvaneijgen said:

Hi @Bureau Blanc welcome to the forum!

 

You could easily do that by creating the dots in HTML for the amount of images you have in your setup (or do something fancy with JS, get the amount of images and create as many dots for them). Then style them with CSS and with the same timing as the images animate in/out animate your dots .from() and .to() the one being active. 

 

If you can create a minimal demo and show what you've already tried, someone here will be sure to take a look. To be extra sure create a new topic for your question and just reverence this one.  Hope it helps and happy tweening! 

Hi @mvaneijgen. Adding the dots is not the problem. Finding out the one that should be active is.

I updated the example above to show you the problem:

 

See the Pen mdGqRmY by BureauBlanc (@BureauBlanc) on CodePen

[mvaneijgen 1,709 Likes (Superhero)]

@Bureau Blanc yep that is always tricky. This example uses staggers and advanced position parameter to put thing on the timeline at the right place. 

 

I've used CSS selectors in my example, but you can easily convert them back to the JS slice method if you want. 

 

This kind of reminds me of a tutorial our own @Carl did which has a great visual explanation on how to create seamless loops, be sure to give it a watch! Hope it helps and happy tweening! 

 

 

 

See the Pen JjaOWjV?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen