Jump to content

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

Search the Community

Showing results for tags 'gsap3'.

More search options

  • 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


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 16 results

  1. I have a simple project with Angular 7 using GSAP 3. That's it works perfectly with comand 'ng serve' and 'ng build' of Angular CLI, but when I use the comand 'ng build --prod', the application throws the following error: "Uncaught TypeError: Cannot read property 'easeIn' of undefined". I think the problem just happens in AoT build mode of Angular. Could someone help me with this? Thanks!!
  2. Hello, it's me again with GSAP 3 migration I have a case, when I check Draggable's endX and if it is smaller than I need I return the dragged object back to original position. In the previous version of GSAP, when I applied TweenMax.to to the dragged object it "rewrote" the Draggable's behaviour and did what I want. But now, after gsap.to finishes its animation the Draggable continues its work and places object into the endX coordinate. Please, help. I couldn't find a proper "stop" method for Inertia in the Docs.
  3. The question is regarding the GSAP 3. How can I interpolate between two values using gsap properties such as easing, duration, delay etc?… And I don't need actual target object to animate. I've embedded Codepen example of how I did this before, with TweenMax. But when I use gsap 3 syntax JS console generates error telling that target is undefined. I assume that .interpolate() utility may come in handy here. But I cannot understand how to apply it in this case. Please, help
  4. Hello everyone, I've just upgraded my project to GSAP v3, but CSSRulePlugin doesn't works properly anymore. In a first time i've thinked that was a problem behin the CDN delivery but after few tests, i can't see where exactly is the problem. Below, the console warned me about stuff extends with CSSRulePLugin. Someone can explain to me what should i change to make it work ? Thanks you by advance !
  5. GSAP 3 is the most significant upgrade we have ever had. With 50+ new features, there's a lot to be excited about. Here are a few of the highlights: Check out the full demo collection for more. A special shout-out to @dsenneff who created the animation at the top of this page! Jump right in - here's a starter codepen: See the Pen Try GSAP 3 on CodePen by GreenSock (@GreenSock) on CodePen. More ways to play: GSAP 3 Starter Pen - Fork the CodePen and away you go. Download the files to use locally. Using a build tool? npm install gsap will get you the files. If you're a Club GreenSock user, there's a gsap-bonus.tgz tarball file in download that you can simply drop into your project's folder and then npm install ./gsap-bonus.tgz and BOOM, it'll be installed just like any other package! See the installation docs for more information. The GSAP 3 docs Tell us what you think! Feel free to post in the our forums about what you like and any questions that you have. Or you can contact us directly if a public forum isn't your style. Are you interested in having a GreenSock representative teach your team about the new version or speak at your next conference? Contact us and we'll do our best to make it happen! Happy tweening!
  6. Checkout the codepen. If you use the buttons to set timeline progress(), you can go back and forth between 0 and 0.5 no problem, but as soon as you go to 1, you can't get back to 0. I've experimented with other values as well, and everything seems to work until you go to 1 for the first time. After that, when you try and return to 0 it reevaluates to 1. Does this look like a bug, or do I have my logic wrong? Thanks!
  7. 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!
  8. I'm pretty sure I was able to set negative progress in gsap2, but it doesn't seem to be working in gsap3. Any thoughts?
  9. I've been updating a working slider to GSAP 3 🙌 and am getting this breaking error: Cannot read property 'parentNode' of null. I've created a very simplified codepen where you'll see a working draggable box (for posterity) and one that uses a proxy, which causes the error. Could there be a bug in Draggable.js? The culprit is the updateMatrix() function at matrix = getGlobalMatrix(target.parentNode, true);. My proxy doesn't have a parentNode, so we're passing null here to getGlobalMatrix. If we hop over to matrix.js the getGlobalMatrix(element, inverse) function starts with if (!element.parentNode) { ... }. We're already passing the parentNode as element (which is null in my case), so it seems weird to me to check for a second (grand)parentNode. If it's helpful, the original slider was based on @OSUblake's Draggable Auto Slider which uses a proxy div as a target for the draggable. https://codepen.io/osublake/pen/veyxyQ
  10. Hiya all! i recently tried updating my site to using GSAP v3. I have a couple transitions that relied on GSAP tweening object values, it all worked perfectly, but now GSAP is updating the object with incorrect values and ending on the wrong final value. Check out my codepen for a bare minimum reproduction of the issue. The expected end state is 10000000 but GSAP is ending the tween with 121575.2192. In some cases i've seen it end with a negative number. It seems to work perfectly fine with smaller numbers under ~100000 Anyone aware of why this is happening or a way around this issue? Thank you!
  11. With the arrival of tools in Gsap3, it would be great to see some native tools and methods to optimize debugging. It would be great to see an included method to dissect complexe timeline child data. We forget sometime js offer nice visual debugging tool like console.table. It would be great to have this kind of method at hand natively in gsap. Can be better optimized by a pro from the library to correctly remap the visual hierarchy. I do not yet know all the operation internally, a lot of information difficult to decode. But a simplified version could be interesting. maybe a thing like this gsap.utils.consoleTable(timeLine,options); Any suggest about the good way to map all good thing for debugging a complexe timeLine in a console table ? the code used upper look like this. what do you think? console.table(master.getChildren().map((c)=>{return {_id:c.vars.id,_labels:JSON.stringify(c.labels),...c } }))
  12. Hi 👋 I'm using one long timeline for various React states, and the plan is to tween quickly to the correct label when my state changes. The problem is I can't figure out how to set a static duration (say, 0.5) for the tween in GSAP 3. Is there a way to do this? Also, I'd like the tween to ignore pauses I've added between each state (w/ tl.addPause()). Is this the expected behavior? Thanks!
  13. hey nice bug It convert number to string! https://codepen.io/djmisterjon/pen/YzzRRWL
  14. hum i think i get another weird bug here with my current timeLine setup in my project. All my event seem broken. I think values are not compute on .set(). Here the small context of userCase. You should see 2 console.log 1:'call:0 succeed' 2:' a:10, b:10, c:0' we don't get the log 'call:0 succeed', if the timeLine times are 0. if we add example time = 1, we get 'call:0 succeed', but set values seem not hacked, and leaved to `a:0, b:0, c:0` codepen Can you confirm, or something change in the core ?
  15. I am having issues in getting this to work properly, as I am new to GreenSock and JS in general. The active state should have the "dot" expand in width (which it does) but it's not going back when the next one is clicked.
  16. The GreenSock Animation Platform (GSAP) animates anything JavaScript can touch (CSS properties, SVG, React, canvas, generic objects, whatever) and solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery). See why GSAP is used by almost 10,000,000 sites and many major brands. Hang in there through the learning curve and you'll discover how fun animating with code can be. We promise it's worth your time. Quick links Loading GSAP Tweening Basics CSSPlugin 2D and 3D transforms Easing Staggers Callbacks Sequencing with Timelines Timeline control Getter / Setter methods Club GreenSock We'll cover the most popular features here but keep the GSAP docs handy for all the details. First, let's talk about what GSAP actually does... GSAP is a property manipulator Animation ultimately boils down to changing property values many times per second, making something appear to move, fade, spin, etc. GSAP snags a starting value, an ending value and then interpolates between them 60 times per second. For example, changing the x coordinate of an object from 0 to 1000 over the course of 1 second makes it move quickly to the right. Gradually changing opacity from 1 to 0 makes an element fade out. Your job as an animator is to decide which properties to change, how quickly, and the motion's style (known as easing - we'll get to that later). To be technically accurate, we could have named GSAP the "GreenSock Property Manipulator" (GSPM) but that doesn't have the same ring. DOM, SVG, <canvas>, and beyond GSAP doesn't have a pre-defined list of properties it can handle. It's super flexible, adjusting to almost anything you throw at it. GSAP can animate all of the following: CSS: 2D and 3D transforms, colors, width, opacity, border-radius, margin, and almost every CSS value. SVG attributes: viewBox, width, height, fill, stroke, cx, r, opacity, etc. Plugins like MorphSVG and DrawSVG can be used for advanced effects. Any numeric value For example, an object that gets rendered to an <canvas>. Animate the camera position in a 3D scene or filter values. GSAP is often used with Three.js and Pixi.js. Once you learn the basic syntax you'll be able to use GSAP anywhere that JavaScript runs. This guide will focus on the most popular use case: animating CSS properties of DOM elements. (Note: if you're using React, read this too.) If you're using any of the following frameworks, these articles may help: React Vue Angular What is GSAP Exactly? GSAP is a suite of tools for scripted animation. It includes: The GSAP core - The core of the engine which animates any property of any object. It makes use of tweens and to give you more control over your animations. Extras like time-saving plugins, easing tools, utility methods, and more. Loading GSAP Downloading GSAP