Jump to content
GreenSock

thomas_bck

Stop animation at the end using timelineMax

Recommended Posts

Hello (first of all sorry for my poor english...)

 

I want to stop my animation (drawing svg path using timelineMax and TweenMax) at the end, I try several things but nothing works...

My code looks like this :

var tween = new TimelineMax()

.add(TweenMax.to($path1, 2.5, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path1 for 2.5
.add(TweenMax.to($path2, 1, {strokeDashoffset: 0, ease:Linear.easeNone}))   // draw path2 for 1
.add(TweenMax.to($path3, 1.2, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path3 for ...
.add(TweenMax.to($path4, 1.5, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path4 for ...
.add(TweenMax.to($path5, 1.7, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path5 for ...
.add(TweenMax.to($path6, 1.7, {strokeDashoffset: 0, ease:Linear.easeNone}))  // draw path6 for ...
.add(TweenMax.to($path7, 1.5, {strokeDashoffset: 0, ease:Linear.easeNone}))  // draw path7 for ...
.add(TweenMax.to($path8, 0.3, {strokeDashoffset: 0, ease:Linear.easeNone}))  // draw path8 for ...
.add(TweenMax.to($path9, 0.2, {strokeDashoffset: 0, ease:Linear.easeNone})); // draw path9 for ...

someone have an idea ?

 

Thank you !

 

Thomas

Link to comment
Share on other sites

Thanks to both of you,

 

I don't kill my timeLIne but I tried to stop using TimelineMax({onComplete:Myfunction}) and it works. 

Is it better to use .kill() ?

Link to comment
Share on other sites

if you will not to use that timeline/tween again you can kill that , if it were otherwise don't use kill().

  • Like 1
Link to comment
Share on other sites

just an additional tip, you don't need to use add() for what you are doing. 

this will work fine and less code:

 

tween.to($path1, 2.5, {strokeDashoffset: 0, ease:Linear.easeNone}) // draw path1 for 2.5
.to($path2, 1, {strokeDashoffset: 0, ease:Linear.easeNone})   // draw path2 for 1
.to($path3, 1.2, {strokeDashoffset: 0, ease:Linear.easeNone}) // draw path3 for ...
.to($path4, 1.5, {strokeDashoffset: 0, ease:Linear.easeNone}) // draw path4 for ...
.to($path5, 1.7, {strokeDashoffset: 0, ease:Linear.easeNone}) // draw path5 for ...
.to($path6, 1.7, {strokeDashoffset: 0, ease:Linear.easeNone})  // draw path6 for ...
.to($path7, 1.5, {strokeDashoffset: 0, ease:Linear.easeNone})  // draw path7 for ...
.to($path8, 0.3, {strokeDashoffset: 0, ease:Linear.easeNone}) // draw path8 for ...
.to($path9, 0.2, {strokeDashoffset: 0, ease:Linear.easeNone});

docs for TimelineLite.to() http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/to/

  • Like 3
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×