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