Jump to content
Search Community

Infinitely repeat fading sequence of images

Nwekar test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

  • Solution

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? 

  • Like 3
Link to comment
Share on other sites

  • GreenSock changed the title to Infinitely repeat fading sequence of images
  • 6 months later...
  • 5 months later...

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! 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

@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

  • Like 4
Link to comment
Share on other sites

  • 11 months later...

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

 

 

Link to comment
Share on other sites

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!

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