Many tweens

[hellehs90 1 Likes (Newbie)]

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

[Jonathan 5,176 Likes (Superhero)]

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/

 

[PointC 8,599 Likes (Superhero)]

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.