wcomp Posted March 31, 2020 Share Posted March 31, 2020 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 More sharing options...
ZachSaucier Posted March 31, 2020 Share Posted March 31, 2020 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 Why use percents and px values in your SVG? SVG is setup to use coordinates regardless of the space that it's in. Why use a <g> and transform on the second rect instead of just positioning it where it should be? Why animate to chosen percents and px values instead of just creating the path to where you can animate them to their full size? 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 3 Link to comment Share on other sites More sharing options...
PointC Posted March 31, 2020 Share Posted March 31, 2020 4 minutes ago, ZachSaucier said: Setting up SVGs correctly is usually at least half of the battle It's actually 99.3% of the battle. 3 Link to comment Share on other sites More sharing options...
wcomp Posted March 31, 2020 Author Share Posted March 31, 2020 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 More sharing options...
ZachSaucier Posted March 31, 2020 Share Posted March 31, 2020 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 1 Link to comment Share on other sites More sharing options...
wcomp Posted March 31, 2020 Author Share Posted March 31, 2020 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 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