Jump to content


To do list animation on click/Enter key

Go to solution Solved by akapowl,

Recommended Posts

Hello everyone!

A JS and gsap newbie here.

I want to add animation on each text line separately. For example, I type ‘walking’ -> press Enter/click on a button -> animation for that newly created line starts. I type ‘coding’ (the animation is not applied to the previous line) -> press Enter -> animation applies to ‘coding’ and not the whole list.

For now, I just put gsap in the function to show how I would want it to look for every line separately.

As I understand, I need to make the animation restart every time and somehow make it applied only to a newly created text.

I will be happy to get a link/term I need to look into😄

Sorry if I can’t explain properly haha, it’s 2am and I’m getting desperate. Thanks!

See the Pen OJwpmaL by Raddyberry (@Raddyberry) on CodePen

Link to comment
Share on other sites

  • Solution


Hello @RaddyB - welcome to the GSAP forum.


You should just target each item you create individually, instead of targetting the whole ul container element.


// targets your container element, so the whole container element will be animated
gsap.from(".toDoContainer", {duration: 1.5, x: -400, ease: 'power2.inOut', opacity: 0});

// targets the item you create, so only that element will be animated
gsap.from(item, {duration: 1.5, x: -400, ease: 'power2.inOut', opacity: 0});


Is that what you wanted to go for?


See the Pen poZewzP by akapowl (@akapowl) on CodePen


  • Like 4
Link to comment
Share on other sites

Thank you so much @akapowl! thought I needed something more difficult, but the solution is that simple. 

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