Jump to content
GreenSock

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

is there an easier way to do this animation?

Recommended Posts

I'd look at using stagger for something like that with a .01 offset (instead of the delays you currently have). I don't have time to fork your pen at the moment, but here's some info on stagger.

 

https://greensock.com/docs/#/HTML5/GSAP/TweenMax/staggerFrom/

 

With stagger, you can do that whole animation with one tween.

 

Happy tweening.

:)

  • Like 4
Link to comment
Share on other sites

I think something like this could work for you. Note ... I had to reorder your polygons in the DOM so that they would animate in order.

 

See the Pen XRoVOE?editors=0110 by sgorneau (@sgorneau) on CodePen

 

  • Like 5
Link to comment
Share on other sites

Thank you guys. Another question. Is there a more efficient way to define which # Grayline I want to change the gray color to green?

 

See the Pen wdRpEK by markmulvey (@markmulvey) on CodePen

 

Link to comment
Share on other sites

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.

 

Thanks!

Link to comment
Share on other sites

Hi iammarkmulvey,  

 

If You give the specific lines a certain class-name you could use the staggerTo or a set Tween.

Link to comment
Share on other sites

Something like this would work

 

See the Pen vmbYGx?editors=0011 by sgorneau (@sgorneau) on CodePen

 

Edit: Just as mikel suggested ... I put a class on the green lines that should be "on" via the staggerTo.

Edited by Shaun Gorneau
Further info
  • Like 5
Link to comment
Share on other sites

 

... and if the changing should start from bottom  bear in mind to reverse this sequence / array

 

See the Pen EmrxoP by mikeK (@mikeK) on CodePen

 

  • Like 2
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

Again thank you all but BINGO Craig.

 

Was looking for an easier way to target part of the gray lines (an array).  0 thru 8   or  3 thru 5, etc.

 

 

 

 

 

 

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