Jump to content

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

Newb: How can I remove GSAP's inline styling upon animation-completion?

Go to solution Solved by Carl,

Recommended Posts

Hi GSAP people!


Extremely new to GSAP and I'm just trying to wrap my head around it. I did an initial google search but I kept on seeing other things mentioned that I don't quite understand yet.


Is it possible to remove the inline styles GSAP sets after the animation is complete? I'm just using a basic element.from()... animations that uses x and opacity. Is there a way to remove inline transform and opacity from the element in question after the animation is complete? 



See the Pen PoKPGqG by grizhlie (@grizhlie) on CodePen

  • Like 1
Link to comment
Share on other sites

  • Solution

Hi and welcome to the GreenSock forums,


Thanks so much for the clear demo.


You can use an onComplete callback to apply clearProp:"all" to remove the inline styles.

Be sure to inspect your box after the animation runs in the demo below

See the Pen bGrVwxv?editors=1010 by snorkltv (@snorkltv) on CodePen


more on clearProps: https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin#h3-clearprops


this video on callbacks and scope may help too



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

Thank you so much Carl! That's so simple to do, GSAP is amazing. 😍


I wish I used the word 'complete' in my search instead of 'animation finished', completely missed this functionality. 


I'll implement this into my project now, you're a saviour, cheers 🍻 - I'll watch the video now and see what else I have to learn.

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