Jump to content
GreenSock

Damo

throwProps in CodePen demo pages

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

Hi,

 

Sorry I've only just started to look at this libary and have hit a problem looking at one of the demo pages:

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

 

If I take this and run it locally with no changes to the code the throwProps functionaility no longer works, I must be missing somthing really obvious, here is a hosted version of it: http://rdys.proofing5.brayleino.co.uk/ no console errors etc, unchanged but no throwProps function.

 

Thanks in advance.

 

Damo

 

Link to comment
Share on other sites

Hi Damo,

 

Welcome to the GreenSock forums.

 

ThrowPropsPlugin is a bonus plugin we provide to folks who choose to support GreenSock through the purchase of a Club GreenSock membership. We provide those CodePen demos so that you can test out the advanced features of ThrowPropsPlugin prior to purchase. Feel free to fork any of our CodePen demos and test Draggable with ThrowProps and SplitText (another premium plugin) inside of CodePen.

 

In order to use our premium plugins for your own projects you must first purchase a Club GreenSock membership (Shockingly or Business). Learn more about all the benefits of becoming a Club GreenSock memeber here: http://www.greensock.com/club/

 

Let us know if you have any further questions.

 

Happy Tweening!

 

Carl

Link to comment
Share on other sites

Hi Carl,

Thanks for the quick response, I soon realised this after reading the license statement at the top of the file, I’m just experimenting at the moment to see if this will be valid for our current project which I think it will.
 

Do you mind if I ask a couple of questions:
 

1. Will "snap" still work when not using ThrowProps, I can’t see that it does at the moment?
 

2. How would I reset the knob.rotation to 0 after complete turn so I am only dealing with the degrees 0 - 360 but yet still allowing multiple turns, i.e I don’t wan to just restrict to one turn?
 

Many Thanks

Damien

Link to comment
Share on other sites


Will "snap" still work when not using ThrowProps, I can’t see that it does at the moment?

 

 

Sorry, snap is only available when throwProps:true.

I modified the demo below to show how you can apply your own snap logic using onDragEnd:

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

 

note I set throwProps:false.

 

How would I reset the knob.rotation to 0 after complete turn so I am only dealing with the degrees 0 - 360 but yet still allowing multiple turns, i.e I don’t wan to just restrict to one turn?

 

 

the easiest route is probably just to get the current rotation of the Draggable and use a modulus operation to convert to 0-360

 

http://codepen.io/GreenSock/pen/eDxKh?editors=001

 

Glad to see you are experimenting with the CodePen demos, be sure to check out the docs too!

http://api.greensock.com/js/com/greensock/utils/Draggable.html

  • Like 2
Link to comment
Share on other sites

Hi Damien,

 

The kinetic motion snap is part of ThrowProps Plugin, ie, forcing the element to land in a specific position/angle after the throw.

 

Draggable on the other hand has a liveSnap method that works exactly as ThrowProps' snap. You can pass a function, array or object to it in order to force the element to... well snap while it's being dragged. Please check Configuration Options in the docs (almost at the top of the page):

 

http://api.greensock.com/js/com/greensock/utils/Draggable.html

 

In terms of allowing multiple turns it's quite easy, simply don't apply bounds to the Draggable instance. Be aware thought that in this particular codepen that'll mean that the element's in the right will continue to scroll up/down. Finally in terms of adjusting the instance's rotation, I'm not sure if it's possible. As far as I know the rotation parameter in the Draggable object (the one that's returned by GSAP) acts as a read-only property so you can't set a new value without modifying the element's rotation. Another possibility is create some logic in order to prevent the instance's value to be bigger than 360 and smaller than 0 and pass that value to the scroll instance in order to prevent the scroll go beyond the limits.

Link to comment
Share on other sites

Yup, Rodrigo is exactly right. Draggable.rotation is really only meant to be managed through Draggable as a read-only property that is set when you drag.

 

If you need to set the rotation via script you can target the element that is being dragged and use a set()

TweenLite.set(knob, {rotation:0})
//and then later call update on the Draggable instance
myDraggable.update();

The following demo shows how to reset the Draggable's rotation to 0 after you are done dragging:

 

http://codepen.io/GreenSock/pen/ocFdb?editors=001 (you need to open your console)

Link to comment
Share on other sites

Thank you both that's a great explanation and makes complete sense.

 

Have a good day!

Link to comment
Share on other sites

Sorry 1 more question if I may, with the demo:

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


 

I noticed it will give a negative value for rotation on anti-clockwise movement if I don’t complete an initial clockwise rotation, is it simple just to limit to 0 - 360?
 

Many Thanks.

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