Jump to content
Search Community

Stop animation at the end using timelineMax

thomas_bck test
Moderator Tag

Go to solution Solved by thomas_bck,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

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.
×
×
  • Create New...