Search the Community

Problem: SplitText doesn't split by lines, when I have nested tag in it.

Hello, Some context about this issue We have a customer website that uses gsap globally and loads it in its vendors.js. It's in version 3.11. On this website, we inject a Vue app that bundles gsap. We use vite to bundle the app, and use latest gsap, aswell as ScrollTrigger plugin as module imports. Problem is: ScrollTrigger plugins registers itself to the global instance when importing the plugin, and does not register on our bundled instance when we trigger registerPlugin. Issue reproduction (from the vue + scrolltrigger example): https://stackblitz.com/edit/vitejs-vite-cywcj9dz?file=index.html Only addition here is a <script> tag loading another instance of gsap globally. Looking at the source code, the last line of ScrollTrigger plugin does the auto-registration and seems to be the issue. There is no way to disable it (as I'm aware of) We cannot use the customer version as it creates a dependency between our code and his, the website and the app do not have the same lifecycle. Is there a way to handle this ? Could it be possible to add a flag to disable auto-registration of the plugin ? Is it really possible to have multiple instances of gsap on a single webpage ? Thanks in advance

I am using Next JS App router, and I am confused while registering the plugin. Is there any way where I can register all plugins at once? or any other way for this?

Showing Below Warning and error Uncaught ReferenceError: ScrollTrigger is not defined ScrollTrigger.min.js:10 Please gsap.registerPlugin(ScrollTrigger) ScrollTrigger @ ScrollTrigger.min.js:10 G.create @ ScrollTrigger.min.js:10 (anonymous) @ mainPage.html:20 ScrollTrigger.min.js:10 Uncaught TypeError: Cannot read properties of undefined (reading 'indexOf') at N (ScrollTrigger.min.js:10:415) at ScrollTrigger.init (ScrollTrigger.min.js:10:8528) at new ScrollTrigger (ScrollTrigger.min.js:10:18901) at G.create (ScrollTrigger.min.js:10:19167) at mainPage.html:20:15

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 that too : import {TweenMax, TextPlugin } from "gsap/all"; const plugins = [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}); }, []); Both of them didn't work Many thanks in advance

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' import { drawSVG } from 'gsap/drawSVG' gsap.registerPlugin(drawSVG) const plugins = [drawSVG]

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: https://github.com/PaulieScanlon/react-svg-bubble-slider/tree/feat/gsap-draggable I've encountered one or two issues but before i break them out into multiple topics i wondered if i could list a few things i've have questions about / have had trouble with. Question: 1 . Is Draggable part of Club GreenSock? 2. Is ThrowProps part of Club GreenSock (i think it is)? 3. If i plan to open source this project AND have paid for BusinessGreen am i ok to open source the project. The plugin code would be minified and bundled and i i'll .gitignore the plugin source as this will be a public repo Issues: 1. I'm not sure quite sure if this is just me mis-understanding the imports but is this the correct way to use imports? import { gsap, TweenMax, TimelineMax, Linear, Elastic, Power1 } from 'gsap' import Draggable from 'gsap/Draggable' gsap.registerPlugin(Draggable) 2. With Draggable imported this way i now run in to issues with Jest, can anyone advise on how to either mock the module or use jest config to ignore it? 3. Similarly when i use webpack to bundle the module build i think i'll need to also transpile Draggable, is there a CommonJs trick i'm missing here? Thanks so much team!

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?

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 it stands: var tl = gsap.timeline(), circle = document.getElementById("circle"), smoke = document.getElementById("smoke-1"); tl.to(circle, 4, {morphSVG:smoke, type:"rotational", origin:"center center"}, "+=2") .to(circle, 4, {morphSVG:circle, type:"rotational", origin:"center center"}, "+=5"); Running it produces a console message to registerPlugin() thanks!

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 I have done is add the MotionPath plugin? I am including the MotionPath plugin like so: And have been successfully using the TextPlugin: And DrawSVG, locally

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 { ColorPropsPlugin } from "./gsap/old-plugins/ColorPropsPlugin.js"; import { ThrowPropsPlugin } from "./gsap/old-plugins/ThrowPropsPlugin.js"; gsap.registerPlugin( Draggable, ScrollToPlugin, DrawSVGPlugin, ColorPropsPlugin, ThrowPropsPlugin); Thank you in advance!

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?

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]); } container.appendChild(element); return element; }, The container.appendChild(element) line. I get an error along the lines of: ERROR: TypeError: container.appendChild is not a function. (In 'container.appendChild(element)', 'container.appendChild' is undefined), location: src/project.dev.js:5718:34 I'm wondering if there's not some DOM elements trying to be accessed that don't exists (the cocos runtime has no real DOM). This function appears to be part of the CSSPlugin. I'm wondering if there's a way to remove the CSSPlugin cleanly from gsap. If anyone could point me in the right direction, I would appreciate it. I didn't find any information regarding custom builds or removing plugins in any of the documentation. Thanks for the help, and thanks for the great lib!

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!

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() { var t1 = new TimelineMax() t1.to('#animate', .2, { opacity: 1, ease: Sine.easeInOut }) .to('#animate', .2, { css: { color: red, }, ease: Sine.easeIn }) } }, mounted() { GSDevTools.create() } } </script> For others plugins they work as expected so i can import them when needed using for example: import {TimelineMax, CSSPlugin, Sine, Power4} from 'gsap' But if I add the GSDevTools as for the others this doesn't work. If I import the plugin with: import {GSDevTools} from 'gsap' // or import GSDevTools from 'gsap/GSDevTools' // or import GSDevTools from '../../../node_modules/gsap/GSDevTools' // or import * as GSDevTools from '../../../node_modules/gsap/GSDevTools' // or var GSDevTools = require ('gsap/GSDevTools') // or var GSDevTools = require ('../../../node_modules/gsap/GSDevTools') I got this error: I'm stucked, please Help!!! Thanks

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.

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

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.

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

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?

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/methodologies that would best help me with what I'm trying to achieve I'd appreciate it. If I need to add/provide any other info, just let me know. Thanks!

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.

Hi guys, I just tried the ThrowPropsPlugin to move a MovieClip in x-direction instead of y-direction like in the example. I took the code from the example and changed every y-value to an x-value. However, it doesn't seem to work smoothly. The drag-movement is somewhat stuttered. Strangely enough, the drag-movement where the position exceeds the bounds runs smoothly. I've attached a minimal working example, maybe someone can have a look and tell me where the code goes wrong. For some reason I'm not allowed to attach any file, so I'll just upload to my Dropbox: https://dl.dropboxusercontent.com/u/289091/ThrowPropsPluginTest.fla

Sometimes I use a plugin's property without activating that plugin. Of course that is my fault and I fixed it. However, I find it helpful to be notified that the plugin was not activated. Currently I inserted into the TweenLite.as function _initProps (line 574): } else { if (!target.hasOwnProperty(p)) { trace("TweenLite._initProps:", p, "is not an activated plugin and not a property of", target, ". Creating PropTween."); } I hesitate to touch the source code, which would be replaced when a new version is released. Do you recommend another way to see a trace statement when the property has not been activated?Can you you see examples of problems with this trace technique? Thank you for reading!

Hi All new to GreenSock I cannot find complete documentation on the TransformAroundAPoint plugin - specifically all the parameters that can be or should be passed in, configuration and perhaps some more examples. I have looked at this page and I would like something in more detail if it is available. http://api.greensock.com/as/com/greensock/plugins/TransformAroundPointPlugin.htm Thanks