Jump to content
GreenSock

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

GSAP + React, "clear props" for react inline styles?

Recommended Posts

Hello,

 

In the learning process of React + GSAP and I've run into a situation where I can't find the easy solution. Should be a quick answer

 

In previous projects, (javascript + html for example) I would write up a timeline, then set an array of  elements with  a { clearProps: "all" } to essentially reset it

 

The code I'm working with now is React with inline styles.  It seems that clearing the props in the same fashion removes all of the inline styles, and since it's not set in a css sheet, the animation doesn't reset but breaks and it seems this is working as intended. 

 

Is there a recommended way to approach resetting inline styles in react?  Or should I start pushing to refactor all of the code into css files?  

 

Thanks for any of your time!

Link to post
Share on other sites

Hi and welcome to the GreenSock forums.

 

Yeah, indeed GSAP clearProps: "all" removes all inline styles, so it is affecting the styles applied in the JSX as well. If possible target only the props affected by a GSAP instance in order to keep the ones present in the JSX:

gsap.to(this.box, {
  duration: 1,
  delay: 1,
  rotation: 180,
  x: 100,
  y: 100,
  onComplete: () => {
    gsap.set(this.box, {
      clearProps: "rotation, x, y"
    });
  }
});

That will only remove Rotation, X and Y while not affecting any other inline styles.

 

Finally if possible, yeah I'd try to keep everything in a CSS file, is far simpler (especially for complex animations) to just remove all inline styles rather than typing all the ones that should be removed, the latter is more prone to errors. Also as a personal preference I don't like adding styles to the JSX unless I have no other choice, the code looks messy, but that is just my opinion.

 

Happy Tweening!!!

  • Like 3
Link to post
Share on other sites

Thank you for the clear reply, Rodrigo.  Time to pull these sleeves up and refactor all of the code :)

  • Like 1
Link to post
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.

×