Jump to content
Search Community

is there an easier way to do this animation?

iammarkmulvey test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Sorry didn't explain that well. I only want to change the color of some of the lines (from bottom to top) and is there a simpler way to target which lines for example GrayLine_38 thru GrayLine_01, or GrayLine_38 thru GrayLine_10, rather than what I did.



Link to comment
Share on other sites

Looks like @mikel & @Shaun Gorneau have you pretty well covered on how to do this animation by  adding some classes, but I thought I'd throw out another suggestion so you'll have some options. If you want to animate part of the array and it's sequential, loops are great for that type of work. Instead of using a stagger tween, you can loop through the part of the target array that you want to animate and use the variable from your loop count to create a delay for each tween. You could also use this method to create new tweens and add them to a master timeline. Here's a really basic example of how that works.


See the Pen GmzRNM by PointC (@PointC) on CodePen


Using this method, you wouldn't have to add a new class to your elements. As I mentioned though, the elements need to be sequential for this to be a good option. I find  the majority of my SVG animation work really involves asset prep and planning. If you've got elements semantically ID'd , in the right order and grouped correctly coming out of your vector software, the actual tweening is much easier.


Hopefully that helps a little bit.


Happy tweening.


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