Skip to content

Commit

Permalink
3.7.0
Browse files Browse the repository at this point in the history
- NEW: percentage-based position parameter options for timelines - A value like "-=25%" would overlap by 25% of the inserting animation's totalDuration, or "<25%" would insert it 25% into the previous animation. See docs for details. Related: #444

- NEW: gsap.utils.selector() returns a selector function that's scoped to a particular element (or React ref or Angular ElementRef) - no need to create a ref for each and every element you want to animate, for example!

- NEW: gsap.utils.toArray() accepts an optional 2nd parameter, the Element on which .querySelectorAll() should be called (the scope) if selector text is passed in. Like gsap.utils.toArray(".box", myElement)  will find all the descendant elements of myElement with the class of "box".

- NEW: added getTween() method to ScrollTrigger that allows you to get the scrub tween (default) or the snapping tween (getTween(true)).

- NEW: ScrollTrigger.scrollerProxy() recognizes a fixedMarkers: true option that'll prevent it from moving the scroller markers. It can be useful in setups like described at #452

- NEW: ScrollTrigger recognizes a new pinnedContainer property which allows you to specify an ancestor element that gets pinned which would affect the positioning of the start/end values. For example, if the parent element gets pinned for 300px, the start/end values of a ScrollTrigger on that child element should be pushed down by 300px. See https://greensock.com/forums/topic/28255-scrolltrigger-not-delaying-within-pinned-element/

- NEW: MotionPathPlugin recognizes a new "fromCurrent" boolean value that, when false, causes it NOT to include the current property values in an Array that's passed in for the "path". For example, if the target is currently at x: 0, y: 0 and then you do a motionPath: {path: [{x: 100, y: 100}, {x: 200, y: 0}, {x: 300, y: 200}]} tween, by default it would add {x: 0, y: 0} to the start of that Array so that it animates smoothly from wherever it currently is but now you can set fromCurrent: false to avoid that and just have it jump to x: 100, y: 100 at the start of that tween. See https://greensock.com/forums/topic/28421-motionpathplugin-option-to-not-add-current-targets-position-to-the-start-of-the-path-array/

- NEW: Helper function added to the docs that can deliver onReverse() functionality plus much more. It's called trackDirection(). See https://greensock.com/docs/v3/HelperFunctions#onReverse. Related to #144 (comment)

- IMPROVED: Flip plugin has better support for SVG elements (it was created for regular DOM elements)

- IMPROVED: better support for special characters inside string-based "random(...)" values. See https://greensock.com/forums/topic/28077-using-special-symbols-and-characters-in-gsap-text/

- IMPROVED: if you enable() a ScrollTrigger (after it was disabled), it now resets itself by default rather than factoring in the previous position. So, for example, if its progress was 1 when it was disabled, and then you scroll the page all the way up and enable() it, it previously would fire its onEnterBack and onLeaveBack callbacks but now it doesn't. You can control this behavior with the new reset parameter of the enable() method.

- IMPROVED: better support in ScrollTrigger for CSS grid properties on pinned elements

- IMPROVED: ScrollToPlugin will sense if a scroll-snap-type is set on the target and if so, it will set it to "none" during the scrollTo animation, and then re-apply it at the end. See https://greensock.com/forums/topic/26181-scroll-snap-and-scrolltoplugin-not-playing-nice-togehter/

- IMPROVED: 2 extra decimal places of precision for generic tweens in order to add extra smoothing to ScrollTrigger scrubbing of very long timelines, for example. See https://greensock.com/forums/topic/28148-scrolltrigger-and-lottie-animation-flickering-problem/

- IMPROVED: TypeScript definition fixes and enhancements

- IMPROVED: for Draggables of type:"rotation", cursor changes are enabled

- IMPROVED: you can stagger keyframe tweens

- FIXED: if you animate a non-CSS property on a DOM element (like "innerHTML") with a .fromTo(), the "from" portion may not be pulled directly from that vars object. See https://greensock.com/forums/topic/27644-fromto-starting-from-0-instead-of-passed-value-when-1000/

- FIXED: .from() scrambleText animations with a starting value of "" didn't work properly.

- FIXED: ScrollTrigger.saveStyles() could cause inline CSS styles to stay reverted (like for from() tweens) when ScrollTrigger.refresh() was triggered aside from a "matchMedia" event. See https://greensock.com/forums/topic/25944-problem-with-scrolltriggersavestyles-and-scrolltriggermatchmedia

- FIXED: a timeline's iteration() could return an incorrect value if called from inside its own onRepeat callback. See https://greensock.com/forums/topic/27643-timeline-repeat-iteration-vs-standalone-tween-repeat-iteration/

- FIXED: a ScrambleTextPlugin from() tween could seem to have a gap at the beginning caused by an internal ease.

