Jump to content
GreenSock

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

How to make a bouncy line with Gsap

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

Hello there!

 

I was wondering ,how could I make a bouncy line with Gsap?

I mean, like when we move the mouse over it, it stretches in the same Y or X position of the mouse.

 

best example is this website :

waaark.com/

 

which is made by using Gsap as an animation Engine,

 

when you hover the mouse on the right side elements, you can see it has a stretching effect, which is awesome!

I wanna know, how could I make something like (or near) that effect,

thanks.

best regards

s.rb

Link to post
Share on other sites

Hello soheil22

 

If you inspect that page they are using canvas that is inside a div with the class wave-canvas. That canvas element takes is like a overlay over the page so when you mousemove over events to trigger the animation based on where your mouse is.

 

Maybe someone here has something similar to share with you. Im sure it could also be done in SVG, but canvas looks like a nice option.

 

:)

  • Like 1
Link to post
Share on other sites

The site is very awesome! Great animation! 

 

This is done with SVG the sites is loaded by SVG animation together with GSAP

Here's the animation done by manipulating the svg!

h_1474301940_8191185_37c1afb8c2.png

  • Like 1
Link to post
Share on other sites

Canvas, SVG, doesn't matter, it's the same process. You're manipulating a Bezier curve. That site looks like it's using a simple quadratic Bezier curve. This post might help you understand how it works. You can replace the tween.js code with GSAP.

http://codepen.io/rachsmith/post/grokking-quadratic-bezier-curves-in-svg

Thank you so much  OSUblake

it was the exact thing that I wanted, 

and it really explained it so well, so I think that I could understand each line of the code!

Thanks again for mentioning this page.

  • Like 1
Link to post
Share on other sites

Just to expand on that post I linked to, here is how to calculate the control point for a quadratic Bezier at a set point. 

 

See the Pen c298db6e99eef0b9258968aa148a6d0c by osublake (@osublake) on CodePen

 

 

And here's a simplified version of that springy path demo using GSAP.

 

See the Pen 613dea251165576962577e898b1a4ce7 by osublake (@osublake) on CodePen

 

 

  • Like 6
Link to post
Share on other sites

Just to expand on that post I linked to, here is how to calculate the control point for a quadratic Bezier at a set point. 

See the Pen c298db6e99eef0b9258968aa148a6d0c?editors=0010 by osublake (@osublake) on CodePen

 

And here's a simplified version of that springy path demo using GSAP.

See the Pen 613dea251165576962577e898b1a4ce7?editors=0010 by osublake (@osublake) on CodePen

 

This is nice buddy! Thanks for this!

Link to post
Share on other sites

Just to expand on that post I linked to, here is how to calculate the control point for a quadratic Bezier at a set point. 

See the Pen c298db6e99eef0b9258968aa148a6d0c?editors=0010 by osublake (@osublake) on CodePen

 

And here's a simplified version of that springy path demo using GSAP.

See the Pen 613dea251165576962577e898b1a4ce7?editors=0010 by osublake (@osublake) on CodePen

 

It's really amazing, thank you so much for your time, I really appreciate it.

I'll try to work on my own project and make a codepen demo for the other guys with some cool effects

  • Like 2
Link to post
Share on other sites
  • 2 weeks later...

@Dipscom was asking about doing something similar, so I made this. There's a lot of code, but most of it is just boilerplate to setup all the different options. 

 

See the Pen vXZPxN by osublake (@osublake) on CodePen

 

Lot's of lines!

 

  • Like 3
Link to post
Share on other sites

Thanks, Blake. Now I can finish my interactive harp ;)

 

Great demo! Thanks for sharing.

Link to post
Share on other sites
  • 3 months later...

hello

i am curious and guess this effect is not possible with lines right?

<svg width="100%" height="100%">
  <line x1="100%" y1="0%" x2="0%" y2="0%"></line>
</svg>
Link to post
Share on other sites

Hi ani-g  :)

 

Welcome to the GreenSock forums.

 

I'm not sure what you're asking. Are you asking if you can create SVG lines with percentages? If that's the question, yes you can. You'll need a stroke and stroke-width, but that should work fine.

 

If you have other questions related to GSAP, could you start a new topic for us? When you add questions to another member's thread that is marked answered, it could easily get overlooked and we want to get you the best answers possible.

 

