Crossfade array without repeat

[aok 6 Likes (Newbie)]

I have a simple crossfade set up, which works fine, but it runs on repeat/loop. Upon reaching the final item I'd like the final item to fade out (or if it's easier the whole containing element) and then stop.

 

I have a simple CodePen set up so hoping someone can help... getting a bit stuck with how to achieve this.

 

Thanks.

See the Pen abjyjjV?editors=1111 by richardcool (@richardcool) on CodePen

[Sam Tremblay 22 Likes (Newbie)]

Hello @aok!

 

Try this:

See the Pen wvxqEgW by sam-tremblay (@sam-tremblay) on CodePen

 

EDIT: Hey @GreenSock, does kill the tween on each complete is a good mind to adopt or not?

Edited January 16 by Sam Tremblay
Codes updated

[aok 6 Likes (Newbie)]

Thank you so much @Sam Tremblay – this was a great shout and much appreciated. Makes a lot of sense now!

[Rodrigo 5,436 Likes (Superhero)]

Hi,

 

On top of Sam's great advice and solution, I normally use this solution for dynamic endless loops:

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

 

The only difference is that for endless loops the timeline has a repeat: -1 and after the loop I add the fade in for the first element of the collection, something like this:

const keywords = gsap.utils.toArray(".keywords li");
const tl = gsap.timeline({
  repeat: -1
});

keywords.forEach((word, i) => {
  const nextWord = keywords[i + 1];
  tl.to(word, { autoAlpha: 0, duration: 2 }, "+=2");
  if (nextWord) {
    tl.to(nextWord, { autoAlpha: 1, duration: 2 }, "<");
  }
});
// First keyword
tl.to(keywords[0], { autoAlpha: 1, duration: 2 }, "<");

@Sam Tremblay killing each instance would be a good practice, although, as far as I know, as soon as the GSAP instance is completed and since it won't be played again GSAP will make it available for garbage colletion (same happens when you manually kill/revert and instance).

 

Happy Tweening!

[Carl 11,180 Likes (Superhero)]

similar to @Rodrigo's slick approach I tend to reach for solutions that end up with a timeline being constructed.

I also like to lean on as many of the API features as possible like: repeat, repeatDelay, stagger, etc.

 

From what i understand every item fades in and fades out except the first item which doesn't need to fade in.

 

Using a Loop

add a single tween to a timeline that fades the first item out. Then loop through the rest and add a repeating tween to the timeline that fades each item in and out.

 

See the Pen rNrzobQ?editors=1010 by snorkltv (@snorkltv) on CodePen

 

 

 

tweenFromTo()

Here I build a timeline with a single stagger and use tweenFromTo() to omit the part of the timeline where the first item fades in

 

See the Pen LYBjMJK by snorkltv (@snorkltv) on CodePen

 

I added GSDevTools so that you can mess with the fade and static variables and test that they are working properly.

 

There are many ways to approach these things and the best one is the one you're most comfortable with. 

 

Note: Rodrigo's approach would have a clear advantage if you want a different ease or animation for the enter and exit animations.