Aleksei

Oh, right. I missed this fact. Thank you! I'll use your advice.

Hi! I've noticed a strange behavior of element when animating its height from "0" to "auto". In the Codepen attached you can see how the bottom padding of the <main> tag jumps at the end of unfolding animation. I've found out that this problem happens because I use box-sizing: border-box in CSS. If I switch to content-box it solves the problem, but is there a way to fix it while keeping the border-box? Please, advice. Thank you in advance.

Hi! I’d like to introduce you my personal project — a popup library, which uses GSAP 3 as animation engine: liteBox.pro It could be just another popup library among the hundred of others, if not these two points: This library doesn’t use such dependencies as: jQuery, image files and CSS. You’re dealing with only one .js file. All interface graphics is generated dynamically. There is an online constructor which allows you to design your popup visually. So you don’t need to read documentation and study API to start using it. Because the documentation is not finished yet You, guys, are the first whom I’m writing this about. Because, you, as a people who use GSAP, will benefit of this the most. As long as you’re already using GSAP in a project you’ll only have to add a small 29 kB file to your stack to make the popup work. Please, check this small introduction video of the project: P.S. And thank you very much for helping me to quickly migrate from GSAP 2 to GSAP 3 by answering my questions in this forum. The matter is that GSAP 3 was released right before I was going to publish the popup But I was too excited about GSAP 3 to publish popup as it was (on TweenMax).

Got it! Thanks. Sorry for silly questions — don't have enough experience working with ES6 modules. I was afraid that if I import GSAP to both files it will double the size of the bundle. But Webpack deals with it and uses GSAP only once. Thanks again!

Ok, I’ll check my files once again. But what if I want my_module.js to use GSAP, but don’t import it into the module itself? Let’s say, my_module.js, together with GSAP, is just one of many modules used in another JS file. (Because it seems to me that I tried this approach and it didn’t work.)

Hi! I have gsap installed as a node module. And I have Webpack which gathers all modules from stack.js and outputs minified bundle. When I load the JS bundle into the page returns error that "gsap is not defined". The gsap modules are added because bundle's size is over 90kB. stack.js import { gsap } from 'gsap'; import { CSSPlugin } from 'gsap/CSSPlugin'; import { Draggable } from 'gsap/Draggable'; import { InertiaPlugin } from 'gsap/InertiaPlugin'; gsap.registerPlugin(CSSPlugin, Draggable, InertiaPlugin); import '../build/my_module.min.js'; my_module.js (if we exclude all ES6 wrapping) looks like this: let moduleFunction = function() { 'use strict'; const hello = 'hello!'; console.log(hello); window.hello = hello; gsap.set('body > div', { backgroundColor: '#333333' }); } moduleFunction(); Whenever I call gsap methods it appears to be undefined. If I exclude gsap from my module everything works fine. Spent long time online trying to fix this, but nothing helped. What I'm doing wrong? Thanks!

