Skip to content

greensock/GSAP

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
1 branch 104 tags
Code

Latest commit

@jackdoyle
jackdoyle 3.11.5
631311c Mar 17, 2023
3.11.5 
- IMPROVED: if you set up an animation with a ScrollTrigger based on a containerAnimation and it has a negative start position (happens BEFORE the containerAnimation), it will render it initially at the spot where the containerAnimation begins (to avoid a jump). See https://greensock.com/forums/topic/35184-gsap-horizontal-scroll-with-parallax-need-to-figure-the-first-element-parallax-position-before-the-scroller-pins-and-animation-starts/

- IMPROVED: if you try using MotionPathPlugin.getPositionOnPath() on a RawPath that hasn't had cacheRawPathMeasurements() on it, now it'll automatically call that for you rather than throwing an error.

- IMPROVED: GSDevTools is context-aware now.

- IMPROVED: Draggable now saves the target's original inline styles (transform/top/left) and then reverts them when its revert() method is called (and it works with gsap.matchMedia() and gsap.context()). See https://greensock.com/forums/topic/35287-gsapmatchmedia-draggable-not-reverting/

- IMPROVED: ScrollSmoother will automatically watch for when the content element resizes and check to see if the current scroll position is greater than the new maximum and adjust things accordingly. See https://greensock.com/forums/topic/32353-scrollsmoother-not-refresh-the-page-height-when-accordion-is-openclosed/#comment-179179

- IMPROVED: ScrollTrigger.normalizeScroll() will now automatically cancel its momentum-based scroll on mobile devices when it senses that something else changed the scroll (like if you do a scrollTo tween). It also cancels it when there's a touchmove event. See https://greensock.com/forums/topic/35970-scrolltrigger-makes-jump-on-mobile-vertical-fullscreen-slider/

- IMPROVED: better compatibility with worker and SSR environments by delaying the auto-registration of CSSPlugin internally if the window doesn't exist yet. See #524

- FIXED: if you set a "speed" that's not 1 directly on a ScrollSmoother instance, the .offset() or scrollTo() methods wouldn't factor that into the results. See https://greensock.com/forums/topic/35108-problems-with-the-scrollsmoother-plug-in-speed-option-in-gsap-3114/

- FIXED: in some browsers (like Firefox), screen repaints weren't consistent (seemingly the scroll thread and main thread got out of sync sometimes) unless we put SOMETHING (anything, even an empty function) into the requestAnimationFrame() queue at all times. So ScrollTrigger does that now as a workaround.

- FIXED: ScrollTrigger.normalizeScroll() may still allow "jitter" in some cases like on Android with a pinType that's "transform"...but that has been resolved now. See https://greensock.com/forums/topic/35157-scrolltrigger-pinning-causes-jitter-when-using-touch-on-safari/

- FIXED: if you applied an onUpdate to a tween that's a containerAnimation for a ScrollTrigger, "this" (the scope) inside that function wouldn't properly refer to the animation instance itself.

- FIXED: a regression in 3.11.4 could cause ScrollSmoother to initially jump slightly (on the very first scroll movement). See https://greensock.com/forums/topic/35244-there-is-a-lag-with-page-scrolling-while-using-scrollsmoother/

- FIXED: if you set a negative delay on an animation and then invert the timeScale to a negative value and then change it again, it could adjust the startTime incorrectly. See https://greensock.com/forums/topic/35243-reversed-animation/

