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

[sygad1]

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]

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]

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]

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]

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]

Thanks for the explanation, works like a charm now

[ShesADev]

On 7/21/2017 at 9:07 AM, Carl said:

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:

 

 

 

Apologies for resurrecting this thread after 3 years, but I'm wondering how this would be implemented with gsap3. I've tried to adapt it with the following code:

gsap.to("li",{duration: 2.5, autoAlpha:1, repeat: -1, stagger:5})

but I keep getting the li's to layer on top of each other. I'd like it to fade in and out like your example. 

[GreenSock]

@ShesADev it looks like you just forgot the yoyo: true. And I assume your elements start out natively at an opacity of 0? 

 

If you still need some help, please fork the CodePen and show us a minimal demo so that we can see it in context. 

 

Happy tweening!