Jump to content


Back with Gradient : Changing offset value

Go to solution Solved by Diaco,

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 everybody ! 


How are you there ? 

Since my last post here, I improved a lot of things and I changed color of my illustration (not yet in function of the local time, but it's coming ! ), thank's to Diaco.AW   ;)

Here is the codepen attached to this topic : 

See the Pen VLpLmW%C2%A0 by BibiCoding (@BibiCoding) on CodePen


But today I'm here because I have an initial gradient with 13 children "stop", but then in the other gradient, I would like to have only 7 colors in the gradient. That's why I decided to include Jquery to select children, then to make a table for new colors that I want ( couleurCiel[] ). 


I've done a loop with the var "c" which represent a child of the gradient (incremented at the end of the loop with "c++" and the var "i" to watch the associated table. There's an other table "offset[]" with value of the new gradient offset i would like to have. But you'll see in the codepen that without changing the offset, it only change the color of the "Defaults" gradient but not it's offset, so that there is a huge black gap on the top ! 

The question is : How i could change the gradient offset and include this in my loop ? And is my code well written ? The staggerFromTo is a good solution in my case ? 

Moreover, you'll see that the animation is not really fancy, it goes one color after an other and it would be wonderfull if each children could changes at the same time (overlapping tweens ?

Thanks a lot and have a nice sunny day ( I hope for you :D  )

See the Pen VLpLmW by BibiCoding (@BibiCoding) on CodePen

Link to comment
Share on other sites

Thanks Diaco.AW  ! 

This is working well thanks, but can I include this attr:{} in StaggerFromTo method which is mine ? 

Link to comment
Share on other sites

:) yep , pls check again my codepen : 

See the Pen MwbRoL by MAW (@MAW) on CodePen

  • Like 1
Link to comment
Share on other sites

Sorry Diaco.AW I don't want to create an other post because I've got nearly the same problem now... 

I tried as far as I could to get it work but I'm not able to set the OffsetMorning (named "OffsetCielMatin") on the animation's start... It seems that colors changing is good, but on the begining of the animation there are Morning's colors but not the appropriate offset ! As a matter of fact, it's only the MidDayOffset which is applied (named "OffsetCielMidi")

Check this out here

See the Pen VLpLmW?editors=101 by BibiCoding (@BibiCoding) on CodePen

It's the hardest part of my project, but it seems to be a good training...


Link to comment
Share on other sites

  • Solution

:) Pls check this out : 

See the Pen xGqMWE by MAW (@MAW) on CodePen

  • Like 3
Link to comment
Share on other sites

Thanks a lot Diaco.AW 

I hope that i'll not get other problems with this illustration ! Have a nice day  :-P 

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.