Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
sygad1

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

Recommended Posts

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

Link to comment
Share on other sites

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

 

  • Like 4
Link to comment
Share on other sites

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 ;-)

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

 

 

 

 

 

  • Like 2
Link to comment
Share on other sites

Thanks for the explanation, works like a charm now

  • 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.
×