Jump to content
Search Community

SVG linear fill tween multiple stops

gareth test
Moderator Tag

Recommended Posts

Hey gareth.


Sure you can animate each stop color independently. You just need to make the targets of your tweens more specific. There are lots of ways of selecting them more directly. In this case I might just use the :nth-child selector.


You're also making one of the most common GSAP mistakes: using the old GSAP syntax. It's easy to upgrade to the new syntax!

See the Pen vYyKwzm?editors=1010 by GreenSock (@GreenSock) on CodePen


Or you could do this even more efficiently by using a functional value and GSAP's staggers:

See the Pen gOLMJBo?editors=1010 by GreenSock (@GreenSock) on CodePen

  • Like 3
Link to comment
Share on other sites

A few notes:

  • I think you'd greatly benefit from using GSAP's defaults. I showed how to do that in the first demo that I posted.
  • You're using the object form for your ease which is valid but we recommend the condensed string form instead: ease: "power4.inOut".
  • It's best to avoid using .fromTo()s whenever you can. In this case you can just use a .from() instead.
  • You might be interested in learning about GSAP's keyframe functionality.
  • You would likely greatly benefit from going through my article about animating efficiently. I would probably use an array of arrays for your colors and then loop through your outer array to create your tweens for each section. 
  • Like 1
Link to comment
Share on other sites

@ZachSaucier Thank you for taking the time to explain how to code more efficiently with gsap, this is what I ended up with: 


const colors1 = ['#ffae65', '#ffd898', '#acaf9d'];
const colors2 = ['#110029', '#f61317', '#ffa600'];
const colors3 = ['#ffb72f', '#e1ceb7', '#8199ac'];
const colors4 = ['#ffb72f', '#e1ceb7', '#8199ac'];
const colors5 = ['#ffb075', '#ff8c73', '#e0508c'];
const colors6 = ['#ffb075', '#ff8c73', '#e0508c'];
const colors7 = ['#00f050', '#00f050', '#00f050'];

const gradTl = gsap.timeline({defaults: { duration:1, stagger:.2,ease:"Power4.inOut" } });

gradTl.to("#gradient stop", {keyframes: [ 
  {stopColor: (i) => colors1[i]},
   {stopColor: (i) => colors2[i]},
   {stopColor: (i) => colors3[i]},
   {stopColor: (i) => colors5[i]},
   {stopColor: (i) => colors6[i]},
   {stopColor: (i) => colors7[i]}

gsap.from("#sun", 10, {y:200,ease:"Power4.inOut"})


The bit I am still unsure of is how to loop through the colors arrays in a timeline tween. 

Link to comment
Share on other sites

Good work! 


You're still using an invalid ease though - it should be ease:"power4.inOut".


4 hours ago, gareth said:

I am still unsure of is how to loop through the colors arrays in a timeline tween. 

You wouldn't loop through the array in the tween itself. I was suggesting something like this:

const colorsArr = [
  ['#ffae65', '#ffd898', '#acaf9d'],
  ['#110029', '#f61317', '#ffa600'],
  ['#ffb72f', '#e1ceb7', '#8199ac'],
  ['#ffb72f', '#e1ceb7', '#8199ac'],
  ['#ffb075', '#ff8c73', '#e0508c'],
  ['#ffb075', '#ff8c73', '#e0508c'],
  ['#00f050', '#00f050', '#00f050']

const gradTl = gsap.timeline({
  defaults: { 
    duration: 1, 
    stagger: 0.2,
    ease: "power4.inOut"

colorsArr.forEach(colors => {
  gradTl.to("#gradient stop", {
    stopColor: (i) => colors[i]

gsap.from("#sun", {
  y: 200,
  duration: 10,
  ease: "power4.inOut"


Link to comment
Share on other sites

  • 4 months later...

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.
  • Create New...