gareth Posted February 9, 2021 Share Posted February 9, 2021 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 More sharing options...
_Greg _ Posted February 9, 2021 Share Posted February 9, 2021 Hi! you can check or this answer Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 9, 2021 Share Posted February 9, 2021 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 3 Link to comment Share on other sites More sharing options...
gareth Posted February 9, 2021 Author Share Posted February 9, 2021 thanks! this helped me a lot: See the Pen dyOXBQK by garethj (@garethj) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 9, 2021 Share Posted February 9, 2021 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. 1 Link to comment Share on other sites More sharing options...
tailbreezy Posted February 9, 2021 Share Posted February 9, 2021 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 More sharing options...
ZachSaucier Posted February 9, 2021 Share Posted February 9, 2021 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. 1 Link to comment Share on other sites More sharing options...
gareth Posted February 10, 2021 Author Share Posted February 10, 2021 @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 More sharing options...
ZachSaucier Posted February 10, 2021 Share Posted February 10, 2021 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 More sharing options...
gareth Posted February 10, 2021 Author Share Posted February 10, 2021 very cool, thank you - did not know you could loop a tween in a forEach like that. Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 10, 2021 Share Posted February 10, 2021 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 More sharing options...
gareth Posted February 10, 2021 Author Share Posted February 10, 2021 yes, sorry that's what I meant. Link to comment Share on other sites More sharing options...
IntouchGroup Posted July 1, 2021 Share Posted July 1, 2021 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 More sharing options...
Cassie Posted July 1, 2021 Share Posted July 1, 2021 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? 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now