Skip to content

Commit

Permalink
3.3.0
Browse files Browse the repository at this point in the history
- NEW: ScrollTrigger plugin that empowers you to create jaw-dropping scroll-based animations with minimal code. You can define a scrollTrigger directly in any GSAP animation (Tween or Timeline). See https://greensock.com/scrolltrigger

- IMPROVED: if you set a yoyoEase on a timeline (or a tween with a stagger), it will propagate down through its children accordingly on yoyo.

- IMPROVED: you can now use an alias (like "rotate" instead of "rotation") in a gsap.quickSetter().

- IMPROVED: lots of TypeScript definition additions.

- IMPROVED: you can now pass an Array as the motionPath with properties other than the recognised x/y ones (x, translateX, left, marginLeft, y, translateY, top, marginTop). There's also a helper function available to reproduce the type: "soft" from the old BezierPlugin here: https://greensock.com/forums/topic/24052-how-to-do-soft-bezier-with-motionpath/

- IMPROVED: if you have MotionPathPlugin plot a smooth path through points that you provide and the starting and ending points are basically on top of each other, it'll essentially "close" the path, making the curvature smooth at that point (where the start and end meet).

- IMPROVED [possible breaking change, though very unlikely]: onReverseComplete gets called when the playhead returns to 0 after having been elsewhere even if the animation instance isn't technically in "reversed" mode. This is much more handy because previously it was very cumbersome to try to discern when a child animation (in a timeline) has its playhead hits the start when the parent's playhead is going backwards. If you need to only call the function when in reverse, you can simply add conditional logic in the callback, like if (this.reversed()) {...}.

- FIXED: issue with the "sine" ease could cause the final value to be 0.999999999999 instead of 1, thus "tweens" of the "display" property (that should just toggle at the very end) wouldn't toggle properly.

- FIXED: PixiPlugin now works around the fact that PixiJS returns a string hexidecimal formatted like "0xFF52CC" instead of "#FF52CC" or numeric 0xFF52CC for things like fillColor. See https://greensock.com/forums/topic/23574-gsap-v3-pixijs-v5-pixiplugin-w-stagger-issue-with-graphics-fill/

- FIXED: if you define a "resolution" in your pixi:{} object for PixiPlugin, it doesn't throw a warning about "resolution" not being a valid property.

- FIXED: if you called invalidate() on a from() or fromTo() tween whose playhead is at 0 and then tried rendering at exactly 0, the starting values wouldn't be rendered properly.

- FIXED: if you clear() a timeline that's paused, it would remember the playhead position from before it was cleared so that when it resumes, it starts from that place. See https://greensock.com/forums/topic/23681-timelineinvalidate-doesnt-seem-to/

- FIXED: killTweensOf() failed to completely remove a tween from its parent timeline if that tween had a stagger applied (basically if it had an internal timeline). See https://greensock.com/forums/topic/23729-how-to-createinterrupt-a-repeating-idle-animation/?tab=comments#comment-112523

- FIXED: when a transform-related value is animated and the target didn't have an offsetParent, it could get temporarily appended to the documentElement (and immediately swapped back) for accurate measurement on the first render even when it wasn't necessary. This wouldn't cause any visual problems, but it could cause a MutationObserver to fire. See #375

- FIXED: if you set a tween's duration to a string of exactly "0", it wouldn't render the end values.

- FIXED: if you set the timeScale of an infinitely-repeating animation to a small negative number, it could cause odd behavior.

- FIXED: a zero-duration tween (or callback) that's positioned at the very start of a yoyo-ing timeline may not get called on each yoyo cycle. See #7 (comment)

- FIXED:an addPause() at the very beginning of a repeating timeline may intermittently cause rendering problems in that timeline if the timing conditions were just right. See https://greensock.com/forums/topic/23823-closing-nav-animation-not-working-on-ie-and-iphone-6-maybe-other-older-browser/?tab=comments#comment-113005

