Jump to content
Search Community

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

sygad1 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 5
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

  • 3 years later...
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. 

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