Jump to content
Search Community

Draggable Spin - Making pop outs on each tick of dial

JR150 test
Moderator Tag

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, first I would like to thank the amazing creators of these products! They have been an enormous help. I am working on creating a custom version of the Draggable Spin example.

 

I have that pretty much down, but I would like to do is be able to make it so some text and a button pop up next to the section of the dial when you hit it, sort of like a watch and have it be responsive. I was a little confused on how the position of the pop ups would work and was wondering if there was a simpler way I was missing. Any help would be appreciated, thank you!

Link to comment
Share on other sites

Hi JR150 :)

 

Welcome to the GreenSock forum.

 

When you use Draggable you have several callbacks from which to choose: onDrag, onDragStart, onDragEnd etc. You can use those to trigger other animations. As far as positioning your pop-ups, that would really depend on what you're doing and more of a CSS question. Here's some more reading about Draggable:

 

https://greensock.com/docs/#/HTML5/Drag/Draggable/ 

 

If you have specific questions about your project, please provide a CodePen demo so we may better assist you. More info about that:

 

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

You should also check out the Draggable collection on CodePen:

 

http://codepen.io/collection/AtuHb/

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

Hi JR150  :)

 

Welcome to the GreenSock forum.

 

When you use Draggable you have several callbacks from which to choose: onDrag, onDragStart, onDragEnd etc. You can use those to trigger other animations. As far as positioning your pop-ups, that would really depend on what you're doing and more of a CSS question. Here's some more reading about Draggable:

 

https://greensock.com/docs/#/HTML5/Drag/Draggable/ 

 

If you have specific questions about your project, please provide a CodePen demo so we may better assist you. More info about that:

 

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

You should also check out the Draggable collection on CodePen:

 

http://codepen.io/collection/AtuHb/

 

Happy tweening.

:)

 

Thank you for the response and the resources! Okay, I got the pop outs working because of them.

 

I am trying to make it responsive now, just so it works on all devices and was having some trouble with it. I was wondering if I am missing something or doing something wrong. Any help would be greatly appreciated. 
 
Thank you!
Link to comment
Share on other sites

You just need to add your media queries to accommodate all the screen sizes. That's beyond the scope of what we can offer for help here. Our resources are limited so we have to stay focused on GSAP related questions and problems. You'll find loads of responsive design articles by Googling. 

 

Just my two cents worth: with all those pop-up labels that need to have their position recalculated for different window sizes, I'd recommend creating this project as an SVG. That way the entire SVG scales up and down as one unit. I think it would be much simpler.

 

Hopefully that helps.

 

Happy tweening.

:)

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