Jump to content
GreenSock

Vero

Set element back to original style state after animation ends (before another animation starts)

Recommended Posts

Hello,

I tried searching in the forums and docs but couldn't make it work. 
I have a list of elements, each element can have multiple animations, sometimes one animation (animating the same style) starts where the other one ends. 


I have an issue to set the element back to original state after the animation ends.

Let's say I have an animation for border that will starts on 0 second and  last for 2 seconds and another one for the same element with a different border starting right after. This on its own works fine. But then When the duration ends I need to get the border back to 'none' (both if there is only one animation or if there are multiple).
 

timeline.to(".element", {duration: 2, border: 1px solid blue}, 0);
timeline.to(".element", {duration: 2, border: 1px solid pink}, 2)

I tried using onComplete, set, clearProps, fromTo, .then, maybe something else as well and none of it worked. OnComplete was firing after animation started (I did used onComplete: functionName and not functionName() but it fired anyway), I don't know if I'm using it wrong or where the problem is. 

The only thing that works is to add another animation that would set the border to 'none' but then the second animation doesn't run

 

timeline.to(".element", {duration: 2, border: '1px solid blue'}, 0);
timeline.to(".element", {border: 'none'}, 2);
//this one will not work
timeline.to(".element", {duration: 2, border: '1px solid pink'}, 2);
timeline.to(".element", {border: 'none'}, 4);

Is there some other way how to make this work? I could probably do some if else in the code to check if there is another animation starting at the same time and then make sure to set the border to 'none' only in the end but I'd rather use some greensock function if there is one. 
 

Thank you for the help :) 

Link to comment
Share on other sites

Hey there!

 

Little tricky to help here because I don't know what 'none of it worked' means

Demos are super useful because we can explain what we're expecting to see at the same time as showing someone what the actual result is. It helps get us on the same page! Let's start here.

 

See the Pen qBojNdP by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Hello Cassie, 

I managed to solve it in a non gsap way in the end. I think it is a problem with our legacy code not rendering the animations properly as I can't reproduce it in codepen. 

But thank you anyway and have a great day :)

  • Like 1
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.
×