Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
hellehs90

Many tweens

Recommended Posts

Hi! I have a lot of tweens I want to start and complete at the same time. Is there an easier way to do that than this code?:
 

        TweenMax.to('#charmander_path11', 2, {morphSVG:'#charmeleon_path8'});
        TweenMax.to('#charmander_path1', 2, {morphSVG:'#charmeleon_path1'});
        TweenMax.to('#charmander_path7', 2, {morphSVG:'#charmeleon_path7'});
        TweenMax.to('#charmander_path3', 2, {morphSVG:'#charmeleon_path4'});
        TweenMax.to('#charmander_path2', 2, {morphSVG:'#charmeleon_path2'});
        TweenMax.to('#charmander_path4', 2, {morphSVG:'#charmeleon_path3'});
        TweenMax.to('#charmander_path5', 2, {morphSVG:'#charmeleon_path6'});
        TweenMax.to('#charmander_path10', 2, {morphSVG:'#charmeleon_path9'});
        TweenMax.to('#charmander_path8', 2, {morphSVG:'#charmeleon_path13'});
        TweenMax.to('#charmander_path9', 2, {morphSVG:'#charmeleon_path10'});
        TweenMax.to('#charmander_path6', 2, {morphSVG:'#charmeleon_path11'});
        TweenMax.to('#charmander_path12', 2, {morphSVG:'#charmeleon_path5', fill:'#CBD4DD'});
        TweenMax.to('#charmander_path13', 2, {morphSVG:'#charmeleon_path12'});


I know you can make a timeline, but then all the tweens will happen after each other. Also, how would i repeat all those tweens without copying myself? Thanks
Link to comment
Share on other sites

Hello hellehs90, and Welcome to the GreenSock Forum!

 

You could give each tween a position parameter of zero so they play at the same time:

var tl = new TimelineMax({repeat:2});
tl.to('#charmander_path11', 2, {morphSVG:'#charmeleon_path8'}, 0)
  .to('#charmander_path1', 2, {morphSVG:'#charmeleon_path1'}, 0)
  .to('#charmander_path7', 2, {morphSVG:'#charmeleon_path7'}, 0)
  .to('#charmander_path3', 2, {morphSVG:'#charmeleon_path4'}, 0)
  .to('#charmander_path2', 2, {morphSVG:'#charmeleon_path2'}, 0)
  .to('#charmander_path4', 2, {morphSVG:'#charmeleon_path3'}, 0)
  .to('#charmander_path5', 2, {morphSVG:'#charmeleon_path6'}, 0)
  .to('#charmander_path10', 2, {morphSVG:'#charmeleon_path9'}, 0)
  .to('#charmander_path8', 2, {morphSVG:'#charmeleon_path13'}, 0)
  .to('#charmander_path9', 2, {morphSVG:'#charmeleon_path10'}, 0)
  .to('#charmander_path6', 2, {morphSVG:'#charmeleon_path11'}, 0)
  .to('#charmander_path12', 2, {morphSVG:'#charmeleon_path5', fill:'#CBD4DD'}, 0)
  .to('#charmander_path13', 2, {morphSVG:'#charmeleon_path12'}, 0);

More info and how to use found here:

 

http://greensock.com/position-parameter

 

 

You can also give each tween the same label as well.

 

repeat special property

  • repeat : Number - Number of times that the animation should repeat after its first iteration. For example, if repeat is 1, the animation will play a total of twice (the initial play plus 1 repeat). To repeat indefinitely, use -1. repeat should always be an integer.

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/to/

 

:)

  • Like 4
Link to comment
Share on other sites

Hi hellehs90 :)

 

Jonathan has some good info for you there. Labels are your friends - they make a life a lot easier.

 

I have another option for you too. If you sequentially number your paths, you can make a loop to morph all the paths. This is a CodePen I made for another forum question, but you can see how easy it would be if the start and end paths were sequential. 

 

See the Pen LNLpgB by PointC (@PointC) on CodePen

 

Hopefully that helps a bit.

 

Happy tweening.

:)

  • Like 5
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.
×