Share Posted February 3, 2018 Hello... I have this simple record where I get SVG id's and manipulate with them: $(window).load(function() { var HSCPsvg = document.getElementById("hscp"); var svgDoc = HSCPsvg.contentDocument; var JinJang = svgDoc.getElementById("JinJang"); JinJang.onclick = function (){ TweenLite.to(JinJang, 6, { rotation:360, transformOrigin:"center", ease: Power0.easeNone, repeat:10, }); }; }); TweenLite works correctly, but for one click only. This method I usually use with jQuery and it works for each click. How to change it please, so that the rotation will be executed for each mouse click on the selected element? Thanx Link to comment Share on other sites More sharing options...
Share Posted February 3, 2018 On first click JinJang rotates to 360, on second click because it is already at 360 it won't animate anymore. try '+=360' but fast clicking will mess up your animation, in that case you fromTo tween and animate from 0 to 360. TweenLite.to(JinJang, 6, { rotation:'+=360', transformOrigin:"center", ease: Power0.easeNone, repeat:10 }); //or try fromTo tween TweenLite.fromTo(JinJang, 6, {rotation: 0}, { rotation: 360, transformOrigin:"center", ease: Power0.easeNone, repeat:10 }); 5 1 Link to comment Share on other sites More sharing options...
Author Share Posted February 4, 2018 12 hours ago, Sahil said: On first click JinJang rotates to 360, on second click because it is already at 360 it won't animate anymore. try '+=360' but fast clicking will mess up your animation, in that case you fromTo tween and animate from 0 to 360. TweenLite.to(JinJang, 6, { rotation:'+=360', transformOrigin:"center", ease: Power0.easeNone, repeat:10 }); //or try fromTo tween TweenLite.fromTo(JinJang, 6, {rotation: 0}, { rotation: 360, transformOrigin:"center", ease: Power0.easeNone, repeat:10 }); Thank You the syntax which You sent works well , perfect! Exist such information in some Official Documentation? 'How to pass value for parameter rotation' for example. Link to comment Share on other sites More sharing options...
Share Posted February 4, 2018 Hi @ZAJDAN I think you're looking for the CSSPlugin docs. Check the section about 2D transforms. https://greensock.com/docs/Plugins/CSSPlugin Happy tweening. 3 Link to comment Share on other sites More sharing options...
Author Share Posted February 8, 2018 On 2/4/2018 at 2:03 AM, PointC said: Hi @ZAJDAN I think you're looking for the CSSPlugin docs. Check the section about 2D transforms. https://greensock.com/docs/Plugins/CSSPlugin Happy tweening. Thank YOu 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