Animated list of items, only show 1 item at a time

[sygad1 15 Likes (Newbie)]

Hi All,

 

I'm looking to stagger the display of a list of items, I only want 1 item to show at once.

 

I have knocked up an example using jQuery but can't figure out how to utilise GSAP for the same action.

 

Ultimately, I want to control the fade and scale of each item as they appear and disappear.

 

Any help appreciated

See the Pen eRqqJq?editors=1111 by sygad1 (@sygad1) on CodePen

[Carl 9,066 Likes (Superhero)]

thanks for the demo.

 

I'm not a big fan of switching the display property so many times as it forces the browser to do another layout.

I prefer toggling the visibility which is what our autoAlpha property does.

 

I changed your css for the li to

 

li {
    position:absolute;
    visibility:hidden;
  }

 

and the GSAP code could be something like:

 

var tl = new TimelineMax({repeat:-1});
tl.staggerTo("li", 0.5, {autoAlpha:1, repeat:1, yoyo:true}, 1);

 

demo:

 

See the Pen vJBEJe?editors=0110 by GreenSock (@GreenSock) on CodePen

 

[sygad1 15 Likes (Newbie)]

Thank you for the speedy and working demo

 

I'll be honest, I wouldn't have thought of doing the CSS like that and I didn't know you could have staggerTo on a timeline.

 

GSAP is almost too good and too massive

[sygad1 15 Likes (Newbie)]

Is there some reason why it won't initialise the callback function when all animations are complete?

 

I've updated my original codepen to reflect this

 

I noticed if I changed it from a TimelineMax back to a TweenMax, the callback function is called

[Carl 9,066 Likes (Superhero)]

Cool. Happy to help.

 

When using a timeline's staggerTo method there is also a position parameter, so give this a shot:

 

tl.staggerTo("li", 0.5, {autoAlpha:1, repeat:1, yoyo:true}, 1, 0, finished);

 

https://greensock.com/docs/TimelineMax/staggerTo()

 

Notice the 0 between the 1 and finished. This means the animation will be inserted into the timeline at a time of 0 seconds.

 

Just to be clear, a TweenMax.staggerTo() would have worked as well, I chose a timeline as it will give you more options to play(), pause(), reverse() and control the animation.

 

 

 

 

 

[sygad1 15 Likes (Newbie)]

Thanks for the explanation, works like a charm now