Skip to content

Commit

Permalink
3.9.0
Browse files Browse the repository at this point in the history
- NEW: Flip Plugin and CustomEase are now in the public downloads! They're no longer available only to Club GreenSock members. Merry Christmas! Please be sure to get the proper "Business Green" commercial license if you're collecting a fee from multiple users. See https://greensock.com/licensing for details.

- NEW: percent-based keyframe syntax, like keyframes: { "0%": {...}, "50%": {...}, "100%": {...} } that acts very similar to CSS keyframes

- NEW: Array-based keyframes syntax that lets you animate through various values in sequence, like keyframes: { x: [0, 100, 80, 95, 90], y: [100, 0, 10, 5] }

- NEW: Entirely new Flip.batch() functionality for advanced FLIP animations that need to synchronize their steps like getState(), setState(), animate(), etc.

- NEW: Flip.killFlipsOf(targets, complete) lets you feed in targets and it'll kill any Flip plugin-based animations of those targets.

- NEW: FlipState objects have new methods like .add(otherState) for merging in new data, .compare(otherState) to determine which elements are changed/unchanged/entering/leaving, and clear()

- NEW: Flip's "absolute" value was previously boolean, but now you can also pass in an Array of targets or selector text to specify a subset of the flipping elements that should get set to position: absolute.

- NEW: Flip recognizes a new absoluteOnLeave: true property that'll result in just the elements that are fed to onLeave() to be set to position: absolute which simplifies exit animations.

- NEW: ScrollTrigger instances have a .labelToScroll() method that converts a label in a timeline into the associated scroll position so that you could, for example, perform a scrollTo tween to that spot or jump there. See https://greensock.com/forums/topic/29670-scroll-to-label-with-scrolltrigger/?tab=comments#comment-149550

- IMPROVED: if you do a Flip animation with nested: true and a toggleClass, it will apply that class during the calculations so that it'll accommodate certain layout changes made by the application of that class.

- IMPROVED: Flip will overrule max-width/max-height/min-width/min-height values during non-scale Flip animations.

- IMPROVED: if you define a toggleClass on a Flip.from() animation, it'll be applied to all the targets (even if they're in the onLeave/onEnter elements)

- IMPROVED: if you set gsap.config({nullTargetWarn: false}) it will also affect ScrollTrigger triggers/pins

- FIXED: ScrollTriggers that have a containerAnimation value didn't update for the first time until the containerAnimation updated, so in some scenarios it could cause a jump (if the trigger elements were already on-screen horizontally, but out of view vertically)

- FIXED: MotionPaths that have an "end" that exceeds 1 weren't calculating it properly (regression in 3.6.0). See https://greensock.com/forums/topic/29643-motionpath-doesnt-end-at-desired-value/

- FIXED: if a ScrollTrigger has a pinnedContainer and the page is refreshed after being scrolled down past the point of pinning, the start/end calculations for that ScrollTrigger could drift.

- FIXED: if you use end: "max" on a ScrollTrigger and a subsequent instance pushed the maximum scrollable area larger due to pinning, it's now corrected (pushed further down accordingly).

- FIXED: gsap.utils.distribute() may slightly miscalculate the return value if you use from: "start" | "end" | "center" (the range used was about 0.5 off).

- FIXED: calling .kill() on the same ScrollTrigger (or its timeline) more than once could inadvertently remove a different ScrollTrigger from the internal list of ScrollTriggers. See https://greensock.com/forums/topic/29973-scrolltrigger-erroneously-killed-when-killing-an-unrelated-timeline-scrolltrigger/

- FIXED: sometimes A ScrollTrigger animation's progress in the snapping onComplete didn't quite reflect the scroll position because some browsers lag in dispatching the "scroll" event. See https://greensock.com/forums/topic/30004-scrolltrigger-labels-onsnapcomplete/

- FIXED: if you pin an element that has a flex-basis that's not auto or a negative "order", it may not pin correctly. See https://greensock.com/forums/topic/30060-pinning-and-flexbox/

- FIXED: if you attempt to rewind an animation to a point BEFORE 0 (its start) and it hadn't rendered once yet, it may skip the render.

- FIXED: Draggable's bounds might be 1px off in some rare cases when using an element for the bounds. See https://greensock.com/forums/topic/30161-bounds-changed-after-being-zoomed-inout-scale/

- FIXED: a tween's duration may not get updated correctly in a very rare situation: immediateRender is set to true on a .to() that's in a timeline, and the tween has its duration CHANGED by a plugin/instantiation.

- FIXED: if you set a transformPerspective value in the "from" part of a .fromTo() without any unit (like "px"), it could cause the transforms not to be set correctly.

- FIXED: regression in GSDevTools 3.8.0 could cause it not to work properly or show the ids in the drop-down list. See https://greensock.com/forums/topic/28706-gsdevtools-animation-ids-not-working/

- FIXED: if you apply a TextPlugin animation in a .from() with BOTH an "oldClass" and "newClass" defined, it wouldn't work properly. See https://greensock.com/forums/topic/30337-textplugin-issue-with-from-and-oldclass/

