Jump to content


Old Plugins and TweenLite issue

Recommended Posts

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!

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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



Link to comment
Share on other sites

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, {
	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() {
		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? 

  • Like 3
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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



  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.