Jump to content
Search Community

How to make a bouncy line with Gsap

soheil22 test
Moderator Tag

Go to solution Solved by OSUblake,

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

Most anything is possible with enough work :) 

 

I would probably approach this sort of situation using canvas for performance reasons. Using a similar approach as this.

 

23 hours ago, ynamite said:

As it's a fairly small/low-budget project, do you reckon something like this would be overkill?

Most likely so. But if you just wanted to do this sort of thing to flex your animation muscles and learn a bit maybe it's worth it to you? 

 

If you do create it we'd love to see the result!

  • Like 2
Link to comment
Share on other sites

2 hours ago, ZachSaucier said:

Most anything is possible with enough work :) 

 

Good thing there is ScrollTrigger, so your general layout-idea and behaviour on scroll should be very approachable, @ynamite

 

This demo from the demo page will probably come in very handy. 

 

See the Pen rNOBLBV by GreenSock (@GreenSock) on CodePen

 

 

Happy scrrrrrolling, pirate! [ That IS Guybrush Threepwood in your profile picture, isn't it? ]

  • Like 3
Link to comment
Share on other sites

  • 2 weeks later...

Thanks so much for the feedback gals/guys and sorry for the late reply, I was a little under the weather and had to shelf my research until after the new year.

I'll give it a shot and let you know what I can come up with.

 

@ZachSaucier
I would love to flex a bit but due to time constraints and current workload I can only do so much :)

 

@mikel

awesomecakes, thanks a lot! I didn't know something like this was possible.

 

@akapowl

thanks a lot, I will most likely go this route in combination with mikel's input.
Arrrgh look behind you, a three-headed monkey!

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

Hi all

 

I'm busy coding the frontend for the aforementioned website but I have a few problems/questions.

 

Here's a simple demo pen (please view in fullscreen):

See the Pen wvzOaOB by ynamite (@ynamite) on CodePen

(please view in fullscreen)

 

  1. performance: especially in Firefox (as compared to Safari) performance is quite bad. How come? I'm guessing the path is too long/complex? Or is there something else I'm missing? Can I do anything to make it run smoother? I haven't tried simplifying the path yet. Also performance in Safari degrades the further along the path is drawn.
  2. consistent pace / control path progress: it would be nice if the path was drawn at a consistent pace/speed. At the moment the animation isn't always visible. Is there any way to control this behaviour? Or is it simply due to how the path is setup – the anchor points/path segments?
  3. Would splitting the path up into several smaller ones help? If so, how would you make sure the next path segment starts only after the current segmet (in a scrolltrigger) ends?

 

Thanks a bunch!

Link to comment
Share on other sites

Oh ... it seems it has to do with the visual size of the path. Running it in the small code pen window seems to alleviate the performance problems almost completely ... weird but interesting no?

 

Please view the pen in it's full size and glory, as that's the size I need the path to be at :)

 

As in, making it visually smaller isn't a solution.

Link to comment
Share on other sites

45 minutes ago, ynamite said:

performance: especially in Firefox (as compared to Safari) performance is quite bad. How come?

Browsers handle rendering in different methods. Some browsers perform better at some tasks than other browsers. There's nothing that you can do to fix that. 

 

You could try working around it by breaking your path up into multiple smaller paths with a tween for each and then piecing them together via your timeline.

 

46 minutes ago, ynamite said:

consistent pace / control path progress

Apply ease: "none" to your tween.

 

47 minutes ago, ynamite said:

Would splitting the path up into several smaller ones help? If so, how would you make sure the next path segment starts only after the current segmet (in a scrolltrigger) ends?

It's worth trying. To be clear the limitation isn't in GSAP at all, it's simply rendering/memory limitation of the browser. 

  • Like 3
Link to comment
Share on other sites

23 minutes ago, ZachSaucier said:

Apply ease: "none" to your tween.

 

It's already set to none in the pen above. Thanks though.

 

28 minutes ago, ZachSaucier said:

It's worth trying. To be clear the limitation isn't in GSAP at all, it's simply rendering/memory limitation of the browser. 

 

Seems strange though ... I've seen fairly complex SVG animations that are way more complex than what I'm trying to achieve, and those run buttery smooth. Not to say it's a GSAP limitation, but it does seem strange that this fairly simple animation is so performance heavy.

 

13 minutes ago, mikel said:

Don't despair. Look at this example.

 

Thanks Mikel. Unfortunately I don't see anything that would help. Also your example doesn't run very well in FF either. Looks like Firefox just doesn't handle animated SVG  paths all that well. Then again, the performance isn't great in any browser available to me, just way worse in FF, not sure why.

 

It seems this whole approach simply won't work using DrawSVG and scrollTrigger. Again, not to imply that GSAP is in any shape or form to blame,  but I still don't understand why performance is so bad in this case.

 

Thanks all!

Link to comment
Share on other sites

@ZachSaucier

 

