Old Plugins and TweenLite issue

[Aleksei 16 Likes (Newbie)]

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!

[GreenSock 18,251 Likes (Superhero)]

ThrowPropsPlugin was just renamed to the more intuitive "InertiaPlugin" in GSAP 3.0. 

 

ColorPropsPlugin was removed mostly because it didn't seem terribly useful these days, as the GSAP 3 core already handles colors quite well. You probably don't need the plugin at all. Can you share how exactly you were using colorProps in your v2 code? 

 

The reason the old v2 plugins are looking for TweenLite is because that was the core of the whole platform in v2, so the plugins needed to tap into that. But of course there's no more TweenLite in v3 (although we do export a TweenLite object from the core in order to maintain backward compatibility for legacy code). 

 

And no, you cannot use v2 plugins in v3 since v3 was a complete rewrite from the ground up and the plugin architecture was modernized/improved. But again, you probably don't actually need any of the v2 plugins anyway. 

[Aleksei 16 Likes (Newbie)]

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

 

 

[GreenSock 18,251 Likes (Superhero)]

Yeah, there are a bunch of ways you could do this - here's what I'd say is the simplest: 

var gradient = {value:"linear-gradient(180deg, rgba(32,36,45,1.0) 0%, rgba(32,36,45,1.0) 52%, rgba(54,61,73,1.0) 68%, rgba(99,112,127,1.0) 81%, rgba(223,227,228,1.0) 95%)"};

gsap.to(gradient, {
	duration:1,
	value: "linear-gradient(180deg, rgba(37,48,62,1.0) 0%, rgba(37,48,62,1.0) 0%, rgba(37,48,62,1.0) 0%, rgba(113,121,129,1.0) 25%, rgba(223,227,228,1.0) 62%)",
	ease: "power3",
	onUpdate: function() {
		//console.log(gradient.value);
		wrapper.firstElementChild.style.background = gradient.value;
	}
});

Since your strings have matching quantities (and types) of numbers/colors, you can just tap into GSAP's complex string wizardry. 

 

Of course you could animate each individual piece as its own property if you prefer. Heck, you could even use the gsap.utils.interpolate() and feed in two objects (start and end) and then tween a generic progress value between 0 and 1, feed that to the interpolator and it'll spit back the new object for you. Tons of  options. Here's a video that covers interpolate(): 

 

Does that help? 

[Aleksei 16 Likes (Newbie)]

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

[GreenSock 18,251 Likes (Superhero)]

9 hours ago, Aleksei said:

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

Yep, you've actually been able to do that for quite a while, even back to version 1.x  But the color conversion required a plugin (in the past). Now it's all in the core...which is almost half the size of the old TweenMax...yet it has a ton of new features and utility methods. ?

 

Enjoy!