GSAP is a robust JavaScript toolset that turns developers into animation superheroes

Related tags

Miscellaneous GSAP
Overview

GSAP (GreenSock Animation Platform)

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 ScrollTrigger plugin lets you create jaw-dropping scroll-based animations with minimal code. gsap.matchMedia() makes building responsive, accessibility-friendly animations a breeze.

No other library delivers such advanced sequencing, reliability, and tight control while solving real-world problems on over 11 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)

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 scrolling, morphing, animating along a motion path or FLIP animations. There's even a handy Observer for normalizing event detection across browsers/devices.

Docs & Installation

View the full documentation here, including an installation guide with videos.

CDN

">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/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, 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";

// 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 members-only plugins):
import { gsap, ScrollTrigger, Draggable, MotionPathPlugin } from "gsap/all";

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

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

Download Club GreenSock members-only plugins from your GreenSock.com account and then include them in your own JS payload. There's even a tarball file you can install with NPM/Yarn. GreenSock has a private NPM registry for members too. Post questions in our forums and we'd be happy to help.

Getting Started (includes video)

Getting Started with GSAP

ScrollTrigger & ScrollSmoother

If you're looking to do scroll-driven animations, GSAP's ScrollTrigger plugin is the new standard. There's a companion ScrollSmoother as well.

ScrollTrigger

Resources

What is Club GreenSock? (video)

What is Club GreenSock?

