npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@react4tv/gsap

v1.0.0

Published

Gsap v3(12)

Downloads

80

Readme

GSAP (GreenSock Animation Platform) with Trial Bonus Files

*** DO NOT DEPLOY THESE FILES! ***

This package is only intended for experimentation during development. It contains the public GSAP files plus all bonus plugins which are normally available exclusively to Club GreenSock members, including ScrollSmoother, DrawSVGPlugin, MorphSVGPlugin, SplitText, GSDevTools, InertiaPlugin, and more. The trial plugins only work locally and on certain approved domains like codesandbox.io, codepen.io, stackblitz.com, and jsfiddle.com. Deploying them elsewhere violates the license and will result in a browser redirect!

Sign up for Club GreenSock to get the completely unrestricted files.

No GSAP files (including the trial plugins) implement any tracking whatsoever. No data is collected.

What is GSAP? (video)

What is GSAP?

Docs

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

Usage on approved domain

On a whitelisted domain like codesandbox.io, you can do this:

// typical import
import gsap from "gsap";

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

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

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

The NPM files are ES modules, but there's also a /dist/ directory with UMD files for extra compatibility. Some build tools don't understand ES Modules in which case you can import the UMD files by adding /dist/ like:

// UMD imports
import gsap from "gsap/dist/gsap";
import MorphSVGPlugin from "gsap/dist/MorphSVGPlugin";

Use an alias to make upgrading simple

Install the package as a "gsap" alias so that when you join Club GreenSock and get the unrestricted files, all you have to do is install those and make zero changes to all your imports!

npm install gsap@npm:gsap

Now we can simply use "gsap" in place of "gsap", so the imports could look like this:

import gsap from "gsap";
import DrawSVGPlugin from "gsap/DrawSVGPlugin";

How do I get unrestricted files?

Once you're a Club GreenSock member, download the unrestricted plugins from your GreenSock.com account and then include them in your own JS payload. There are no "phone home" scripts that track usage and the plugins won't suddenly stop working if/when your membership expires. We treat others the way we'd like to be treated and our entire business model is built on the honor system. Read about it here. GreenSock has a private NPM registry for members too.

Post your questions in our forums and we'd be happy to help.

Getting Started with GSAP (includes video)

Getting Started with GSAP

ScrollTrigger and 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

  • GSAP home page
  • Getting started guide
  • Docs
  • Cheat sheet
  • Ease visualizer
  • Forums
  • Showcase
  • Why GSAP? (convince your boss)

What is Club GreenSock? (video)

What is Club GreenSock?

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

  • To get unrestricted access to the incredibly helpful members-only plugins like MorphSVGPlugin, SplitText, 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.

What are you waiting for? Sign up today.

Try bonus plugins for free on CodePen and CodeSandbox

There are instructions and CDN URLs listed at https://greensock.com/try-plugins. CodePen makes it quite simple, as does CodeSandbox.

Need help?

The GreenSock forums are an excellent place to learn and get your questions answered. Report any bugs there too please (it's also okay to file an issue on Github if you prefer).

License

Please do not use any of the bonus plugins without the proper license which comes with Club GreenSock memberships. GreenSock's standard "no charge" license for the public files 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.