emmanuelulloa Posted June 13, 2023 Share Posted June 13, 2023 Hello friends. Is there a way to easily reset an element/object without having to do this: o.x = 0; o.y = 0; o.xPercent = 0; o.yPercent = 0; o.scale = 1; o.rotation = 0; o.rotationX = 0; o.rotationY = 0; o.opacity = 1; ///.etc, .etc Something like css transform: none;maybe? (within GSAP). Link to comment Share on other sites More sharing options...
Rodrigo Posted June 13, 2023 Share Posted June 13, 2023 Hi, You might want to look into clearProps: // Tween the values gsap.to(element, { x: value, y: value, xPercent: value, yPercent: value, scale: value, rotation: value, rotationX: value, rotationY: value, opacity: value, }); // Later in your code: gsap.set(element, { clearProps: all, }); From the Docs: clearProps You may enter a comma-delimited list of property names into clearProps that you want to clear from the element’s style property when the tween completes (or use "all" or true to clear all properties). This can be useful if, for example, you have a class (or some other selector) that should apply certain styles to an element when the tween is over that would otherwise get overridden by the element.style-specific data that was applied during the tween. Typically you do not need to include vendor prefixes. clearProps also clears the "transform" attribute of SVG elements that have been affected by GSAP because GSAP always applies transforms (like x, y, rotation, scale, etc.) via the transform attribute to avoid browser bugs/quirks. Clearing any transform-related property (like x, y, scale, rotation, etc.) will clear the entire transform because those are all merged into one "transform" CSS property. Another option is the revert method: https://greensock.com/docs/v3/GSAP/Tween/revert() https://greensock.com/docs/v3/GSAP/Timeline/revert() // Tween the values const t = gsap.to(element, { x: value, y: value, xPercent: value, yPercent: value, scale: value, rotation: value, rotationX: value, rotationY: value, opacity: value, }); // Later in your code t.revert(); Hopefully this helps. If you have more doubts about this, please remember to include a minimal demo. Happy Tweening! Link to comment Share on other sites More sharing options...
emmanuelulloa Posted June 13, 2023 Author Share Posted June 13, 2023 @Rodrigo sort of what I need but it does not tween to the reset of the values. I'm working on a little game and I'm just looking for a way to transform sprite games and particles (most of the objects have a transformation applied) to its original state with a simple object. Link to comment Share on other sites More sharing options...
Solution GreenSock Posted June 13, 2023 Solution Share Posted June 13, 2023 So you want a way to record an existing set of values so that you can animate back to them? I assume you don't want to just reverse() your animation(s), right? Are you just trying to animate back to a state where no transforms are applied (well, the default values)? Or back to some other state where there may be some non-default transforms applied? Technically you can animate to transform: "none", yes. It's generally not the most performant way because whenever you use "transform" as the property, it must apply that and then parse out all the individual components. You could just create a single object with the default values and use that to animate to() it anytime, sorta like: const defaultTransforms = {x: 0, y: 0, rotation: 0, scaleX: 1, scaleY: 1, skewX: 0, skewY: 0, rotationX: 0, rotationY: 0}; gsap.to(obj1, defaultTransforms); // or if you want to add certain things like duration.. gsap.to(obj2, {duration: 2, ...defaultTransforms}); 2 Link to comment Share on other sites More sharing options...
emmanuelulloa Posted June 13, 2023 Author Share Posted June 13, 2023 Thanks @Rodrigo that one is a more elegant solution for my code. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now