combine morph and pathDataToBezier from position to position

[mikel]

Hi,

 

Its allways a pleasure to code animations with GreenSnake - sorry, GreenSock.

 

 

Is there a smart solution to combine the animation parts (morph/bezier)?

Finally I want more and random positions.

 

The other - maybe not so 'green' - aspect is a more or less synchronization of audio takes and action.

 

Anyway - I´m looking forward to your hints.

 

Best regards

Manfred

See the Pen XNJgEP by mikeK (@mikeK) on CodePen

[Carl]

First, this is the best pen I've ever seen for support. Put a smile on my face during a pretty rough day. THANK YOU!

Unfortunately, I'm not so sure I understand the question or how I can help. Your code looked pretty good to me.

[mikel]

Hi Carl,

 

thanks for the honor!

 

My point: code for 3 positions may be fine, but for e.g. 5 or 7 positions and a randomized sequence I dreamed of 'staggerTo'.

Then I could handle - with my small JS knowledge - the random part.

 

For the audio handling I found another way ...

 

See the Pen WovdrZ by mikeK (@mikeK) on CodePen

 

Kind regards from Hamburg

Manfred

[Carl]

I think I understand better. Depending on how your SVG file is set up (its quite good currently) you could write a loop that goes through all the paths, gets the bezierData and then constructs a timeline like: 

 

function getHeadAnimation() {
  var head = document.querySelectorAll("#kopf01");
  var headPaths = document.querySelectorAll(".movingPath");
  var numHeads = headPaths.length;
  var tl = new TimelineMax({repeat: -1, repeatDelay:0.2, yoyo: true})
  for(var i = 0 ; i < numHeads; i++){
    var headPath = MorphSVGPlugin.pathDataToBezier(headPaths[i], {offsetX:0, offsetY:0, relative:true});
    tl.to(head, 4, {bezier: {values:headPath, type:"cubic"}, ease:Linear.easeNone})
  }
  return tl;
}


var INTRO = new TimelineMax()
INTRO.add(getHeadAnimation());

 

http://codepen.io/GreenSock/pen/bBVLom?editors=0010

[mikel]

Hi Carl,

 

that´s a smart way to build a sequence - thanks a lot.

 

My idea to randomize positions and paths is too complicated.

It demands separate heads and paths in the svg for every favored alternative.

Plus pairs which has to be randomized ...

 

I tried it, but it's too much for me. It looks great and animates fine as it is!

 

Kind regards

Manfred

[Carl]

Thanks for the update. Have fun with the project!