Jump to content
Search Community

Possible Bug: Inconsistent 'clearProps' behaviour

Tom B. @ Wix test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I stumbled upon a weird behaviour of clearProps, and couldn't find any reference to whether it is a bug or not.

 

When using clearProps with explicit values the order of the parameters passed has importance when clearing mixed transforms/properties values.

 

This will clear x and y and skip opacity - 

clearProps:'x, y, opacity' 

This will clear only "opacity" and skip x and y.

clearProps: 'opacity, x, y'

Same goes with other non transform values like "clip"

 

See the codepen for clearer example.

See the Pen ufphl by tombigel (@tombigel) on CodePen

Edited by Tom B.
Link to comment
Share on other sites

Also be aware that clearProps is intended for cleaning up the inline styles used by GSAP, and not necessarily resetting individual values, so clearing x or y actually clears the entire transform style. This is why you're seeing it work for both x and y without opacity in the first example. Only the x was being parsed but that was clearing the whole transform anyway.

TweenLite.to("#foo", 2, { x:100, y:200, clearProps:"x" })
// clears the transform style, resetting both x and y transforms

The docs do mention that clearProps is "a comma-delimited list" but I suppose that doesn't clarify that extra white space won't be trimmed.

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