Jump to content
Search Community

Can you distribute time evenly over timeline elements?

wcomp test
Moderator Tag

Recommended Posts

In this pen you'll notice that when the animation is triggered the top horizontal line and the vertical line move faster than the two small horizontal lines towards the bottom. That makes sense seeing as how the top horizontal line and the vertical line are longer than the bottom two lines but their times are the same. The long lines have to travel a loner distance than the smaller ones but they are both given the same time to do it. I'm curious, is there anyway to "distribute time" evenly across all the lines so that the speed of the top and vertical line are the same as the two smaller lines? The only way I know how to do this is to do do the math: Find the percentage that the smaller lines are of the largest and then take that same percentage of the TIME of the largest and apply that as the time of the smaller ones. Is there an easier way to accomplish this in GSAP? Thanks.

See the Pen dyorOye?editors=1010 by Wcomp (@Wcomp) on CodePen

Link to comment
Share on other sites

Hey wcomp. There's a few different ways you could go about this. Finding out the length of the line is a vital way of doing this programmatically.

 

However, the way you're setting up your lines a little peculiar to me. Setting up SVGs correctly is usually at least half of the battle :) 

  1. Why use percents and px values in your SVG? SVG is setup to use coordinates regardless of the space that it's in.
  2. Why use a <g> and transform on the second rect instead of just positioning it where it should be? 
  3. Why animate to chosen percents and px values instead of just creating the path to where you can animate them to their full size?
  4. Why use rects to animate what should be done using simple paths with a stroke?

Animating this sort of thing should be straightforward, especially  with GSAP's DrawSVGPlugin which can not only animate the lines for you but also get the length of each line with a built in method (so if you ever have more complex lines it's easy to calculate still). Here's a simplified version of your pen that doesn't do what the points above talk about and uses paths/DrawSVG instead:

See the Pen zYGbNRX?editors=0010 by GreenSock (@GreenSock) on CodePen

 

If you note just the ways I arguably improved your GSAP code, especially using GSAP 3:

  • Use a single gsap.set() to set the fill of all of the rects. No attr needed.
  • Use GSAP 3's defaults.
  • Use GSAP 3's condensed ease form.
  • Used simple .from() tweens instead of more explicit .fromTo() tweens.
  • Use chaining to not have to repeat the timeline name.
  • Use just 0 instead 0 + the unit in the values.

Here's your pen with just the above GSAP improvements so you can compare more directly:

See the Pen MWwxJpX?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I hope that's helpful! Let us know if you have any other questions :) 

  • Like 3
Link to comment
Share on other sites

My reasons for setting things up in that odd way have to do with the context within which I was using that code. I of course removed that context for the codepen to avoid confusion.  But even so, I will admit that there is probably a better way to achieve what I'm going for. Just going through the process now of figuring it out. However, I don't think the question I asked has been really addressed. Is there a way to do what I asked in the original post using GSAP or do you just have to do the math manually and plug in the values?

 

Or was it? I just looked at your pen and it seems to have done just that.....

Link to comment
Share on other sites

2 minutes ago, wcomp said:

Is there a way to do what I asked in the original post using GSAP or do you just have to do the math manually and plug in the values?

If you're using paths you can use DrawSVG to calculate the values for you like I demonstrate. Otherwise you will need to calculate the values yourself (using the width or height in your case). How could it know how long it should animate otherwise? I'll tell you, it can't :) 

  • Like 1
Link to comment
Share on other sites

1 minute ago, ZachSaucier said:

If you're using paths you can use DrawSVG to calculate the values for you like I demonstrate. Otherwise you will need to calculate the values yourself (using the width or height in your case). How could it know how long it should animate otherwise? I'll tell you, it can't :) 

Ok. Thanks. I responded too quickly without letting your response sink in. Thanks. Works nicely.

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...