Jump to content
Search Community

gsap.quickSetter vs gsap.set with React

imdavidmin test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi,

 

Is gsap.quickSetter intentionally not triggering render updates for React? 

 

I have a div that I am moving when the window resizes, and am calling the quickSetter to set 'x' in an event listener. I see no changes when the quickSetter is called, but can see the value for the translate x has changed when I make another update using gsap.to with relative values. Using .set() to replace quickSetter will update the page when the window is being resized.

Link to comment
Share on other sites

My best guess (without seeing any minimal demo) is that you're not using units properly.

const setX = gsap.quickSetter("#element", "x");
setX(20); // BAD - NO UNITS! Like doing translateX(20)
setX("20px"); // GOOD

// or tell the quicksetter to always append "px"
const setX = gsap.quickSetter("#element", "x", "px");
setX(20); // now this is fine.

 

  • Like 1
Link to comment
Share on other sites

Hi,

Thanks Jack. It does fix the quicksetter problem to specify units. Still it's a weird thing because it seems when I don't specify units, it still does something in the background. 

 

I've recreated this scenario in codepen: 

See the Pen eYvmoPw?editors=1011 by imdavidmin-the-flexboxer (@imdavidmin-the-flexboxer) on CodePen

 

You can see that on click, the event handler uses the QuickSetter to move the div by 300 px. Nothing shows on screen. But when you resize the window, the gsap.to() animation with +=10 x starts from 300px, meaning (maybe?) quickSetter has worked, just not rendered.

 

If you comment out qs and uncomment the .set() method, it works as expected.

Link to comment
Share on other sites

  • Solution

Yep, GSAP is doing what you asked under the hood - "x" is animated to that number but since you didn't specify any unit, the browser simply refuses to render it. Try for yourself - set transform: translateX(300). It gets ignored. 

 

Part of what makes quickSetter() "quick" is that it can skip a lot of the clean-up logic, like adding units, parsing stuff, conversions, blah, blah - it just plugs whatever you give it directly into the value on the element. 

 

So when you do a regular .set() or .to(), it's doing that extra logic and seeing that the current x value is something like 300 or whatever. Then it adds the missing unit and presto! The browser honors it. 

 

Make sense? 

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