Skip to content
GreenSock's GSAP JavaScript animation library (including Draggable).
JavaScript
Branch: master
Clone or download
jackdoyle 3.0.2
- IMPROVED: due to popular request, Draggable now recognizes type: "scroll" | "scrollTop" | "scrollLeft" like it did in the v2.x versions.

- IMPROVED: ModifiersPlugin (in the core) accommodates some plugin values, like AttrPlugin, so that you can do gsap.to("circle", {attr:{cx:"+=1"}, modifiers:{cx: value => mouse.x}})

- IMPROVED: Draggable instantiation is up to 5x faster (better able to avoid layout thrashing when many instances are created at once)

- IMPROVED: handling of null/undefined values in arrays passed as the target of tweens, like gsap.to([element, undefined], ...) (it no longer errors; it just ignores undefined/null elements)

- IMPROVED: added static getPositionOnPath() and cacheRawPathMeasurements() methods to MotionPathPlugin.

- IMPROVED: then() Promise will be resolved onReverseComplete now too (in addition to onComplete).

- IMPROVED: GSDevTools allows a linked animation to be reversed manually (via code)

- IMPROVED: if a DOM element's property isn't found, CSSPlugin will attempt to apply a prefix.

- IMPROVED: CSSPlugin better handles tweening to a complex value (like "blur(10px)") when the initial value doesn't have matching values (like "none" or "").

- IMPROVED: if a tween is created after the main rendering loop on a particular tick, it won't lazy-render (so that things are rendered on the same tick rather than waiting for the next tick which could result in a very brief delay).

- IMPROVED: added conditional logic to the UMD files so that Object.defineProperty(exports, '__esModule', { value: true }); doesn't get executed in the browser (if there is a window defined) which helps avoid conflicts like the one described here (with mediaelement.js): https://greensock.com/forums/topic/22009-gsap3-vs-wordpress-53-mediaelementjs-conflict/

- IMPROVED: Draggable works better in environments where Draggable is loaded into a different document than the element it's controlling.

- IMPROVED: MotionPathHelper works better now in codepen where in editor mode sometimes codepen would intercept keyboard events so that hitting the DELETE key, for example, wouldn't delete the selected anchor point. Dragging the points no longer triggers scrolling on iOS devices.

- FIXED: .then() now works around an issue that could cause a loop of Promises in a certain scenario - see #322

- FIXED: auto overwriting may not occur correctly when two animations of the same target begin on the same tick with a stagger applied

- FIXED isActive() could return false if the virtual playhead was directly on top of the start time and it hadn't rendered once yet.

- FIXED: The callback methods no longer pass the animation instance as a default parameter when no callback parameters are defined (that behavior was new in v3 and undocumented anyway)

- FIXED: endArray wasn't working correctly. GSAP can now animate numeric arrays directly. See https://greensock.com/forums/topic/21929-gsap3-crash/

