Animating a <ul> with a delay on each <li>

[The Refinery]

Hi there,

 

I'm sure this is really easy to do, but I can't seem to work it out. I just want to animate the <ul> and have each <li> have a slight delay on it so they come in one after the other. Any help would be appreciated.

See the Pen XWERPJY by jonnyjones99 (@jonnyjones99) on CodePen

[Dipscom]

Hey Refinery!

 

You are just overthinking it a bit. All you need is the following:

 

gsap.from(".list__item", {
  opacity: 0,
  duration: 0.5,
  x: 50,
  stagger: 0.5
});

What you are doing in your code is creating an individual Tween for each of the list items, not a timeline that contains all the items. As each tween is independent and only contains one item, there is nothing to stagger and they all paly at the same time.

[The Refinery]

Of course! Thanks for that- been looking at code for too long today 🤦‍♂️

 

Thanks!