It works. Thank you, @OSUblake! By the way, I had a mistake in this line if (this.endX < 300 || this.endX > -300) { previously. There should be &&. But it's fine — the issue is still reproducible.

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.

Yes! It is smooth now. I guessed that the problem is somehow related to the switching from translate to translate3d, but didn't know that the fix was so easy Thanks.

Hello, Jack Here is my demo: https://codepen.io/nordskill/pen/YzPWZyN And just in case you won't be able to reproduce the issue, here is the screen record from Chrome browser on Windows. It is 60 fps. You can see that when I start throwing picture there is some jerking animation at the beginning. Sometimes it even doesn't allow image to slide to the endX or endY coordinate and image stops. But usually, after image moves a bit, then the motion becomes smooth. I've noticed this problem in several browsers. On Windows: All browsers based on Chromium engine have this issue. Firefox seems to animate smoothly. And the Edge browser is somewhere between "Chromiums" and Firefox. There is a bit of jerking, but not so obvious. On OSX: Chrome browser animates well. And Safari acts like Edge on Windows. Here is the same demo with GSAP 2, which works fine in all browsers: https://codepen.io/nordskill/pen/QWwEdgq screen-record.mp4

@Karen, you can add timer after the mouse is clicked. And this timer will stop timeline animation whenever you want. For example, inside 'mousedown touchstart' event listener add setTimout after your tl.start() method, like this: setTimeout(() => { tl.pause(); }, 400); 400 it is your animation timing, which is 0.4. Also, I recommend you to replace tl.reverse() with a new morphSVG animation which will morph into the original state. Because a simple reverse looks unnatural.

Regarding the Draggable3 preview: I noticed that in combination with Inertia plugin the dragged element is jerking at the beginning of the drag. I don't know whether it is known issue or not, but just in case.

Having exactly the same issue in all browsers. Looking forward to the next release.

I found the solution for the case. I've changed the animate() function in the way as shown below. But I still don't get what happened in the previous example and why the bar freeze. function animate(float) { let duration = 1; let hideFunc = null; if (float >= 1) { duration = 0.2; hideFunc = hide; } gsap.to(bar, { duration: duration, degree: gsap.utils.interpolate(0, 360, float), onUpdate: drawState, onComplete: hideFunc }); }

Oh, right, it's just a stupid mistake from my side ☺️ But why the bar doesn't actually animate back to 1?

Cool approach, Jack But OSUblake's example fits me better because I'm dealing with canvas animation. Nevertheless, I've stumbled upon another problem here. The bar.degree variable acts in a strange way. Please, check the Codepen example below. Here I use loadProgress() function to simulate XMLHTTPRequest's .progress() output. The numbers below the canvas preloader are showing the length of progress bar on each update. As you can see the weird thing happens at the end (after 80% is loaded). The bar stops and the actual value reaches 0. I can't get what causes this. This didn't happen with GSAP 2 before. https://codepen.io/nordskill/pen/OJPNwRb

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

Wow, yes, this helped. Thank you. We now can animate between string properties — that's cool!

Ok, got it! It's now clear about the TweenLite. Then, please, help me with the second question. I'm animating gradients (making transition from gradient1 to gradient2) like this: var gradient1 = { name: 'gradient-start', color0: 'rgba(32,36,45,1.0)', color1: 'rgba(32,36,45,1.0)', color2: 'rgba(54,61,73,1.0)', color3: 'rgba(99,112,127,1.0)', color4: 'rgba(223,227,228,1.0)', pos0: '0%', pos1: '52%', pos2: '68%', pos3: '81%', pos4: '95%' }; var gradient2 = { name: 'gradient-finish', color0: 'rgba(37,48,62,1.0)', color1: 'rgba(37,48,62,1.0)', color2: 'rgba(37,48,62,1.0)', color3: 'rgba(113,121,129,1.0)', color4: 'rgba(223,227,228,1.0)', pos0: '0%', pos1: '0%', pos2: '0%', pos3: '25%', pos4: '62%' }; TweenMax.to(gradient1, 1, { colorProps: { name: gradient2.name, color0: gradient2.color0, color1: gradient2.color1, color2: gradient2.color2, color3: gradient2.color3, color4: gradient2.color4, pos0: gradient2.pos0, pos1: gradient2.pos1, pos2: gradient2.pos2, pos3: gradient2.pos3, pos4: gradient2.pos4, }, ease: Power3.easeOut, onUpdate: applyProps }); function applyProps() { wrapper.firstElementChild.style.background = 'linear-gradient(180deg, ' + gradient1.color0 + gradient1.pos0 + ',' + gradient1.color1 + gradient1.pos1 + ',' + gradient1.color2 + gradient1.pos2 + ',' + gradient1.color3 + gradient1.pos3 + ',' + gradient1.color4 + gradient1.pos4 + ')'; }

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!

Thank you!

Hi! In the new gsap v.3 I saw the possibility to set default settings for timeline object. Is there a way to set the same for gsap object for a case like this: gsap.to(masterElem, { duration: 1, // default scale: 1.1, ease: 'elastic' // default }); gsap.to(section, { duration: 1, // default scale: 1.2, ease: 'elastic' // default }); gsap.to(text, { duration: 1, // default rotation: 5, scale: 0.9, ease: 'elastic' // default });

Oh, I see. Thanks anyway!

Hello, I've accidentally* found out that ThrowPropsPlugin plugin has such properties (or events) as onThrowUpdate and onThrowComplete. But they're not documented anywhere. Is there something like a full API reference for all methods and properties for all the modules? Especially required for the ThrowPropsPlugin. Thanks! * I was looking through code examples of some people on Codepen and noticed them using these properties.

Wow! insertAdjacentHTML solves the problem and does exactly what I meant when thought about += with innerHTML.