Jump to content
GreenSock

FrancoisH

Issue with colorProps plugin

Go to solution Solved by FrancoisH,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

 

I just started to animate a gradient using colorprops, but I have a little issue.

 

Here's my syntax :

var iconAnim = new TimelineMax();
var lineColor = {bg: "rgba(255, 255, 255, 0)"};

iconAnim.to(lineColor, 2, {colorProps:{bg: "rgba(255, 255, 255, 1)"}, onUpdate:colorizeLine, 
    onUpdateParams:["#icones"]});

function colorizeLine(element) {
   TweenLite.set(element, {background: 'linear-gradient(to top, transparent 48%,'  + lineColor.bg 
       + ' 1%, transparent 49%)'});
}

This is working one time. The function get called and the correct first step in getting my alpha up is working. I logged to the console the value of lineColor.bg and got correctly all the rgba() value set during the 2 seconds.

 

But despite calling my colorizeLine() function, it's only applied on the first time.

 

Do you have any idea why?

 

Kind regards.

See the Pen aNwLbe by francoish (@francoish) on CodePen

Link to comment
Share on other sites

  • Solution

I weren't able to solve my issue using your .set syntax, so I went another way and used jQuery to set the CSS value directly.

 $(element).css('background', ('linear-gradient(to top, transparent 48%,'  + lineColor.bg + ' 1%, transparent 49%)'));

Here's a forked working example :

See the Pen mPwBEW by francoish (@francoish) on CodePen

 

By the way, if you have any way to draw a line from the left to the right to a set position using Greensock, I would be absolutely delighted. I want to connect some aligned dots with a line coming from the left to the right through them.

Link to comment
Share on other sites

Hello FrancoisH and welcome to the GreenSock forum!

 

I am not seeing your linear-gradient animate in latest Firefox or latest Chrome with your codepen example.

 

I really wouldn't mix the jQuery css() method with GSAP. Since you will be changing CSS properties outside of GSAP!

 

The CSS gradient syntax is different for webkit and non webkit based browsers. So if you need to animate a linear or radial gradient cross browser than do the following. You also need to add the -webkit-linear-gradient for webkit based browsers, but browsers like Firefox and IE do not use the webkit prefix.

 

I think that instead of using transparent keyword, you might as well use rgba(0,0,0,0) since that is what the keyword transparent will compute to.

 

The below examples use the GSAP set() method.. and it works:

 

GSAP animating a CSS Radial Gradient example:

 

See the Pen BeJwd by jonathan (@jonathan) on CodePen

 

GSAP animating a CSS Linear Gradient example:

 

See the Pen vJwzD by jonathan (@jonathan) on CodePen

 

Hope this helps! :)

  • Like 3
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.
×