There are 3 main reasons anyone signs up for Club GreenSock:

  • To get access to the incredibly helpful members-only plugins like MorphSVGPlugin, SplitText, ScrollSmoother, etc.
  • To get the special commercial license ("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.

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!

https://greensock.com/try-plugins

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-2022, GreenSock. All rights reserved.

Comments
  • Wish: Require/Import in NodeJS way.

    Wish: Require/Import in NodeJS way.

    Hi guys,

    I import it in NodeJS way and use webpack (instead of bower, cause webpack is more powerful) to compile. It will show error like following.

    error given was: ReferenceError: document is not defined
      at Function.<anonymous> (/.../node_modules/gsap/src/minified/TweenMax.min.js:15:5081)
      at [object Object].check (/.../node_modules/gsap/src/minified/TweenLite.min.js:12:817)
      at new p (/.../node_modules/gsap/src/minified/TweenLite.min.js:12:1104)
      at t._gsDefine (/.../node_modules/gsap/src/minified/TweenLite.min.js:12:1154)
    

    I've read the article thread talking about this.

    The current workaround for me is tell webpack (by adding rules in its configuration file) where to find the TweenMax, TimelineMax, and so, instead of requiring gsap cause it doesn't work for this moment.

    e.g. webpack.config.js

      resolve: {
        alias: {
          'TweenLite': path.resolve(MODULE_DIR, 'gsap/src/minified/TweenLite.min.js'),
          'TweenMax': path.resolve(MODULE_DIR, 'gsap/src/minified/TweenMax.min.js'),
          'TimelineLite': path.resolve(MODULE_DIR, 'gsap/src/minified/TimelineLite.min.js'),
          'TimelineMax': path.resolve(MODULE_DIR, 'gsap/src/minified/TimelineMax.min.js'),
          'EasePack': path.resolve(MODULE_DIR, 'gsap/src/minified/easing/EasePack.min.js')
        }
      }
    

    Actually I think it would be nice to use gsap like this:

    import {TweenMax, TimelineMax, Back, Quad} from 'gsap';
    
    opened by tcw165 63
  • Resolving a promise using onComplete or Tween.then

    Resolving a promise using onComplete or Tween.then

    Howdy 🤠 Massive fan of GSAP and absolutely loving 3 so far.

    While migrating a project from 2 to 3, I discovered a bit of unexpected behavior that I think would be considered a bug.

    I've created a codepen to demonstrate the issue. As you can see, when attempting to resolve a promise using onComplete, resolve can no longer be passed first-class to onComplete as it could in gsap 2:

    function test() {
      return new Promise(resolve => {
        gsap.to(square, {
          duration: 1.5,
          x: 200,
          ease: 'power3.inOut',
          onComplete: resolve
        })
          // also doesn't resolve using Tween.then
          // .then(resolve)
      })
    }
    
    test().then(() => {
      // never resolves
    })
    

    With that said, wrapping resolve in an arrow function (i.e. onComplete: () => resolve()) works. Another workaround is passing an empty object to onCompleteParams, which I believe is related to this line in core, but that still doesn't work with Tween.then.

    Sure, there are workarounds, but because this behavior is different than that of v2, I figured it would be worth bringing to your attention! I like the simplicity of passing functions first-class, so it would be great to be able to continue doing so with gsap 3.

    Just in case there is curiosity regarding the use-case here, I am working with a 3rd party lib (highway.js) that passes a done callback to Transition.in and Transition.out. After inspecting the source, I realized that done is actually just resolve coming from a Promise, which led me to creating these isolated tests in codepen.

    Thanks for your prolific work on GSAP! Cheers 🍻

    opened by mikehwagz 50
  • Webpack: Importing GSAP in multiple places returns empty object

    Webpack: Importing GSAP in multiple places returns empty object

    Bundling parts of GSAP (e.g. TweenLite.js) fails if done in multiple webpack entry points:

    // in entry point A
    import TweenLiteA from 'gsap/TweenLite'
    
    // in entry point B
    import TweenLiteB from 'gsap/TweenLite'
    

    Now if you include both bundled entry points, A and B, in a HTML page, TweenLiteA will correctly point to the TweenLite function, however, TweenLiteB will be an empty object.

    I made a minimal repro to make this issue easier to grasp, you can find it at Loilo/repro-webpack-gsap.

    Note: While TweenLite is actually bundled in each a.js and b.js in the repro, the problem is the same when it's splitted out to a separate file and imported from there.

    I'm not sure if this is an issue for the GreenSock or rather the webpack team — let me know if I can help with anything here. 🙂

    opened by loilo 35
  • Document how to use CustomEase

    Document how to use CustomEase

    I've made an account, downloaded CustomEase, and added CustomEase.min.js to my project.

    import { TimelineLite } from 'gsap'

    works fine, but when I try:

    import CustomEase from '../vendor/CustomEase.min.js'

    I get:

    image

    opened by lorensr 32
  • What is this, java?

    What is this, java?

    Why all the namespace code-magic? it makes it nearly impossible to port this otherwise great tool to newer systems like browserify or webpack. You should really consider dropping some of the actionscript/java legacy and move towards a CommonJS compatible script without messing around with window this and com.greensock.core that. Not only is it really difficult to follow, it also takes up a lot of valuable coding space.

    I’d like to do a simple require('TweenLite') but... how? I’ve been hacking around with the source but it’s a dependency mess right now. No offense.

    It shouldn’t be a great deal for you that knows the inner workings of f.ex https://github.com/greensock/GreenSock-JS/blob/master/src/uncompressed/TweenLite.js#L74-L95

    Maybe just don’t do your own dependency management, instead use requireJS or something else for development and then wrap it up in nice little packages for distribution...?

    Let me know if I can help.

    opened by davidhellsing 32
  • What is the correct way to load GSAP with Webpack?

    What is the correct way to load GSAP with Webpack?

    When I load GSAP with webpack, I get the error _doc = document; document is not defined.

    This page suggests several ways to "shim" modules. But none of them are working for me.

    This forum thread suggests some ways to shim the module to be compatible with ES6 import statements and works if "global" is defined in the node environment.

    I don't see a clear solution. Any help appreciated.

    opened by bishopZ 27
  • Update 1.18.5 > 1.19.0 breaks imports

    Update 1.18.5 > 1.19.0 breaks imports

    When using gsap in conjunction with webpack and es6 imports, like this, everything worked fine:

    import TimelineMax from 'gsap/src/uncompressed/TimelineMax';
    

    After the update to 1.19, imports break with a webpack message that the modules were not found. There seems to be a breaking change in the import handling.

    In addition: There's no way we could get the ScrollToPlugin to work with TweenMax. The problem is always a seemingly missing dependency of TweenLite in the plugin.:

    Before:

    import TweenLite from 'gsap/src/uncompressed/TweenLite';
    import 'gsap/src/uncompressed/plugins/ScrollToPlugin';
    

    After (not working):

    import { ScrollToPlugin, TweenLite } from 'gsap';
    
    opened by nirazul 26
  • const in output JS?

    const in output JS?

    Hey, I'm not much of a JS guy, but I've had complaints from people on old versions of Safari.

    Older versions don't like const keyword.

    Using webpack and const is in my build. Let me know if I did something wrong.

    *!

    • VERSION: 2.0.1
    • DATE: 2018-05-30
    • UPDATES AND DOCS AT: http://greensock.com
    • @license Copyright (c) 2008-2018, GreenSock. All rights reserved.
    • This work is subject to the terms at http://greensock.com/standard-license or for
    • Club GreenSock members, the software agreement that was issued with your membership.
    • @author: Jack Doyle, [email protected] */ const r="undefined"!=typeof window?window:void 0!==t&&t.exports&&void 0!==i?i:{},o=function(t,e){var n={},i=t.document,r=t.GreenSockGlobals=t.GreenSockGlobals||t;if(r.TweenLite)return r.TweenLite;var o,a,s,l,c,u,p,d=function(t){var e,n=t.split("."),i=r;for(e=0;e<n.length;e++)i[n[e]]=i=i[n[e]]||{};return i},h=d("com.greensock"),f=function(t){var e,n=[],i=t.length;for(e=0;e!==i;n.push(t[e++]));return n},m=function(){},g=(u=Object.prototype.toString,p=u.call([]),function(t){return null!=t&&(t instanceof Array||"object"==typeof t&&!!t.push&&u.call(t)===p)}),b={},x=function(t,e,i,o){this.sc=b[t]?b[t].sc:[],b[t]=this,this.gsClass=null,this.func=i;var a=[];this.check=function(s){for(var l,c,u,p,h=e.length,f=h;--h>-1;)(l=b[e[h]]||new
    opened by sgehrman 24
  • Improvements for build systems (Modules)

    Improvements for build systems (Modules)

    The current setup works great in most situations but it's not entirely npm/node/modules friendly. Let me show some of the limitations of the current setup, which may not be big on their own, but they pile up.

    Ease of import (✅ fixed in 1.19.1)

    Importing a plugin or just a part of GSAP is cumbersome

    import TweenLite from 'gsap/src/uncompressed/TweenLite';
    import Draggable from 'gsap/src/uncompressed/utils/Draggable';
    

    By just moving/copying the js files to the root of the npm package (not on GitHub) one could import them this way:

    import TweenLite from 'gsap/TweenLite';
    import Draggable from 'gsap/Draggable';
    

    Chance of code duplication

    I can import TweenLite and TweenMax in three ways and in larger projects this could easily happen:

    // main.js
    import 'part1.js';
    import 'part2.js';
    import 'part3.js';
    
    // part1.js
    import {TweenLite} from 'gsap';
    
    // part2.js
    import TweenLite from 'gsap/src/uncompressed/TweenLite';
    
    // part3.js
    import TimelineMax from 'gsap/src/uncompressed/TimelineMax';
    

    The resulting main.js will have the entire TweenLite.js, TimelineMax.js, and TweenMax.js (which include both of the previous ones already).

    This likely works thanks to GSAP' own plugin system, but the output will be heavier to download, parse and execute.

    See #180

    Automated third-party optimization

    Because of its proprietary bundling/plugin system, GSAP users completely miss out on optimizations like tree-shaking, which are becoming more and more common.

    A ESModules-enabled GSAP would allow the ease of this:

    import {TweenLite, Draggable} from 'gsap';
    

    While keeping the lightness of the carefully-selected:

    import TweenLite from 'gsap/src/uncompressed/TweenLite';
    import Draggable from 'gsap/src/uncompressed/utils/Draggable';
    

    Without requiring tooling-specific configurations (https://github.com/greensock/GreenSock-JS/issues/165, https://github.com/greensock/GreenSock-JS/issues/157#issuecomment-229055039)

    Notes

    All of this would not come at the expense of everybody else since you'd still offer pre-packaged ready-to-use modules.

    While backwards compatibility for npm users could be maintained, semantic versioning (i.e. publishing 2.0.0) would not break existing installations even if you remove the src folder from the published package.

    Bonus points: having an npm-specific build will make the code even lighter because you don't need to include UMD.

    Related: Three.js just now accepted a PR by @Rich-Harris to refactor the code into proper ES Modules.

    opened by fregante 24
  • GSAP ScrollToPlugin Issue in Nuxt.js project

    GSAP ScrollToPlugin Issue in Nuxt.js project

    I am making the scroll effect with GSAP and vue-scrollmagic in my Nuxt.js project. The code is the following as:

    import {gsap, TweenMax} from 'gsap' import ScrollToPlugin from "gsap/ScrollToPlugin"; const plugins = [ScrollToPlugin];

    export default { name: 'Test', mounted() { this.startAnimations(this.$refs) }, methods: { startAnimations: function(refs) { var tween = TweenMax.to(refs.slide1, 0.5, {scrollTo:{y: 500}}) const scene = this.$scrollmagic.scene({ triggerElement: refs.slide1, triggerHook: 0, duration: "100%" }) .setPin(refs.slide1) .setTween(tween) this.$scrollmagic.addScene(scene) } }, }

    In this case, I have got the error as the following:

    gsap-core.js?a5cf:3362 Uncaught TypeError: Failed to execute 'scrollTo' on 'Element': parameter 1 ('options') is not an object.

    How can I solve this issue?

    opened by huangxiaoxuan0621 23
  • then() -> TypeError: f is not a function

    then() -> TypeError: f is not a function

    I'm working on a upgrade to V3 in a project and somehow I get random errors regarding the handling of promises.

    image

    I'm unable to pin why it's happening, since it's happing at multiple tween at random occurrences..

    Maybe you can shed some light on it?

    Thanks! ❤️

    opened by naranjamecanica 22
  • [enhancement] add timeline labels to ScrollTrigger markers

    [enhancement] add timeline labels to ScrollTrigger markers

    Hi GSAP Team,

    It would incredibly helpful for finessing the timing of animations, and debugging timeline based animation issues if there was a method of visualising timeline labels with the 'markers' property - so that they were either automatically picked up when using them or could be passed in as an object of additional markers.

    Even just being able to print static markers to the viewport would be super helpful - like in the SnorklTV ScrollTrigger course video that's referenced in the 'How does pinning work under the hood' section of the docs. Here they're using the markers to illustrate 100px increments in the dom to explain how the pin spacer works - with custom markers you could potentially pass in an object containing an array of labels and pixel values to track how animations line up to whatever you're aiming for with your sequence, without having to code up fake HTML elements whilst building out the animation.

    Screenshot 2021-08-03 at 12 10 37
    opened by gravyraveydavey 1
A bundler for javascript and friends. Packs many modules into a few bundled assets

A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through

webpack 62.1k Nov 22, 2022
An open-source social media platform and public forum for questions and discussions, built for developers.

VUE Mumble Vue Repository About Mumble is an open source project built with REACT for developers. This is the Vue Version of Mumble (A Mumble Clone bu

Praveen Malethia 9 Mar 28, 2022
This is chat area web application for developers.

This is chat area web application for developers.

Buğrahan Öztürk 6 Apr 12, 2022
Public website for the Texas Tech chapter of the Google Developers Student Clubs

Texas Tech GDSC Website Here you can watch and even participate in the development on the TTU GDSC Website. Eventually, it'll be the single point of c

GDSCTTU 5 May 13, 2022
Cluster API developers and operators often need to quickly get insight multicluster configuration

Cluster API Visualization App [WIP] Cluster API developers and operators often need to quickly get insight multicluster configuration. This app provid

Jonathan Tong 45 Nov 21, 2022
Collect classic sorting algorithms and display in animation, which can be useful for better understanding of sorting algorithms.

Collect classic sorting algorithms and display in animation, which can be useful for better understanding of sorting algorithms.

PARANOIA 4 Aug 13, 2022
A vue component made for fun which renders slots in rain animation.

This is a vue component made for fun which renders slots in rain animation. It could be reallt useful if you want to create a shower effect with emojis.

Shaik Tabrez 1 Mar 25, 2022
Places component is based on places.js for Vue 2.x. Turn any input into an address autocomplete.

vue-places Places component is based on places.js for Vue 2.x. Turn any into an address autocomplete Installation # yarn $ yarn add vue-places # npm

Thomas Marrec 108 Jan 18, 2022
start using Sheets2API to turn their spreadsheets into powerful APIs to rapidly develop prototypes, websites, apps

... turns your spreadsheet into a Restful JSON API, meaning you can get data in and out of your spreadsheet using simple HTTP requests and URLs.

Aakrit Subedi 9 Oct 4, 2022
empower your web browsing into actionable knowledge

Studium retain, recall, and start remembering information and ideas from your websites Explore the docs » View Demo · Report Bug · Request Feature Pro

null 4 Jun 18, 2021
Encrypted Emoji - Cryptoji uses AES-256 to encrypt messages into emoji, known as cryptoji.

Encrypted Emoji - Cryptoji uses AES-256 to encrypt messages into emoji, known as cryptoji.

Daniel Routman 23 Oct 10, 2022
Render children into a DOM node that exists outside the DOM hierarchy of the parent component

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

Nourse 0 Nov 8, 2018
A simple wrapper for integrating lottie-web into VueJs

lottie-vuejs is a simple VueJS wrapper for lottie-web. It encompasses critical lottie-web functionality into an vue component plugin. Utilize lottie-vuejs to quickly and almost effortlessly bring lottie functionality into your VueJS project.

Gladwin Henald 1 May 10, 2020
A simple wrapper for integrating lottie-web into VueJs

vue-lottie2 vue-lottie2 is currently in development! Use in production environment at your own risk vue-lottie2 is a simple VueJS wrapper for lottie-w

Marko Bogdanovski 0 Apr 19, 2020
Resize the font-size in rem units so that the text fits into the html element.

v-fit2box directive for Vue3 Resize the font-size in rem units so that the text fits into the html element. In other words the font size is smaller fo

null 1 Jan 19, 2022
Applications for any device with HTML, CSS and JavaScript - free and open source!

App Framework App Framework development has ended. I recommend using the Framework7 CLI instead. iOS and Android Apps with HTML & JavaScript - App Fra

null 646 Nov 14, 2022
🌟 DataFormsJS 🌟 A minimal JavaScript Framework and standalone React and Web Components for rapid development of high quality websites and single page applications.

?? Welcome to DataFormsJS! Thanks for visiting! ?? ?? ?? ?? ?? ?? 中文 (简体) 欢迎来到 DataFormsJS Español Bienvenido a DataFormsJS Português (do Brasil) Bem

DataFormsJS 153 Nov 13, 2022
A small game written in Javascript

Vue 3 + Vite This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 <script setup> SFCs, check out the scrip

Yosef Yudha Wijaya 2 Dec 12, 2021
Simple diceware password generator built using Vue and plain JavaScript

Vue Diceware This is simple diceware password generator built using Vue and plain JavaScript. It generates passwords consisting 4 up to 10 words using

Maciek Talaśka 0 Feb 3, 2021