Jump to content
Search Community

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

Guest
Moderator Tag

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? 

 

Thanks!

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

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

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.
×
×
  • Create New...