- FIXED: if you use an ampersand right next to text in a TextPlugin tween, the browser could render it incorrectly. See https://greensock.com/forums/topic/30380-textplugin-issue-with-ampersand/

- FIXED: in some rare edge cases, Flip might miscalculate the positioning of nested elements (when their width/height didn't change, but they're inside transformed elements that did in fact change their visible width/height)

- FIXED: worked around an edge case where Flip resizing/repositioning might temporarily introduce a scrollbar that throws off the position calculations due to the scrollbar (which is never seen).
  • Loading branch information
jackdoyle committed Dec 16, 2021
1 parent c217bf7 commit 70689c2
Show file tree
Hide file tree
Showing 75 changed files with 6,498 additions and 399 deletions.
26 changes: 15 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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/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>.
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>, animating along a <a href="https://greensock.com/docs/v3/Plugins/MotionPathPlugin">motion path</a> or <a href="https://greensock.com/docs/v3/Plugins/Flip">FLIP</a> animations.

## 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.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.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 @@ -30,20 +30,21 @@ See the <a href="https://greensock.com/docs/v3/Installation#npm">guide to using
```javascript
npm install gsap
```
The default (main) file is **gsap.js** which includes most of the eases as well as the core plugins like CSSPlugin, AttrPlugin, SnapPlugin, ModifiersPlugin, and all of the <a href="https://greensock.com/docs/v3/GSAP/UtilityMethods">utility methods</a> like interpolate(), mapRange(), etc.
The default (main) file is **gsap.js** which includes most of the eases as well as the core plugins like CSSPlugin, AttrPlugin, SnapPlugin, ModifiersPlugin, and all of the <a href="https://greensock.com/docs/v3/GSAP/UtilityMethods">utility methods</a> like <a href="https://greensock.com/docs/v3/GSAP/UtilityMethods/interpolate()">interpolate()</a>, <a href="https://greensock.com/docs/v3/GSAP/UtilityMethods/mapRange()">mapRange()</a>, etc.
```javascript
// typical import
import gsap from "gsap";

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

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

// don't forget to register plugins
gsap.registerPlugin(ScrollTrigger, Draggable, MotionPathPlugin);
gsap.registerPlugin(ScrollTrigger, Draggable, Flip, 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 @@ -68,27 +69,30 @@ If you're looking to do scroll-driven animations, GSAP's <a href="https://greens
* <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/ease-visualizer/">Ease Visualizer</a>
* <a href="https://greensock.com/showcase">Showcase</a>
* <a href="https://greensock.com/why-gsap/">Why GSAP?</a> (convince your boss)
* <a href="https://greensock.com/stagger">Staggering animations in GSAP 3</a>
* <a href="https://greensock.com/draggable/">Draggable</a>
* <a href="https://greensock.com/club/">Club GreenSock</a> (get access to bonus plugins not in this repository)

### Get CustomEase for free
Sign up for a free GreenSock account to gain access to <a href="https://greensock.com/customease/">CustomEase</a> which lets you create literally any ease imaginable (unlimited control points). It's in the <a href="https://greensock.com/install">download zip at GreenSock.com</a> (when you're logged in).

### What is Club GreenSock? (video)

[![What is Club GreenSock?](http://greensock.com/_img/github/thumb-what-is-club-greensock-small.jpg)](http://www.youtube.com/watch?v=Ome_KnloOhs)

There are 3 main reasons anyone signs up for <a href="https://greensock.com/club">Club GreenSock</a>:
* To get access to the incredibly helpful <a href="https://greensock.com/club">members-only plugins</a> like MorphSVGPlugin, SplitText, etc.
* To get the special <a href="https://greensock.com/licensing/">commercial license</a> ("Business Green" - only necessary if multiple customers are being charged for something that uses GreenSock technology).
* To support ongoing development efforts and **cheer us on**.

<a href="https://greensock.com/club/">Sign up</a> anytime.

### Advanced playback controls &amp; debugging

<a href="https://greensock.com/gsdevtools/">GSDevTools</a> adds a visual UI for controlling your GSAP animations which can significantly boost your workflow and productivity. (<a href="https://greensock.com/club">Club GreenSock</a> membership required, not included in this repository).

### Try all bonus plugins for free on Codepen
<a href="https://codepen.io/GreenSock/full/OPqpRJ">https://codepen.io/GreenSock/full/OPqpRJ</a>
### Try all bonus plugins for free!
<a href="https://greensock.com/try-plugins">https://greensock.com/try-plugins</a>

### Need help?
<a href="https://greensock.com/forums/">GreenSock forums</a> are an excellent resource for learning and getting your questions answered. Report any bugs there too please (it's also okay to <a href="https://github.com/greensock/GSAP/issues">file an issue on Github</a> if you prefer).
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.8.0
* CSSRulePlugin 3.9.0
* https://greensock.com
*
* @license Copyright 2008-2021, GreenSock. All rights reserved.
Expand Down Expand Up @@ -51,7 +51,7 @@
};

var CSSRulePlugin = {
version: "3.8.0",
version: "3.9.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.

Loading

0 comments on commit 70689c2

Please sign in to comment.