- FIXED: a condition in MotionPathPlugin could cause a super long loop if you use SVG path data that has duplicate points in it (that's a bad idea anyway, but now MotionPathPlugin will sense it and work around it).

- FIXED: a numeric property may turn into a string (just a different type, but the value would be accurate) when animating to a relative value.

- FIXED: when animating to display: none, it will only be set at the end of the tween whereas other display values will be rendered at the start of the tween (for a more intuitive experience)

- FIXED: when animating to a very large number, it could flip to a negative number due to some bitwise limitations

- FIXED: if you create a timeline and only put set() calls (basically if it has zero duration), it wouldn't render automatically.

- FIXED: in a repeated animation, if you set the time() to something during the final repeat phase, it could position the playhead incorrectly.

- FIXED: a repeating from() tween with a delay may not render its initial values properly (this includes staggers).

- FIXED: if you set the transformOrigin on an SVG element that ALSO has it set in CSS somewhere, the CSS value could contaminate what gets rendered because in order to work around browser bugs and inconsistencies, GSAP bakes the origin values directly into the matrix() that it applies to the transform attribute.

- FIXED: the starting value could be parsed incorrectly on a DOM element that has a calc() value applied inline. See #330 (comment)

- FIXED: clearProps:"all" on a from() tween may not work properly. See https://greensock.com/forums/topic/21938-vue-jump-bug-with-gsap-v3/

- FIXED: a from() or fromTo() tween may not render its initial values correctly in a very rare edge case.

- FIXED: an animation that was paused at a non-zero time, then the playhead was moved to exactly zero, it could resume from the original pause time instead of the new playhead position that was set after the pause.

- FIXED: a zero-duration animation in a timeline could be skipped. See #332

- FIXED: if a transformOrigin value was provided with keywords in the wrong position, like "top left" instead of "left top", it could cause an error.

- FIXED: the playhead and in/out points may not be draggable in GSDevTools if you loaded it BEFORE the <body> tag in the HTML.

- FIXED: an SVG's transformOrigin could be miscalculated in a very rare circumstance.

- FIXED: a "scale" tween of a DOM element could ignore the starting scaleY if it's different than scaleX initially.

- FIXED: setting the progress() of an animation while in its yoyo phase incorrectly set the playhead as if it did not yoyo.

- FIXED: if the target of a tween was an object that was an element and also array-like (had indexed values, a length property, etc.) like a <form>, it could use the wrong target(s) for the "from" part of a fromTo() or from() tween. See https://greensock.com/forums/topic/22049-unable-to-set-starting-properties-on-an-html-form/

- FIXED: if you applied type:"rotation" Draggable to an element with position: fixed and then dragged after scrolling, it could mis-plot the rotational origin. See https://greensock.com/forums/topic/19771-misbehavior-of-draggable-knob-while-in-fixed-positioned-context/

- FIXED: if paused:true was set on a tween with a stagger, it would result in the child tweens all being paused, so when you unpause the parent tween it didn't actually unpause those children. See https://greensock.com/forums/topic/22105-stagger-pause-error/

- FIXED: if an onAutoKill was defined in a ScrollToPlugin tween, it would be called immediately (because it was interpreted as a function-based value).

- FIXED: if a zero-duration tween (or set()) was at the very start of a timeline and then that timeline's playhead was returned to 0 to play again after having already played, it would not render that zero-duration (or set()).

- FIXED: if MotionPathHelper was used on a path that was inside a <g> element that had transforms applied, they didn't affect the selection.

- FIXED: in a Draggable that had bounds applied as an element (like bounds:"#container"), borders weren't factored into the measurements.

- FIXED: if you used an element that wasn't attached to the DOM (like a proxy) as the target of a Draggable, it could throw errors. See https://greensock.com/forums/topic/22134-draggable-cannot-read-property-parentnode-of-null/

- FIXED: if a Draggable was set to control an SVG element and its "bounds" were set to its ownerSVGElement which had no viewBox defined, the bounds wouldn't work properly.

- FIXED: if you set a Draggable's snap to an array and also set its bounds to an element and you grab it mid-tween, in some cases it could have partial-pixel rounding that might affect which value it snaps to in the array. See https://greensock.com/forums/topic/22117-gsap-drag-snap-first-item-issues/
Latest commit e0cae12 Dec 5, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist 3.0.2 Dec 5, 2019
esm 3.0.2 Dec 5, 2019
src 3.0.2 Dec 5, 2019
types 3.0.2 Dec 5, 2019
.gitignore Initial full commit Sep 22, 2012
README.md 3.0.2 Dec 5, 2019
package.json 3.0.2 Dec 5, 2019

README.md

GSAP (GreenSock Animation Platform)

Professional-grade animation for the modern web

GSAP is a JavaScript library for building 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! 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 the "Why GSAP?" article for what makes GSAP so special.

What is GSAP? (video)

What is GSAP?

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

There are many optional plugins and easing functions for achieving advanced effects easily like morphing, scrolling, or animating along a motion path.

Docs

View the full documentation here, including an installation guide.

CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.2/gsap.min.js"></script>

Click the green "Get GSAP Now" button at greensock.com for more options and installation instructions, including CDN URLs for various plugins.

Every major ad network excludes GSAP from file size calculations and most have it on their own CDNs as well, so contact them for the appropriate URL(s).

NPM

See the guide to using GSAP via NPM here.

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 utility methods like interpolate(), mapRange(), etc.

// typical import
import gsap from "gsap";

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

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

// don't forget to register plugins
gsap.registerPlugin(ScrollToPlugin, Draggable, MotionPathPlugin); 

The NPM files are ES modules, but there's also a /dist/ directory with UMD files for extra compatibility.

Download Club GreenSock-only plugins from your GreenSock.com account and then treat them as part of your own JS payload. Post other questions in our forums and we'd be happy to help.

Getting Started (includes video)

Getting Started with GSAP

Resources

Get CustomEase for free

Sign up for a free GreenSock account to gain access to CustomEase which lets you create literally any ease imaginable (unlimited control points). It's in the download zip at GreenSock.com (when you're logged in).

What is Club GreenSock? (video)

What is Club GreenSock?

Sign up anytime.

Advanced playback controls & debugging

GSDevTools adds a visual UI for controlling your GSAP animations which can significantly boost your workflow and productivity. (Club GreenSock membership required, not included in this repository).

Try all bonus plugins for free on Codepen

https://codepen.io/GreenSock/full/OPqpRJ

Need help?

GreenSock forums are an excellent resource for learning and getting your questions answered. Report any bugs there too please (it's also okay to file an issue on Github if you prefer).

License

GreenSock's standard "no charge" license can be viewed at http://greensock.com/standard-license. Club GreenSock members are granted additional rights. See http://greensock.com/licensing/ for details. Why doesn't GreenSock use an MIT (or similar) open source license, and why is that a good thing? This article explains it all: http://greensock.com/why-license/

Copyright (c) 2008-2019, GreenSock. All rights reserved.

You can’t perform that action at this time.