Jump to content
GreenSock

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

Beginner question: how to imitate this effect?

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!

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Hi folks,

 

It is not the universe - just a small carousel:

 

See the Pen brRqRw by mikeK (@mikeK) on CodePen

 

Thanks @PointC  for the explanatory words.

 

Enjoy tweening ...

Mikel

 

 

 

 

 

 

 

  • Like 6

Share this post


Link to post
Share on other sites

Hi @PointC,

 

I hope so. Otherwise I have to rotate ...

 

 

See the Pen wqedYx by mikeK (@mikeK) on CodePen

 

The blink has to be improved! next time ...

  • Like 5

Share this post


Link to post
Share on other sites

That certainly helps me get the ball rolling. I'll probably be back with some questions once I've had a chance to go over everything.

 

Thanks @PointC and @mikel ! 

  • Like 1

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Thanks @PointC  That's incredibly useful. I now have to add some interactivity, which hopefully I can figure out myself.  But if I continue to mess it up I'll likely be seeking some more advice ;-)

 

Thanks again!

  • Like 2

Share this post


Link to post
Share on other sites

You're welcome. Happy to help. :)

 

I'm not sure if you're planning buttons or maybe draggable interactivity, but here's a quick fork with a couple buttons to get you started. I also added an isTweening() check so the buttons won't work if things are already animating. 

 

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

 

Happy tweening.

:)

  • Like 2

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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!

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Hello Can you please tell me how to stop this rotating circle on hover of any li 's a  ???
while hovering icons i need to stop the moving circle and box info's rotation should stop too.

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


 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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. 




 

Share this post


Link to post
Share on other sites

 

Sorry @pikachu123, my carousel is a joke - a 'fake'. It just keeps turning 90 degrees.

 

See the Pen VwYboqN by mikeK (@mikeK) on CodePen

 

Your desired project is a bit more complex and complicated.

 

Happy holidays ...

Mikel

 

  • Like 3

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×