Quick question, I've done additional testing on Windows and while it seems as though Firefox (latest version) is generally the slowest on Mac/Windows,  it's exceptionally slow on my main workstation for some reason – a well maintained 5K Retina iMac (16 GB Ram, SSD, dedicated GFX card with 2 GB Memory) I believe. It does run a little sluggish on my old Surface 3 Pro too, but still way better than on my much more powerful iMac. Weird.

 

What's funny is that even IE 11 manages adequate performance (once I got it to work). Every other browser – with the exception of FF – on the iMac/Surface draws the SVG quite smooth (as I would expect). I do feel performance degrades somewhat the further you scroll, but not too horrendously.

 

So my question is, how do you perceive the performance in the above Pen on your end? You (and the others) never mentioned what your impression in regards to the performance/responsiveness is/was?

 

In another test I tried adding another library (konva) into the mix – attempting to draw the SVG in Canvas while using ScrollTrigger. I feel like performance in Firefox is a bit better, but only slightly so (especially when scrolling by using the scrollbar, not the mouse wheel). The drawback is that the konva lib basically kills Safari as soon as scrolling happens.

FYI:

See the Pen mdroPeK by ynamite (@ynamite) on CodePen

 

I'm gonna see if splitting the path makes any difference next, but would really appreciate some help on how to control that (start path B only once the end of path A is reached). Of course, any other tips on how to improve performance is greatly appreciated.

 

I haven't quite given up yet. Thanks!

Link to comment
Share on other sites

12 minutes ago, ynamite said:

a well maintained 5K Retina iMac (16 GB Ram, SSD, dedicated GFX card with 2 GB Memory)

That again shows that it's a rendering issue - your 5K monitor has a lot of pixels to update. Again, it shows it has nothing to do with GSAP :) 

 

14 minutes ago, ynamite said:

how do you perceive the performance in the above Pen on your end?

It seems to work fine on my PC.

 

15 minutes ago, ynamite said:

would really appreciate some help on how to control that (start path B only once the end of path A is reached)

Simply sequence the tweens in a timeline with an ease of none and it should work great :) 

  • Like 2
Link to comment
Share on other sites

 

40 minutes ago, ZachSaucier said:

That again shows that it's a rendering issue - your 5K monitor has a lot of pixels to update. Again, it shows it has nothing to do with GSAP :)

 

Zach! First things first and just for the record: I love GSAP and I never implied nor meant to imply that GSAP had anything to do with it, not even close ;)  I'm simply trying to understand what's happening and to hopefully come up with a solution. That's all.

 

I could be totally wrong, but what I'm trying to achieve doesn't seem overly complex. It seems to me that animating one single SVG path shouldn't be as sluggish as it is on my end, even on a 5K screen. But again, I could be way wrong (it may just be my machine/browser/config/whatevs), it has almost 10 million pixels more to render after all so you may be absolutely right. Just hard to swallow that an older, inferior tablet without a dedicated graphics card, using a legacy browser that's what, 8 years old now, beats a much newer machine with an up to date browser.

Since all other browsers do just fine it makes me think it's neither the hardware nor the screen (resolution) that's the culprit. My money is on Firefox/my specific config.

 

40 minutes ago, ZachSaucier said:

It seems to work fine on my PC.

 

Simply sequence the tweens in a timeline with an ease of none and it should work great :) 

 

Thanks for testing. I'll check it out on my retina Macbook at home this evening, curious to see how that handles it.

 

Cool, I'll try that next.

 

Thanks a lot!

Link to comment
Share on other sites

This is what I have so far:

See the Pen wvzOgNd by ynamite (@ynamite) on CodePen

 

Performance is much better with separated paths (who would've thought).

 

I wish I had a bit more control over what happens when though, feels a little arbitrary atm – been trying to use the individual durations to gain more control but getting inconsistent results, especially the further along the animation goes.

 

Also I would've liked if initially all paths would be invisible (not yet drawn) and that the first path is drawn/animated. Only after this first path is drawn, does the rest follow by adhering to scrolltrigger. I tried doing it but it didn't work. Any ideas? Hope you know what I mean.

 

@mikel actually it was useful once I knew what it was meant for haha. Thanks man!

 

Thanks a lot!

  • Like 1
Link to comment
Share on other sites

1 hour ago, ynamite said:

I wish I had a bit more control over what happens when though, feels a little arbitrary atm

That's definitely one of the biggest difficulties of having an animation like this that draws a line as you scroll down the page. It'd make it easier if you forced a particular aspect ratio but then you wouldn't be making use of the full viewport most of the time.

 

My only real recommendation is to keep trying things to see what works for your use case :) 

Link to comment
Share on other sites

Hey @ynamite,

 

That'll be fine ...

 

Another stroke joke from my personal point of view:

Some strokes are stubborn. Some bossy. Other so simple. Some of them just disappear.

The good thing about it: It's up to you.

 

See the Pen d220dfbc43151b8f9e72e75b382ca02d?editors=1010 by mikeK (@mikeK) on CodePen

 

Mind UX: Do not address such experiments to ordinary users who only expect what they are used to. They might get confused.

 

Happy tweening ...

Mikel

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