[A strange animation jump with "box-sizing: border-box"]

39 minutes ago, GreenSock said:

the paddingBottom is 0, thus when it forces the "height" to "auto", it's calculated with padding as 0

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

[A strange animation jump with "box-sizing: border-box"]

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.

 

See the Pen zYoWvMr by nordskill (@nordskill) on CodePen

[JS Popup Generator based on GSAP 3]

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:

 

1. 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.
2. 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).

["gsap is not defined" when bundling modules]

On 12/14/2019 at 5:08 PM, OSUblake said:

Again, that is not how modules are designed to work. You need to import gsap in every file that uses it. imports are scoped to the file, not globally.

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!

["gsap is not defined" when bundling modules]

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

["gsap is not defined" when bundling modules]

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!

[How to stop work of Inertia plugin?]

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.

[How to stop work of Inertia plugin?]

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.

 

See the Pen oNgLBJX by nordskill (@nordskill) on CodePen

[Dragging a div containing an image]

6 hours ago, GreenSock said:

Better?

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.

[Dragging a div containing an image]

Hello, Jack
Here is my demo:

See the Pen YzPWZyN by nordskill (@nordskill) on CodePen

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:

See the Pen QWwEdgq by nordskill (@nordskill) on CodePen

 

 

[Button elastic animation]

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

[Dragging a div containing an image]

On 12/11/2019 at 3:20 AM, GreenSock said:

Okay, this should be fixed in the upcoming release which you can preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable3.min.js. Thanks for pointing this out and sorry about any frustration that caused. 

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.

[Dragging a div containing an image]

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

[How to tween between two values without target object?]

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
  });

}

 

[How to tween between two values without target object?]

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

[How to tween between two values without target object?]

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.

 

See the Pen OJPNwRb by nordskill (@nordskill) on CodePen

[How to tween between two values without target object?]

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

 

See the Pen GRgZvmd by nordskill (@nordskill) on CodePen

[Old Plugins and TweenLite issue]

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

[Old Plugins and TweenLite issue]

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 + ')';
    }

 

 

[Old Plugins and TweenLite issue]

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!

[How to default settings for tween (not timeline)?]

Thank you!

[How to default settings for tween (not timeline)?]

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
});

 

[Lack of documentation on ThrowPropsPlugin]

Oh, I see. Thanks anyway!

[Lack of documentation on ThrowPropsPlugin]

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.

[GSAP doesn't work with innerHTML]

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