Jump to content


combine morph and pathDataToBezier from position to position

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



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


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

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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


Link to comment
Share on other sites

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()



  • Like 2
Link to comment
Share on other sites

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


Link to comment
Share on other sites

Thanks for the update. Have fun with the project!

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.