Jump to content
Search Community

Beginner question: how to imitate this effect?

madfatter 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

Hi,  

 

I'm looking into solutions on how to create a rotating icon and text circle like the one on this page http://www.autotask.com/solutions/endpoint-management   As it rotates the text in the centre changes and when an icon is clicked it goes to the top and it's corresponding text is shown.  Is this something that I could do with GreenSock?  If so, does anyone know of any tutorials that might point me in the right direction?  I used to use GreenSock years ago  with ActionScript but using it with JS is new to me.

 

Any advice would be greatly appreciated.  Thanks!

Link to comment
Share on other sites

Hi @madfatter :)

 

Looks like they're using a SVG with some png graphics for that effect. I'm not sure why they have pngs. I'd probably make the whole thing a SVG. The animation itself is pretty easy. You rotate the entire graphic, but each smaller piece rotates an equal amount in the opposite direction so they stay upright. You could then animate the text opacity at each stop. I made a similar rotation of planets as an answer to another forum question. Maybe it will give you some ideas. 

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

If you're just getting started with the JavaScript version of GSAP, I'd recommend:

https://greensock.com/jump-start-js

https://greensock.com/get-started-js

 

Once you have something started, we'd be happy to assist you with any GSAP related problems or questions. For the best possible answers, please provide a demo with any questions. Here's some info about that:

Hopefully this helps. Happy tweening.

:)

  • Like 7
Link to comment
Share on other sites

Hi,

 

Thanks for the code.  I've tried it with the my own html but I can't get it to continue to rotate past the first 60 degrees.  It moves 60 degrees and then it jumps back to 0 and moves 60 degrees again.  Here's my codepen attempt:

 

See the Pen gxowdZ by madfatter (@madfatter) on CodePen

 

I figure that I have to adjust the variables after each repeat but I'm not certain how.  Any advice would be greatly appreciated.  Thanks!

 

 

  • Like 1
Link to comment
Share on other sites

Thanks for the demo - very helpful. :)

 

When you repeat a timeline, you'll get the same thing over and over. In your case, you'd want to use relative rotations on each element. There would be a few ways to do this, but I think the easiest would be to put those two tweens into a function and then keep calling the function onComplete. I'd probably do it like this:

 

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

 

Hopefully that helps. Happy tweening.

:)

  • Like 5
Link to comment
Share on other sites

@PointC Thanks!  That's great.  I can use all the help I can get.

 

I have to figure out which icon is currently at the top and make it "active" in the css and things like that as well as trigger tweens from the side for a corresponding text box for each icon. I know I'll need some click events and onStart calls but I'm still figuring out the best way to deal with it all. What you've provided is really helpful.

  • Like 1
Link to comment
Share on other sites

I've managed to get it this far:

 

See the Pen gxowdZ by madfatter (@madfatter) on CodePen

 What I want to achieve is when an icon is clicked everything stops and the clicked icon goes to the top (or the rotator fades out and when it fades in the icon is at the top )  and the appropriate box slides in and after the delay the rotation continues. But I can't get things to stop and I think it's because I'm calling spinMe() at the end of spinMe().  I was wondering if I recreated the rotator as a timeline in an infinite loop with timeline labels for each icon. Then paused the timeline when the icon was clicked and then resumed at the appropriate label - would that be possible a way to do this? I just want to avoid rebuilding it in that fashion and then discovering that it was a bad idea.  Thanks for any advice

 

  • Like 1
Link to comment
Share on other sites

Look like you're making progress. Nice work. :)

 

You could certainly use labels and a repeating timeline and then tween to the appropriate label when the user clicks. The only drawback that I see to that approach would be that each block of text would animate in/out as you move the rotator around to the clicked icon. That's assuming the text block animations would be part of the timeline. Maybe those are functions that get called? I'm not sure how you're planning that part. 

 

Just curious - I assume you're trying to match the website you linked to in your first post in this thread? I noticed theirs rotates to the clicked icon via the shortest possible route. Is that what you'd like to see happen? Also, what happens after a user clicks and the rotator turns to that position? Is there a short pause and then the auto play starts again or does it just stay in that position? 

 

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

Once the circle gets to the position, there would be a pause and then the rotation would resume from that point.  If the rotator used the shortest possible route that would be great but I think that may be too ambitious for me.

 

To tween the timeline to the clicked icon would I pause, seek and resume? Or reverse the timeline? I'm still familiarizing myself with what's possible. Loading the text blocks as functions seems like a good idea. Thanks!

Link to comment
Share on other sites

If you want to give the 'shortest route' animation a try, GreenSock has a great plugin for you. The DirectionalRotationPlugin might be just the solution you're looking for. 

https://greensock.com/docs/Plugins/DirectionalRotationPlugin

 

Here's the GreenSock pen showing it in action:

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

If you're going to go the 'timeline and labels' route, I'd recommend using the .tweenTo() method of TimelineMax. You can then tween to a particular label quite easily. More info:

https://greensock.com/docs/TimelineMax/tweenTo()

 

Hopefully that helps. Good luck and happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

  • 2 years later...

Hey pikachu and welcome to the GreenSock forums.

 

There's several ways you could structure it and the best method probably depends on your needs. Will users be able to navigate the circle using buttons, keyboard commands, or clicking on an icon? If a user hovers an icon that is not active, should it still pause?

 

Side question: can you use GSAP 3? We recommend using it.

  • Like 2
Link to comment
Share on other sites

Hello ZachSaucier Thanks for the reply. Really appreciate it. :) when user will hover the any icon it will pause the rotation with icon and  the box information and once you leave the mouse it will start the rotation with the box info.
Can you please give me an example related to GSAP3 ? I am newbie to GSAP 3.

A big thank you to mikel. Really helpful.  :) 
mikel Can you please help me with the box info?

Once you stop the icon the correspondent box info also stops the rotating. 




 

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