- FIXED: (regression in 3.11.4) if a ScrollSmoother was resized after being scrolled, it may jump to a scrolled position and back again (see https://greensock.com/forums/topic/35529-scrollsmoother-strange-behavior-when-resizing-a-window/)

- FIXED: if you right-click (context menu) on an Observer's target, it would act as though the pointer stays down (dragging) after the context menu is released. Now it'll ignore the event if its "button" value is truthy. See https://greensock.com/forums/topic/35505-strange-behaviour-with-observer/

- FIXED: if you apply snapping to a ScrollTrigger and dynamically recreate it after scrolling, it could incorrectly restore the scroll position. See https://greensock.com/forums/topic/35545-%F0%9F%9A%92-need-help-with-scrolltrigger-refresh-events

- FIXED: if a ScrollSmoother's content resized, it would [correctly] call a refresh() but any ScrollTriggers that had a scrub applied may inadvertently start again from their beginning at that point. See https://greensock.com/forums/topic/35536-smoothscroller-ignoremobileresize-for-non-touch-devices

- FIXED: if you set a "speed" on a ScrollSmoother instance (other than 1) and then toggle paused() true/false, it could render the page at the wrong position. See https://greensock.com/forums/topic/35612-scrollsmoother-speed-option-bug-in-gsap-3114/

- FIXED: a regression in 3.11.3 caused ScrollTriggers with a pinnedContainer and pin defined to sometimes not pin initially in a particular edge case.

- FIXED: a regression in 3.11.2 could cause ScrollTriggers with a numeric scrub value to initially jump to their starting position and then scrub on the very first onEnter. See https://greensock.com/forums/topic/35725-nested-scrolltrigger-doesnt-seem-to-be-initializing-properly

- FIXED: if you have a repeating timeline with yoyo: true and you also have a non-zero repeatDelay and repeatRefresh: true, it would skip the repeatRefresh See https://greensock.com/forums/topic/18961-positioning-elements-along-a-bezier-curve

- FIXED: if you set a repeat on a timeline that had repeatRefresh: true and it had an onStart callback, that onStart would be called on each iteration instead of only on the first one.

- FIXED: if you Flip.fit() an element that has 3D transforms (particular rotations), it could cause the matrix3d() to get re-interpreted in a way that'd change the mix of rotations/scales which would technically look exactly the same, so visually nothing would change but the values themselves could be different. See https://greensock.com/forums/topic/35803-using-flipfit-with-3d-rotation/#comment-179207

- FIXED: ScrollTrigger.maxScroll() won't return a negative value (like if the viewport is taller than the content).

- FIXED: if ScrollSmoother is applied to a page and the content resizes, pointer-events: none was temporarily set on the wrapper and then reverted to work around an iOS browser bug, but that could cause pointer events to fire again, like mouseenter. So we've opted for a different workaround in that case.

- FIXED: if ScrollTrigger.normalizeScroll() was enabled on a page that used ScrollSmoother with smoothTouch enabled, on touch devices it may intermittently seem like the scroll position isn't getting updated (temporarily). See https://greensock.com/forums/topic/35826-problems-with-scrollsmoother-3115-beta-on-touch-screen-devices/

- FIXED: if you animate a camelCased CSS variable in a from() or fromTo() animation, a regression in 3.11.0 could cause it to seem "stuck". See https://greensock.com/forums/topic/31518-how-to-get-after-pseudo-element/?do=findComment&comment=179817

- FIXED: if you define a containerAnimation on a ScrollTrigger and use a numeric value for "start", it wouldn't interpret that as a scroll position properly. If you use a relative value for "end" like "+=500" when the start is numeric, it wouldn't be interpreted properly either. See https://greensock.com/forums/topic/36004-horizontal-scroll-section-with-absolutely-positioned-sidebar-issues-with-resizing/

- FIXED: a ScrollTrigger that has a containerAnimation may not render at the correct position on the very first render after a refresh() (but scrolling even once would correct it). See https://greensock.com/forums/topic/36004-horizontal-scroll-section-with-absolutely-positioned-sidebar-issues-with-resizing/

- FIXED: if you apply a ScrollTrigger to a page that has no scrollable content (no scrollbar), but the ScrollTrigger adds pinSpacing that would create a scrollbar, it now adjusts for that scrollbar space (previously the pin-spacer may have a width that reflects the width of the viewport without the scrollbar). See https://greensock.com/forums/topic/36019-scrolltrigger-during-horizontal-scroll-border-is-hidden-under-scrollbar/

- FIXED: if you define a pinnedContainer on a ScrollTrigger and a ScrollTrigger.refresh() occurs (like on window resize) when scrolled beyond where the pinning occurs, the start/end of the ScrollTrigger may be miscalculated. See https://greensock.com/forums/topic/35987-scrolltoplugin-and-scrolltrigger-with-scrub-not-getting-along/?do=findComment&comment=180473

- FIXED: For ScrollTrigger.normalizeScroll() on an iOS device, in a very rare case (typically when the page is inside an iframe), scrolling could appear to vibrate very quickly between a "stuck" state and the "real" state.
631311c

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
dist
3.11.5
March 17, 2023 10:21
esm
3.11.5
March 17, 2023 10:21
src
3.11.5
March 17, 2023 10:21
types
3.11.5
March 17, 2023 10:21
.gitignore
Initial full commit
September 22, 2012 13:21
README.md
3.11.5
March 17, 2023 10:21
SECURITY.md
3.8.0
September 29, 2021 01:25
package.json
3.11.5
March 17, 2023 10:21
GSAP (GreenSock Animation Platform) Professional-grade animation for the modern web What is GSAP? (video) Docs & Installation CDN NPM Getting Started (includes video) ScrollTrigger & ScrollSmoother Resources What is Club GreenSock? (video) Advanced playback controls & debugging Try all bonus plugins for free! Need help? License

README.md

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://cdn.jsdelivr.net/npm/gsap@3.11/dist/gsap.min.js"></script>

See JSDelivr's dedicated GSAP page for quick CDN links to the core files/plugins. There are more installation instructions at GreenSock.com.

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

About

GreenSock's GSAP JavaScript animation library (including Draggable).

greensock.com

Resources

Readme

Security policy

Security policy

Stars

16.3k stars

Watchers

396 watching

Forks

1.6k forks
Report repository

Releases

104 tags

Packages

No packages published

Used by 113k

  • @TarekMESSAOUDI
  • @drmaniya
  • @mku91
  • @Turuu8
  • @AlightKnight343
  • @arskiir
  • @Guan-GeGe
  • @paultsviliuk
+ 112,985

Contributors 2

  •  
  •  

Languages