Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
The Refinery

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

Go to solution Solved by Dipscom,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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



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.