To do list animation on click/Enter key

[RaddyB]

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

[akapowl]

 

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

 

[RaddyB]

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