Infinitely repeat fading sequence of images

[Nwekar]

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

 

thanks.

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

[GreenSock]

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]

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

❤️

[Joseph chimebuka]

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

 

[Cassie]

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

[Bureau Blanc]

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]

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]

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]

@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

[Alex.Marti]

Hello everyone,

 

First of all, thanks for sharing your knowledge and ressources to make seamless loop. It helps me a lot.

 

But I need to push the complexity a little bit further and add nested timeline because I need a small animation between the fading images (the rotating background).

 

You can see my codepen here. I'm stuck because I have the same issue that @Carl had with loop : there is a gap between the last image and the repeat.

 

I'm not sure where to begin to implement stagger calculation with nested timeline. Is it even possible?

 

Thanks

 

Alex

 

 

See the Pen RwdqeMZ by iamalexm (@iamalexm) on CodePen

 

 

[Rodrigo]

Hi @Alex.Marti,

 

In this cases my approach (and I'm not saying that is the best way to do this, just a personal preference) is to create a timeline with a loop that considers that the first element is already visible and animated in, then before that loop I create a Tween/Timeline that just animates the first element in and keep that outside the timeline that runs endlessly:

const master = gsap.timeline({ repeat: -1 });
const images = gsap.utils.toArray(".image");
const first = images[0];
const firstBg = first.querySelector(".img-bg");

// Animate the first element in OUTSIDE THE LOOPING TIMELINE
gsap.timeline()
  .to(first, { autoAlpha: 1 })
  .to(firstBg, { rotation: 5 });

images.forEach((image, i) => {
  const bg = image.querySelector(".img-bg");
  const next = images[i + 1];
  if (next) {
    const nextBg = next.querySelector(".img-bg");
    master
      .to(bg, { rotation: 0 }, "+=2")
      .to(image, { autoAlpha: 0 })
      .to(next, { autoAlpha: 1 }, "<")
      .to(nextBg, { rotation: 5 }, "-=0.2");
  } else {
    // This is the last element
    master
      .to(bg, { rotation: 0 }, "+=2")
      .to(image, { autoAlpha: 0 })
      // Animate the first element in, INSIDE THE LOOPING TIMELINE
      .to(first, { autoAlpha: 1 }, "<")
      .to(firstBg, { rotation: 5 }, "-=0.2");
  }
});

Like that the looping timeline runs based on the fact that the first element will be visible at the start of the timeline, like that you get an endless loop with a timeline.

 

Here is a fork of your demo:

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

 

Again this in no case means that @Carl's approach doesn't work in your scenario, I'm 100% sure that you can find a way to accommodate your needs using his approach. My simpler brain just works better with loops, like that the solely working neuron left only has to spin in one direction ?

 

Hopefully this helps.

Happy Tweening!

[Alex.Marti]

Hi @Rodrigo,

 

Thank you for sharing your approach. 

 

It works perfectly ?

 

Alex