- FIXED: if a .from() tween had css-related values wrapped in a css:{} object, the initial state wasn't rendered properly with those values (of course it's typically wasteful to wrap them anyway). See https://greensock.com/forums/topic/24008-inital-states-problem/

- FIXED: if you declare a function-based end value in InertiaPlugin, that function would get called twice. See https://greensock.com/forums/topic/23986-inertia-plugin-end-prop-double-firing/

- FIXED: if you set a Draggable to only allow one direction, like type: "x" or type: "y" but you drag on the opposite axis initially, it could ignore that drag (thinking it was locked on the other axis initially, thus ignoring the movement).

- FIXED: overwrite: "auto" didn't properly kill overlapping AttrPlugin values

- FIXED: setting box-sizing: border-box on a Draggable target could cause its bounds not to include the border correctly.

- FIXED: Draggable wasn't completely preventing the context menu on long-press on Android devices

- FIXED: on some touch devices, Draggable wasn't preventing scroll and the touch event would get cancelled prematurely.

- FIXED: some of the coordinate conversion (and alignment) functionality in MotionPathPlugin didn't work properly if both elements were SVG and had different ownerSVGElements. See https://greensock.com/forums/topic/23592-align-one-svg-to-a-child-element-of-another-svg/

- FIXED: in some cases (due to a rounding issue internally), a set() call may not have immediateRender: true (it'd wait one tick)

- FIXED: in some very rare cases, a tween's repeatRefresh would use the starting values rather than the ending values after invalidating/refreshing.

- FIXED: if a <rect> has an rx attribute defined but not an ry, browsers use the same value as rx but MorphSVGPlugin.convertToPath() didn't accommodate that.

- FIXED: if motionPath tween with an align defined was aligning an element that had an ancestor element with a scale of 0, it wouldn't align properly.
  • Loading branch information
jackdoyle committed May 31, 2020
1 parent bbb2fce commit 5159975
Show file tree
Hide file tree
Showing 84 changed files with 6,917 additions and 1,152 deletions.
18 changes: 13 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@ GSAP is a JavaScript library for building high-performance animations that work

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/ScrollToPlugin">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/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>.

## 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.2.6/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.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 @@ -37,13 +37,13 @@ import gsap from "gsap";

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

// or all tools are exported from the "all" file (excluding bonus plugins):
import { gsap, ScrollToPlugin, Draggable, MotionPathPlugin } from "gsap/all";
import { gsap, ScrollTrigger, Draggable, MotionPathPlugin } from "gsap/all";

// don't forget to register plugins
gsap.registerPlugin(ScrollToPlugin, Draggable, MotionPathPlugin);
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.

Expand All @@ -54,11 +54,19 @@ Download <a href="https://greensock.com/club/">Club GreenSock</a> members-only p

[![Getting Started with GSAP](http://greensock.com/_img/github/thumb-getting-started-small.gif)](http://greensock.com/get-started)

### ScrollTrigger

If you're looking to do scroll-driven animations, GSAP's <a href="https://greensock.com/scrolltrigger">ScrollTrigger</a> plugin is a great option.

[![ScrollTrigger](http://greensock.com/_img/github/thumb-scrolltrigger-small.gif)](http://greensock.com/scrolltrigger)


### Resources

* <a href="https://greensock.com/">GSAP home page</a>
* <a href="https://greensock.com/get-started/">Getting started guide</a>
* <a href="https://greensock.com/docs/">Docs</a>
* <a href="https://greensock.com/cheatsheet">Cheat sheet</a>
* <a href="https://greensock.com/forums/">Forums</a>
* <a href="https://greensock.com/showcase">Showcase</a>
* <a href="https://greensock.com/why-gsap/">Why GSAP?</a> (convince your boss)
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.2.6
* CSSRulePlugin 3.3.0
* https://greensock.com
*
* @license Copyright 2008-2020, GreenSock. All rights reserved.
Expand Down Expand Up @@ -51,7 +51,7 @@
};

var CSSRulePlugin = {
version: "3.2.6",
version: "3.3.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 5159975

Please sign in to comment.