Raymond Chong Posted April 30, 2020 Share Posted April 30, 2020 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 Link to comment Share on other sites More sharing options...
GreenSock Posted April 30, 2020 Share Posted April 30, 2020 Welcome to the forums, @Raymond Chong. I noticed several problems: You didn't load GSAP at all. (Looks like you loaded anime.js instead...a completely different library) You applied the same ID to a bunch of elements (that's invalid markup in your SVG/HTML) 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. 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? 2 1 Link to comment Share on other sites More sharing options...
Raymond Chong Posted April 30, 2020 Author Share Posted April 30, 2020 Hi, first of all thank you very much for helping me out. Actually i tried using other library as i had never experience of using external library. I was actually using Tweenlite before using anime.js. Because i thought i need to have the same ID for those elements to rotate all together. & 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.😉 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now