- FIXED: if you have a stagger applied to a ScrollTrigger animation that's a .fromTo() or .from(), it may not render it in the initial state before reaching the start scroll position (regression in 3.6.0). See https://greensock.com/forums/topic/27664-gsap-3-timeline-stagger-with-immediaterender-not-working/

- FIXED: if you didn't define an "animation" for GSDevTools (meaning it uses the globalTimeline), and then select another animation in the drop-down UI that has a delay, it wouldn't isolate that animation properly. See https://greensock.com/forums/topic/27690-question-about-dynamic-tweens-and-gsdevtools/

- FIXED: if you put a non-scrubbing scrollTrigger on a tween that has a delay and a stagger, it could skip the delay. See https://greensock.com/forums/topic/25610-problem-delay-property-not-working-with-srolltrigger/

- FIXED: if you tried using a modifier for a CSS variable, it didn't work. See https://greensock.com/forums/topic/27793-modifiers-with-vars/

- FIXED: the "restart" toggleAction of ScrollTrigger now factors in any delay value that was specified in the tween/timeline.

- FIXED: if you called ScrollTrigger.update() from inside an onUpdate callback on an immediately-rendering tween that has a ScrollTrigger, it could throw an error.

- FIXED: if a MotionPathHelper's tween had a target that started at non-zero x/y values, those offsets weren't factored in (so the editable path wouldn't match up with where it should be).

- FIXED: a regression in 3.6.1 could cause repeatRefresh on a timeline not to work properly in one particular case. See https://greensock.com/forums/topic/28031-gsap-361-timeline-issue/

- FIXED: if you use a snap duration on a ScrollTrigger that's shorter than the scrub duration, it could lead to odd results. See https://greensock.com/forums/topic/28112-using-scrolltrigger-w-fixed-position-sections/

- FIXED: in extreme cases, inertia in snapping could cause ScrollTrigger to scroll past the maximum or minimum, consequently restarting the snap. Overall, cleaned up several aspects of snapping in ScrollTrigger.

- FIXED: if you don't specify an animation for GSDevTools, it could fire callbacks of the animations when the page loads initially (and then again at the proper times). See https://greensock.com/forums/topic/19465-timelines-oncomplete-callback-fired-twice-when-gsdevtools-added/?tab=comments#comment-137962

- FIXED: if you create ScrollTriggers in a .matchMedia() and then resize to where all ScrollTriggers are removed, and then go back to a size where it creates the ScrollTriggers again, it could return to the scroll position from that initial state (before all ScrollTriggers were removed). See https://greensock.com/forums/topic/28114-scrolltrigger-does-not-revert-elements-to-their-original-values-on-resize/?tab=comments#comment-138731

- FIXED: onComplete didn't fire in a zero-duration timeline. See #448

- FIXED: when you set markers: true on a ScrollTrigger that uses a scroller with position: fixed, it won't change it to position: relative. See #452

- FIXED: if you gsap.getProperty(svgElement, "transformOrigin"), it would always return 0px 0px 0px for SVG elements.

- FIXED: if you cause the tween to render at a different time from INSIDE its onStart callback, it would still render at the original time.

- FIXED: if ScrollTrigger.update() was called from within a refresh handler, it could result in skipping the refresh() on some of the ScrollTriggers under certain conditions.

- FIXED: if you tried to render a .from() or .fromTo() tween at a negative time value (like rewinding it past the start), it may render the initial values rather than reverting.

- FIXED: if you try to set() an empty string value (""), it could be interpreted as "0". And if you use "=" as the second character in a string, it may not work correctly because it's interpreted as a relative value prefix, like "+=" or "-=". See https://greensock.com/forums/topic/28257-set-empty-strings/

- FIXED: if you animate to an invalid scale, like NaN, it wouldn't default to 0 and the transforms wouldn't render properly (because of that invalid value). See #453

- FIXED: if you timeline.tweenFromTo() an immediately alter its progress(), it may not render at the appropriate time.

- FIXED: if you use Draggable for a position: fixed element that has movement limited to one direction, on Android it may not drag properly. See https://greensock.com/forums/topic/28357-draggable-android-issue-with-position-fixed/

- FIXED: timeline.recent() may return the incorrect child immediately after a .fromTo()
  • Loading branch information
jackdoyle committed Jun 16, 2021
1 parent 40bd026 commit 41bb349
Show file tree
Hide file tree
Showing 73 changed files with 1,992 additions and 1,225 deletions.
10 changes: 5 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

#### Professional-grade animation for the modern web

GSAP is a robust JavaScript toolset that turns developers into animation superheroes. Build high-performance animations that work in **every** major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths, generic objects...anything JavaScript can touch! GSAP's <a href="https://greensock.com/scrolltrigger">ScrollTrigger</a> plugin lets you create jaw-dropping scroll-based animations with minimal code. No other library delivers such advanced sequencing, reliability, and tight control while solving real-world problems on millions of sites. GSAP works around countless browser inconsistencies; your animations **just work**. At its core, GSAP is a high-speed property manipulator, updating values over time with extreme accuracy. It's up to 20x faster than jQuery! See https://greensock.com/why-gsap/ for what makes GSAP so special.
GSAP is a robust JavaScript toolset that turns developers into animation superheroes. Build high-performance animations that work in **every** major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths, generic objects...anything JavaScript can touch! GSAP's <a href="https://greensock.com/scrolltrigger">ScrollTrigger</a> plugin lets you create jaw-dropping scroll-based animations with minimal code. No other library delivers such advanced sequencing, reliability, and tight control while solving real-world problems on over 10 million sites. GSAP works around countless browser inconsistencies; your animations **just work**. At its core, GSAP is a high-speed property manipulator, updating values over time with extreme accuracy. It's up to 20x faster than jQuery! See https://greensock.com/why-gsap/ for what makes GSAP so special.

### What is GSAP? (video)

Expand All @@ -11,14 +11,14 @@ GSAP is a robust JavaScript toolset that turns developers into animation superhe

GSAP is completely flexible; sprinkle it wherever you want. **Zero dependencies.**

There are many optional <a href="https://greensock.com/gsap-plugins/">plugins</a> and <a href="https://greensock.com/ease-visualizer/">easing</a> functions for achieving advanced effects easily like <a href="https://greensock.com/morphsvg">morphing</a>, <a href="https://greensock.com/docs/v3/Plugins/ScrollTrigger">scrolling</a>, or animating along a <a href="https://greensock.com/docs/v3/Plugins/MotionPathPlugin">motion path</a>.
There are many optional <a href="https://greensock.com/gsap-plugins/">plugins</a> and <a href="https://greensock.com/ease-visualizer/">easing</a> functions for achieving advanced effects easily like <a href="https://greensock.com/docs/v3/Plugins/ScrollTrigger">scrolling</a>, <a href="https://greensock.com/morphsvg">morphing</a>, or animating along a <a href="https://greensock.com/docs/v3/Plugins/MotionPathPlugin">motion path</a>.

## Docs &amp; Installation
View the <a href="https://greensock.com/docs">full documentation here</a>, including an <a href="https://greensock.com/install">installation guide</a> with videos.

### CDN
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js"></script>
```
Click the green "Get GSAP Now" button at <a href="https://greensock.com/?download=GSAP-JS">greensock.com</a> for more options and installation instructions, including CDN URLs for various plugins.

Expand All @@ -36,8 +36,8 @@ The default (main) file is **gsap.js** which includes most of the eases as well
import gsap from "gsap";

// or get other plugins:
import Draggable from "gsap/Draggable";
import ScrollTrigger from "gsap/ScrollTrigger";
import Draggable from "gsap/Draggable";

// or all tools are exported from the "all" file (excluding bonus plugins):
import { gsap, ScrollTrigger, Draggable, MotionPathPlugin } from "gsap/all";
Expand All @@ -47,7 +47,7 @@ gsap.registerPlugin(ScrollTrigger, Draggable, MotionPathPlugin);
```
The NPM files are ES modules, but there's also a /dist/ directory with <a href="https://www.davidbcalhoun.com/2014/what-is-amd-commonjs-and-umd/">UMD</a> files for extra compatibility.

Download <a href="https://greensock.com/club/">Club GreenSock</a> members-only plugins from your GreenSock.com account and then include them in your own JS payload. There's even a <a href="https://www.youtube.com/watch?v=znVi89_gazE">tarball file you can install with NPM/Yarn</a>. Post questions in our <a href="https://greensock.com/forums/">forums</a> and we'd be happy to help.
Download <a href="https://greensock.com/club/">Club GreenSock</a> members-only plugins from your GreenSock.com account and then include them in your own JS payload. There's even a <a href="https://www.youtube.com/watch?v=znVi89_gazE">tarball file you can install with NPM/Yarn</a>. GreenSock has a <a href="https://greensock.com/docs/v3/Installation#private">private NPM registry</a> for members too. Post questions in our <a href="https://greensock.com/forums/">forums</a> and we'd be happy to help.


### Getting Started (includes video)
Expand Down
4 changes: 2 additions & 2 deletions dist/CSSRulePlugin.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
}(this, (function (exports) { 'use strict';

/*!
* CSSRulePlugin 3.6.1
* CSSRulePlugin 3.7.0
* https://greensock.com
*
* @license Copyright 2008-2021, GreenSock. All rights reserved.
Expand Down Expand Up @@ -51,7 +51,7 @@
};

var CSSRulePlugin = {
version: "3.6.1",
version: "3.7.0",
name: "cssRule",
init: function init(target, value, tween, index, targets) {
if (!_checkRegister() || typeof target.cssText === "undefined") {
Expand Down
4 changes: 2 additions & 2 deletions dist/CSSRulePlugin.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/CSSRulePlugin.min.js.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 41bb349

Please sign in to comment.