TweenLite.to execute just once

[ZAJDAN 1 Likes (Newbie)]

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

[Sahil 2,541 Likes (Superhero)]

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 });

 

[ZAJDAN 1 Likes (Newbie)]

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.

[PointC 8,599 Likes (Superhero)]

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.

[ZAJDAN 1 Likes (Newbie)]

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