Jump to content
GreenSock

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

Rotating circle with border arrows

Go to solution Solved by Carl,

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 friends of gsap!

This is my first post here but i suspect i will return since gsap is awsome!  8-) 

I'm trying to make a rotating circle with arrows pointing at each word.

 

Here is an image that shows what I'm trying to do. http://boxesandarrows.com/files/banda/prototyping-with/iterative_prototyping-small.gif

 

How can i achieve this? I tried using css border and images but I don't know how to apply it the correct way so the arrows rotate with the boxes as seen in the codepen. I want the arrows to basically point on each box.

 

 

Thank you for your time and keep up the good work!

 

See the Pen dXXwQy?editors=0010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

  • Solution

Hi and welcome to the GreenSock forums,

 

Not exactly sure what you need or how it relates to GSAP's capabilities.

From your question it seems like you need a way to draw the arrows or get them into you animation.

I think your best bet would be to create them as vectors in Illustrator or Sketch and export an SVG.

I did a google image search for circular arrows and came across some artwork that I dropped into that demo:

 

http://codepen.io/GreenSock/pen/375a497846169b7c014658cfb34229c6/

 

I just centered the image and rotated it with the other elements. 

 

If there is something else you need, please try to clarify.

  • Like 3
Link to comment
Share on other sites

Thank you very much for the help!

That was what i was looking for, sorry if the question did not relate so much to gsap.

I will keep that in mind in the future.

 

Thank you for your time!

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

×