neworigin Posted August 1, 2021 Share Posted August 1, 2021 Hi there, I've been struggling with animating gradients for SVGs as well as getting them to sequence correctly on the timeline. In the attached pen I'm trying to have the items in the circle fade in from left to right and then fade out from left to right and loop. I'm animating the offsets, opacity and stop colors of the gradients and its seems to be working but I can't get them to sequence correctly. The '45' comes in at the beginning instead of after the 'pause' buttons despite using a position parameter: .to("#grad2 stop:nth-child(2)",0.5,{attr:{offset:'1'}},"+3") Is there another way to get the elements to sequence correctly or perhaps a better approach for animating the gradients to achieve what I'm looking for? See the Pen KKmeywQ by neworigin (@neworigin) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted August 1, 2021 Share Posted August 1, 2021 Hey @neworigin, I like such a combination of linearGradient and mask. See the Pen LYyrOOV?editors=1010 by mikeK (@mikeK) on CodePen Happy masking ... Mikel 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 2, 2021 Share Posted August 2, 2021 (Using transforms to animate an element with a gradient applied will be more performant than animating the actual stop values too) 1 Link to comment Share on other sites More sharing options...
neworigin Posted August 2, 2021 Author Share Posted August 2, 2021 Thanks much for the suggestion of animating a gradient mask. Definitely a better approach. See update pen below. See the Pen VwbBZeG by neworigin (@neworigin) on CodePen Any recommendations on how to do this with more of a cross dissolve? Would like to shorten or overlap between the elements as the gaps are too long currently. I tried using positioning parameters but it was cutting into the animation. 1 Link to comment Share on other sites More sharing options...
neworigin Posted August 3, 2021 Author Share Posted August 3, 2021 After looking around a bit more seemed like a better approach is to put elements into into separate timelines looping them individually with repeatDelay. Tried this but because I want the the number (45) to display longer then the bars its starts to get out of sync. Is there a way to use labels and maybe control the loop at specific times? See the Pen zYwLqmj by neworigin (@neworigin) on CodePen 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