Happy tweening.

:)

Link to post
Share on other sites

Hi again ani-g  :)

 

I just read your question again and I think you were asking about using a line in the effect Blake was demonstrating in the thread. I got confused when you showed some code.  :blink:

 

I think this pen by Diaco could also help you.

 

See the Pen mJyZdj by MAW (@MAW) on CodePen

 

Happy tweening.

:)

  • Like 1
Link to post
Share on other sites

Yeah, I was wondering what that question was referring to because I showed I how to do that in Post #7 using a path. If you wanted sharp edges, instead of smooth curve, I guess you could use a polyline.

 

It's kind of funny how this topic was brought up again. I just saw on CodePen that the developers of waaark.com made a demo showing how they did the bouncing lines. 

 

See the Pen ENRvvq by waaark (@waaark) on CodePen

 

 

  • Like 3
Link to post
Share on other sites

hello PointC & Blake

first: thanks for your quick replies :) 

 

the reason for my question:

i wanna try to make the lines responsive (100% to viewport) and without scaling in proportion on resize.

hope you understand what i mean? ;-)

Link to post
Share on other sites

You can kind of do that using the viewBox. In the code below, assume the 100 100 in the view box is like 100% 100%.

 

<svg viewBox="0 0 100 100">
  <path d="M0,40 C20,30, 30,30, 50,40, 70,50, 80,50, 100,40" />  
</svg>

 

 

So the svg will behave like this...

 

<svg viewBox="0 0 100% 100%">
  <path d="M0%,40% C20%,30%, 30%,30%, 50%,40%, 70%,50%, 80%,50%, 100%,40%" />  
</svg>

 

 

See the Pen oBXEmr by osublake (@osublake) on CodePen

 

  • Like 1
Link to post
Share on other sites

If you don't want the stroke to scale, you can add the attribute:

vector-effect='non-scaling-stroke' 

Here's a fork of Blake's pen with that change.

 

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

 

Happy tweening.

:)

  • Like 3
Link to post
Share on other sites
  • 3 years later...
On 9/22/2016 at 11:06 AM, OSUblake said:

Just to expand on that post I linked to, here is how to calculate the control point for a quadratic Bezier at a set point. 

 

 

 

And here's a simplified version of that springy path demo using GSAP.

 

 

 

 

Hey, I'm very new to GSAP.

 

How would something like this work in GSAP 3? 

 

Thanks :)

Link to post
Share on other sites
1 hour ago, girltuesday said:

How would something like this work in GSAP 3? 

Hey girltuesday and welcome to the forums. You just have to update the syntax to GSAP 3. This is a good guide to do so:

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

  • Like 2
Link to post
Share on other sites

Thank you so much!

 

I was still including the 'tick' parameter in GSAP 3 🤦‍♂️

 

 

Link to post
Share on other sites
  • 6 months later...

I was wondering, is this effect doable with curved (bezier) paths? Or would I need physics, rigid bodies and whatnot?

 

Background:

I'm doing some reasearch for a website I'm coding next year. The idea is to have a one-page website containing 5 or so sections from top to bottom. Each section will contain an image and the image of each section should be visually connected to the image in the next section – at specific points – by a visible curved bezier path, with a stroke applied, like a cotton string leading through the website. I was thinking of using a Canvas element in the background or an SVG, not sure though.

 

The website needs to be responsive, so the path should be able to respond to changes in screen size, but always connect to specific points in each sections image and the path should follow a predetermined path (art direction purposes). So the path doesn't have to change, only resize in width/height.

 

The whole thing is really more of a gimmick, but it would be nice if the "string" could react to mouse movement in some way (similar to the examples above, like strumming a guitar). Is this at all doable with GSAP? As I said, it's not really necessary, just a neat visual touch.

As it's a fairly small/low-budget project, do you reckon something like this would be overkill? The longer I think about it, I imagine it's going to be quite a mission to achieve ...

 

Thanks for your help, ideas and/or inputs. To be clear: I'm not asking for code, just wondering whether or not it can be done and if so, which approach could work or make the most sense, respectively.
 

Something like this I suppose, just imagine images instead of text boxes

(I can create a better example if necessary, this is just an image from google):

963cb4478fadc88a9c3b10e48c395496.jpg

 

Edited by ynamite
better explanation/spelling
Link to post
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.

×