Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
gareth

SVG linear fill tween multiple stops

Recommended Posts

I am trying to transition a fill of a svg shape through a few different gradients. At the moment I have it working so the shape changes to the same new color for each stop, but is it possible to change each stop color independent ? Thanks! 

See the Pen WNoxoLP?editors=1010 by garethj (@garethj) on CodePen

Link to comment
Share on other sites

Hi!

you can check

or this answer

 

 

Link to comment
Share on other sites

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

3 hours ago, ZachSaucier said:
  • It's best to avoid using .fromTo()s whenever you can. In this case you can just use a .from() instead.

 

Somewhat off-topic, but why should fromTo be avoided?

Link to comment
Share on other sites

TL;DR: it's more work for GSAP and it's harder to maintain as a developer.

 

But it's not like you should never use it. Just opt for relative tweens (.to and .from) instead.

  • Thanks 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

very cool, thank you - did not know you could loop a tween in a forEach like that. 

 

Link to comment
Share on other sites

5 minutes ago, gareth said:

you could loop a tween in a forEach

To be clear, it's just a loop through an array. And inside of the loop we are creating a new tween for our timeline. 

Link to comment
Share on other sites

yes, sorry that's what I meant. 

Link to comment
Share on other sites

  • 4 months later...

This has been great. I'm needing to animate the offset of the gradient stops. Basically they want a white color to shimmer across some svg from left to right. Nothing I'm doing seems to work. Any suggestions?

Link to comment
Share on other sites

I'd probably apply a gradient to a <rect> element or something and then just animate the x or y position. Maybe a bit of masking? 

Hard to tell without reference/

 

Why don't you start a new thread with a minimal demo?

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