Rotating SVG with Tween

[Raymond Chong]

Hi all,

 

I've made a SVG image and i wanted to rotate the outer circles to the square box whenever i clicked a particular color. For example, if i clicked on the red circle the wheel will rotate so that the red circle will be in the square box. I tried using this code but when i click on my circles the wheel is not moving at all. 

document.getElementById("wheel").addEventListener('click',function(){
		TweenLite.to("#Layer_1", 0.5, {rotation:"40"})
    })

I tried referring to but still had no idea how to apply it to my project.

 What should i do to make my project works?

This is my first time using GSAP 😉.

Thanks in advance.

 

See the Pen bGVrMXz by lemon55699 (@lemon55699) on CodePen

[GreenSock]

Welcome to the forums, @Raymond Chong. I noticed several problems:

1. You didn't load GSAP at all. (Looks like you loaded anime.js instead...a completely different library)
2. You applied the same ID to a bunch of elements (that's invalid markup in your SVG/HTML)
3. You were listening for a click on the whole SVG, but you want a different action to be taken based on which element is clicked, so you should add your event listener to each one.
4. You had no logic in place to figure out the appropriate rotation/angle. 

I quickly put together what I assume you wanted: 

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

 

Does that help? 

 

I'm curious - is this for a class or something? 

[Raymond Chong]

Hi, first of all thank you very much for helping me out.

1. Actually i tried using other library as i had never experience of using external library. I was actually using Tweenlite before using anime.js.
2. Because i thought i need to have the same ID for those elements to rotate all together.
3.  & 4.  Never thought about that and i thought i was using gsap wrongly.

But still you did exactly what i wanted. And sure that helps. Thank you very much.

I did this is because I just wanted to try out more and learn new stuff other than html, css and javascript that was thought in class.😉

 

 

[Bobby18]

Hello Guys

 

I am using this attractive work but having more stripes.

 

14 stripes,

 

but my clicked stripe is not stopping on fixed position it is changing everytime.

 

can anyone guide?

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