Jump to content
GreenSock

Lynx

Swinging Rope ?

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

This is what I want to do, and this is what I've started.  I want the origin of the rectangle at the top, now there is a tween for changing the color, I want to leave that in place, although I don't understand why it's not working ?

 

I want the rectangle to swing like a rope, that is why I want the origin at the top so it's pinned; I looked within the documentation for a GSAP plugin which does some swinging dynamics but couldn't find anything, I hope it's possible with GSAP ?

 

Ps. Does this forum have email notification ? I never receive any notifications to my posts ?

Link to comment
Share on other sites

I fixed a few things to get it functioning; this should help you get started: 

See the Pen wWzKgO by anon (@anon) on CodePen

 

 

Edit: these are the things I changed, for future reference:

 

  • Changed var tl = TweenMax.to(); to var tl = new TimelineMax(); 
  • Changed backgroundColor to fill
  • Adjusted the transform origin so that it swings from the top
  • Set the SVG overflow to visible so that the shape still shows as it rotates outside of the edges of the SVG
  • Changed the class to an ID
Link to comment
Share on other sites

I fixed a few things to get it functioning; this should help you get started: 

See the Pen wWzKgO by anon (@anon) on CodePen

Thanks.:)  Is it possible to make the SVG behave not as a stiff rope ?

Link to comment
Share on other sites

I wonder why my example doesn't play in JsBin, I even tried in CodePen, no result :(

Link to comment
Share on other sites

I don't know how you would apply wave physics ti a single block maybe if it was composed of particles.  I'm sure you can do something like that in Flash and Jack is possibly the most accomplished Flash programer there is.  It's well over my head.

Link to comment
Share on other sites

How about a particle represents a non-existent segment in the SVG file lined up vertically in my example, then you animate the points ?

Link to comment
Share on other sites

I thought class work ?

Link to comment
Share on other sites

Before I go back to how to make a swinging rope, I've been digging though the documentation, for TweenMax and CSSPlugins and I can't find anywhere that states that elements can only be ID, not classes ?

Link to comment
Share on other sites

Classes are normally fine; when I was troubleshooting your particular example, it didn't work until I changed it to an ID.

 

I think I see the issue now; you were using a very old version of TweenMax (1.11.7).  When I updated that to GSAP 1.18.5 in the same JsBin, classes work fine: https://jsbin.com/cahulavowo/edit?html,css,js,output

 

I think Codepen is generally better than JsBin because they make it easy to load the newest versions of TweenMax & all GSAP plugins.

  • Like 1
Link to comment
Share on other sites

I switched to CodePen, don't understand why

See the Pen jrMZNY by Sheep (@Sheep) on CodePen

isn't working ?

You're using an ID in your HTML, but referencing a class in your JS.  

 

Either change "rect id" to "rect class" in the HTML, or change ".sqone" to "#sqone" in the JS.

  • Like 3
Link to comment
Share on other sites

I switched to CodePen, don't understand why this isn't working ?

 

Not sure if revisions were being made but the biggest problem is that the Pen loads TweenMax 1.18.4 and you had your own <script> tag loading 1.11.7 which may have pre-dated the support for string selectors like ".sqone". Also when you use color names, they need to be strings ("blue" not blue).

 

Also, CodePen automatically wraps what you type in the HTML panel in a <body> tag and adds the <head> stuff too.

 

Please see this working demo:

 

http://codepen.io/GreenSock/pen/RRGqBY

  • Like 3
Link to comment
Share on other sites

As Carl mentioned, you've got an old file loading and it's still there.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.7/TweenMax.min.js"></script> // remove this 

You also still have all the extras in the HTML panel. You don't need the body tag or head elements. All you need is this:

<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
x="0px" y="0px" width="21.7px" height="206.7px" viewBox="0 0 21.7 206.7" 
xml:space="preserve">
<style type="text/css">
.sqone{fill:#3E53A4;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
</style>
<rect class="sqone" x="1" y="1" width="19.7" height="204.7"/>
</svg>

Make those changes or fork Carl's pen and everything will work just fine.

  • Like 1
Link to comment
Share on other sites

Creating a swinging rope is pretty advanced. You might be able to create a swinging rope by changing the points on a quadratic Bezier. You can drag the points around on this example to see how it would work.

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

 

However, figuring out the rotation of the points will require some trig, like in this thread.

http://greensock.com/forums/topic/13292-rotating-cubic-bezier-control-points-and-morphsvg/

 

It's doable, but not something GSAP does out of the box.

  • Like 1
Link to comment
Share on other sites

Ah yes, trig, been dealing alot with that lately. I may have figured a solution, in the mean time this example, the rope is not dynamic on it's own; in other words it doesn't swing without manual interaction ? 

Link to comment
Share on other sites

It can be done without manual interaction (Draggable). Here's a quick modification where I tween the x values on p2 and p3. It's the start of a swing!

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

 

Notice how the path is stretching. I used arbitrary y values. To prevent that you would need to do some trig to calculate the y value for the given x values.

  • Like 2
Link to comment
Share on other sites

Hello Lynx, regarding your codepen link above you said did not work... http://greensock.com/forums/topic/14591-swinging-rope/#entry62327

 

You have to add the following CSS property on your <svg> element, since the SVG was being clipped when it was rotated from its top origin

svg {
  overflow:visible;
}

Now you see it being animated since the overflow is visible:

 

See the Pen KMNMgY by jonathan (@jonathan) on CodePen

 

:)

  • Like 1
Link to comment
Share on other sites

It can be done without manual interaction (Draggable). Here's a quick modification where I tween the x values on p2 and p3. It's the start of a swing!

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

 

Notice how the path is stretching. I used arbitrary y values. To prevent that you would need to do some trig to calculate the y value for the given x values.

 

That is is exactly what I'm after. My goal was to export numerous SVG files and with GSAP morph rotate and morph, this is more effective. :)

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