Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'plugins'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. Hi, I would want to know if it is possible tu use premium plugins with the npm package (without having to download the package from my account). If it is not possible do you plan to have like a key to unlock the premium plugins using the npm package ? Thanks.
  2. GreenSock


    Note: This plugin was replaced with MotionPathPlugin in GSAP 3. Please see the GSAP 3 release notes for details. Animate virtually any property (or properties) along a curved Bezier path which you define as an array of points/values that can be interpreted 4 different ways (described as the Bezier's "type", like type:"soft"? "thru" (the default) - the plugin figures out how to draw the Bezier naturally through the supplied values using a proprietary algorithm. The values you provide in the array are essentially treated as anchors on the Bezier and the plugin calculates the contro
  3. Hello, I use TweenMax in React, no worries until then. Now I would like to use the TextPlugin plugin but I can't get it work with the import... import {TweenMax} from "gsap"; const TextPlugin = require("gsap/TextPlugin"); const About = () => { let xpRef = useRef<HTMLHeadingElement>(null); let educRef = useRef<HTMLHeadingElement>(null); useEffect(() => { TweenMax.to(xpRef.current,1, {text: "This is the new text", ease: "none"}); TweenMax.to(educRef.current,1, {text: "This is the new text", ease: "none", delay: .3}); }, []); I test
  4. Hi, Can anyone help with using Gsap plugins with react? I have tried using the .tar.gz as documented but am struggling to see how this would work in production as you need to have dependencies in the package.json in order for the project to build. Is there a step by step simple react and Gsap (with plugins) example anywhere? None of the examples on the documentation here use a Gsap plugin. Many thanks, George All the below code does is result in a 'drawSVG' not found error.. (I'm using v3 of Gsap is that ok?) import gsap, { TimelineMax } from 'gsap'
  5. Hey all, i used to use GreenSock a lot back in my ActionScript 2.0 days (circle 2005) but have been out of the animation game for some time... i'm so pleased the project is still alive and well! I've been talking with Chris Gannon and have re-created his brilliant svg-bubble-slider: https://codepen.io/chrisgannon/pen/GZNgLw/ and i plan to open source it as a React / `npm` module. storybook WIP: https://5ecbca87213967000683ec12--react-svg-bubble-slider.netlify.app/?path=/docs/intro--page repo: https://github.com/PaulieScanlon/react-svg-bubble-slider branch: htt
  6. Hi, I just bought a subscription to GSAP in order to use the InertiaPlugin. Unfortunately I am running into issues with the track function var tracker = InertiaPlugin.track(slider, 'x'); const vel = tracker.getVelocity('x'); The function track seems to be returning an Array and not a VelocityTracker object? I've created a codepen that demonstrates what I mean. Can someone point out what the correct way is to grab the velocity using the InertiaPlugin please?
  7. Hi all, I have a client who has a Business membership and they host the files on their own CDN. Unfortunately, they never update the versions. TimelineMax is v1.20.3 and MorphSVGPlugin is v0.8.11 I've requested they update the files, and they say they will, but this is a HUGE tech corporation with a HUGE tech bureaucracy and nothing is ever quick! So my question is -- how do I register a plugin (and use it) in this version? The plugin file does not expose window.MorphSVGPlugin so there's no apparent way to register it as it is undefined. This is my code as
  8. I have been working on a project that involves a timeline that simply goes from one scene to another (one function to another) using onComplete. In a couple scenes I am successfully using the DrawSVG and Text plugins. Recently I have gotten involved in MotionPath and have successfully put together a scene using it. However, when I include the MotionPath scene in my main project, those other scenes that involve DrawSVG and TextPlug do not render properly. I get the following errors Could anyone explain to me why these plugins suddenly appear to be missing when all
  9. Hello! I've got a problem with the new gsap 3.0 library. I have a website which uses gsap 2 with member-only plugins ThrowPropsPlugin and ColorPropsPlugin. I'm trying to migrate to gsap 3 now, but I just found out that these plugins are no longer available in the library. Question #1: Can I use these old plugins with the new gsap 3? Question #2: Why JS is looking for TweenLite file if I'm not using it? I'm importing all js files as ES6 modules, like this: import { gsap, Draggable, ScrollToPlugin, DrawSVGPlugin } from "./gsap/all.js"; import { ColorP
  10. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. With some animation engines it can be frustrating trying to get something to rotate in a specific direction. With GSAP you can explicitly set the direction or let GSAP figure out the shortest distance. Watch the video Interactive demo See the Pen DirectionalRotation Visualizer by GreenSock (@GreenSock) on CodePen.
  11. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. MorphSVG's default settings typically deliver beautiful results but sometimes you may need to tweak things to get a certain effect or avoid weird transitional states or kinks. This video explains advanced features of MorphSVGPlugin that give you plenty of flexibility. Watch the video For more information and plenty of i
  12. When you animate the value of a CSS variable you can affect any element that uses that variable in any of its styles. Instead of having a DOM element as the target of your tween, you will use the rule that defines your CSS variable. Check out the video and demo below to see exactly how it works. Video Code CSS html { --myColor: green; } .wrapper { border: 1px solid var(--myColor); border-radius: 10px; margin-right:10px; } h2, strong { color:var(--myColor); } .cool { display:inline-block; padding:10px; color:white; border-radius:8px; background-colo
  13. Hey, Im making a site with Vue and Nuxt and Im using gsap from node modules. In have problems loading the plugins I've bought from a folder. If I want to use e.g ScrollTo plugin - I've tried putting the minified script in a folder and then using it, but it throws me an error that it can't find TweenLite. How would I solve this?
  14. Hello All, We've run into an issue using gsap with Cocos Creator native builds. It seems like some updates they've done recently has caused conflicts with gsap. Previous versions of Cocos Creator had no issues. From what I can tell, the Creator runtime dies when it hits: _createSVG = function(type, container, attributes) { var element = _doc.createElementNS("http://www.w3.org/2000/svg", type), reg = /([a-z])([A-Z])/g, p; for (p in attributes) { element.setAttributeNS(null, p.replace(reg, "$1-$2").toLowerCase(), attributes[p]); } cont
  15. hey guys! GSAP animation is the first and only animation library I have used. Although learning it through the Docs hasn't been difficult, it would be nice to have someone develop an extension for GSAP products for code editors. This extension could provide quick access to parameters, functions stc. I think this has been a community demand for a long time and I would request anyone with knowledge of developing IDE extensions to please take up this project thanks in advance!
  16. Hey folks, I'm trying to setup GSDevTools on a Vuejs using Npm and Webpack. All the plugins are in the folder: /node_modules/gsap I'm using Vuejs and my component looks like: <template lang="html"> <div> <div id="animate" @click="animateIt"> content </div> </div> </template> <script> import {TimelineMax, CSSPlugin, Sine, GSDevTools} from 'gsap' export default { name: 'ComponentName', data: () => ({ var_1: 'dummy' }), methods: { animateIt: function() {
  17. Hello, I am an ember developer and convinced my company to have a closer look at gsap and they did. So we are gsap member and I am now kinda struggling to figure out how I can use the shiny plugins which are not free to use. I use an ember package -> https://github.com/willviles/ember-gsap to load gsap into an ember application. You can import gsap via an es6 import import { TimelineMax } from 'gsap' The ember gsap addon doesnt support any of the business green plugins so I am looking for workarounds. In ember you can add files to the vendor folder which then can be lo
  18. Conversant

    Loaded Plugins

    Is there a way to see what plugins are loaded? For example, I want to be able to detect if CustomEase or ScrollTo is available on a page.
  19. Hi If I use tweenmax and a couple of the plugins on a site - is it possible to combine all the 3 source scripts (for instance. tweenmax, cssrule plugin, drawSVG plugin) into one file to save on load times / http requests? If so how would I go about doing this, would I just cut & paste the code from all 3 un-minified files into one file, and then minimise the combined file? At the moment I'm just using tweenmax (which i then link to my main.js file for when I add tweens etc obviously) Or is this just a bad idea all round? Emily
  20. Hi. First of all, I'd like to say I'm sorry cause I'm really new in tweening. I've made an example of what I'm trying to do. I need to animate that circle making each stroke to go from 0 to 100, one after other, clockwise. Each one will have a different color. The way I tryied, It did't work at all. The stroke animate, and then back to point zero. I need something more like animating fill.
  21. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Have you ever tried getting a realistic wiggle effect or tweaking just how bouncy an ease is? What about adding squash and stretch to a bounce? These are not easy tasks. Well, until now. Even though CustomEase, lets you create literally any easing effect that you can imagine (bounces, wiggles, elastic effects, whatever) by drawing th
  22. Hello GreenSock Masters! I want to collect and recognized all the plugins out there! If you have unofficial plugin for GSAP please comment it or reply it to this forum thread. My Unofficial Plugin for GSAP https://github.com/WarenGonzaga/AnimateCSSPlugin This is not actually plugin built because I rely on GSAP ease animations and some GSAP related variables. Anyway if you have something to share with go ahead and comment it/reply it! Thanks GreenSock Forum
  23. Hi, I was wondering if I can call directionalRotation plugin directly in Javascript. Something like: var shortAngle = TweenMax.directionalRotation("420_short"); > shortAngle = 60 I just need the value returned by the plugin, I'm not using it in a Tween or something. Is that possible?
  24. Hey everyone, I was interested in learning more about how to create a physics animation effect, similar to those that I've seen in demos or in live sites (like kairoswatches.com). Specifically, I'm interested in learning more about what goes into the creation of say....a field of star-esque lights that just link and float about behind other things (for instance). I'm not trying to have someone make something for me, but while I am an experienced front-end developer, I find the physics stuff slightly intimidating. In summary, if anyone can recommend some resources/methodologie
  25. Hi, I'm wondering whether I should be writing my own plugins for GSAP. I have two cases where this might be nice: 1) First I'm animating richmarkers on google maps. To animate latitude and longitude I must call setPosition. I can do this ok with onUpdate, but then if I'm also animating color, say, it starts to get a bit cumbersome. 2) In another project I'm using fabric.js. I notice you have a plugin for easel.js but not fabric. So for cases like this should I write my own plugin to make the syntax nicer? If so, are there any docs or examples on doing this? Thanks.