animation with clearProps value of 'transformOrigin' clears entire transform #393
Comments
|
Good catch, @tombigel . And thanks so much for the reduced test case! This should be resolved in the next release which you can preview at https://assets.codepen.io/16327/gsap-latest-beta.min.js Better? |
jackdoyle
added a commit
that referenced
this issue
Jul 8, 2020
- NEW: ScrollTrigger.matchMedia() method that lets you easily set things up according to breakpoints and ScrollTrigger will automatically revert and kill any ScrollTriggers associated with the breakpoints that don't match. This makes it much simpler to make things behave differently on mobile devices and desktops, for example. - NEW: ScrollTrigger.scrollerProxy() method that makes it easier to integrate smooth scrolling effects by setting up proxy getter/setters for the scrollTop/scrollLeft properties of specific scrollers. - NEW: ScrollTrigger.saveStyles() method lets you record all the inline styles for any elements so that when ScrollTrigger does a refresh and reverts things internally (to do measurements), those elements have their inline styles fully reverted. This is particularly helpful when you have tweens/animatioons that add inline styles. Even if you rewind the tweens, that doesn't REMOVE inline styles, thus if you have CSS rules that should affect the elements, they won't because the inline ones (from the tweens) are more specific. - NEW: ScrollTrigger.config() recognizes a new "autoRefreshEvents" property that controls which events automatically trigger a ScrollTrigger.refresh(). It's a comma-delimited list with any of the following: "load,resize,visibilitychange,DOMContentLoaded" (and that's what it is by default). - NEW: globalTime() method on all animations lets you convert a local playhead time to the global time. For example, if a tween starts 5 seconds in and you run tween.globalTime(1) it would return 6 (assuming a timeScale of 1). It does factor in the timeScale of all ancestor timelines. - IMPROVED: you can revert fromTo() tweens to their previous state with a negative number like animation.progress(-1) or animation.totalTime(-1). - IMPROVED: if you kill() a ScrollTrigger, it will also revert any associated animation (and kill that too). - IMPROVED: if you change the duration of a tween after it has begun, it will make that change smoothly (adjust the startTime() unless the parent timeline has smoothChildTiming set to false). See https://greensock.com/forums/topic/24596-flicker-on-updating-duration-on-repeating-animation/ - IMPROVED: ScrollTrigger automatically sets scroll-behavior to "auto" if there's a "snap" defined because scroll-behavior: smooth would interfere with snapping. - IMPROVED: ScrollTrigger doesn't force a refresh() when returning to an inactive/hidden tab if the browser window wasn't resized. - FIXED: if anticipatePin was set on a ScrollTrigger, a refresh() (or window resize) could trigger it inadvertently. - FIXED: in certain circumstances with ScrollTrigger pins, the layout may not be properly refreshed when resizing. - FIXED: if you tween a generic object with a property that has a decimal value to a string with a decimal, it could cast it as a string instead of keeping it as a number. See https://greensock.com/forums/topic/24564-random-value-is-a-string/ - FIXED: if you kill() or disable() a ScrollTrigger that had a toggleClass, it may not reset things properly. - FIXED: worked around Firefox bug that affects borderColor (Firefox always reports the computed value s literally nothing, ""). See https://greensock.com/forums/topic/24583-how-to-return-colors-that-i-had-after-reverse/ - FIXED: worked around a bug in some browsers (like iOS Safari) where the browser would misreport the scroll position slightly, causing the snap of a ScrollTrigger to get halted (because it auto-killed the tween, thinking the user had interacted with the scroll). - FIXED: if you clearProps "transformOrigin", that inline style wasn't properly removed. See #393 - FIXED: ScrollTrigger may refresh more than it really needed to. - FIXED: added Tween.set() to the TypeScript definitions. See #392 - FIXED: if overwrite is set to "auto" and the playhead jumps way ahead past the end of an overlapping tween, it may not be overwritten. - FIXED: GSDevTools prevented overwrite: "auto" from functioning properly. Beware, however, that GSDevTools forces the global timeline to the end initially and then starts over so that all animations are initialized, thus overwriting occurs immediately. - FIXED: when you kill() a ScrollTrigger, it will also kill its marker elements now. - FIXED: if you alter the timeScale() of an animation that has a delay before it begins, it would appear to skip the delay. See https://greensock.com/forums/topic/24627-delay-ignored-when-timescale-set/ - FIXED: if a ScrollTrigger's pinned element was display: inline, it would collapse during the pinning. It's now switched to inline-block to maintain sizing. See https://greensock.com/forums/topic/24685-scrolltrigger-trouble-with-pinning/ - FIXED: if markers are enabled and there's one at the very bottom of the screen, viewport resizes may cause the marker to invert and its height would be incorporated into the page height.
|
Should be resolved in the latest release. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
the clearProps attribute in css plugin supports both camelCase and kebab-case attributes in it's list, but specifically transformOrigin doesn't work in camelCase, only in kebab-case.
Further more, if transformOrigin is present in the clearProps string it will be treated as if 'transform' was passed to clearProps.
GSAP 3.X
Demo:
https://codepen.io/tombigel/pen/RwrVVMg
The text was updated successfully, but these errors were encountered: