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, 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?

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!

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. 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