raner
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by raner
-
-
Hi, I'm trying to set multiple color changes for the fill of an svg element, and have it repeat infinitely. I've got it repeating infinitely for 2 colors, but I'm not sure how to add more than that and still have it repeat.
What I have currently:
tl.to("#sky", 5, {fill: '#EDCEB9', repeat:-1, yoyo:true, ease: Power0.easeNone}, 0)
I know the yoyo will need to be gone, but what I'd like is to go from the original blue, to #edceb9 to #33474F and then back to the original blue and continue repeating. It would also be nice to control how long each color is up for and how quick to transition between colors.
Thanks for any help!
See the Pen xZewXd by CoryDobson (@CoryDobson) on CodePen
- 1
Infinite Multi-step fill change
in GSAP
Posted
Thanks guys! I ended up solving it on my own just now before coming back to see if anyone had responded, and went basically along the same lines as above by creating a separate timeline for color changes, though the "+=1" is a nifty trick I wish I had implemented, as I accomplished the same effect but with a lot more lines of code to do it. Thanks again!