Jump to content
Search Community

Crossfade array without repeat

aok test
Moderator Tag

Go to solution Solved by Sam Tremblay,

Recommended Posts

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.



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

Link to comment
Share on other sites



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!

  • Like 3
Link to comment
Share on other sites

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





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.

  • Like 2
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...