Dissolving photo profiles

[Guest hptccharge]

Hi, i am researching a dissolving profile photo effect for a client as seen here (https://www.climate.com/about/leadership#mike-stern).  It uses GSAP for the web animation (scroll down to view). I don’t see an example Pen for this. Just wondering how this really cool effect can be achieved?

 

Thanks in advance.

[Jonathan]

Hello @hptccharge  and Welcome to the GreenSock forum!

 

That effect uses canvas. And has a predefined amount of points that are received via AJAX JSON.

 

You can see that each time you click a persons name it gets the points for each person that will be animated to() from the previous persons points.

 

Click the below link to see the JSON object being passed, the object is massive containing all the points that make up the face.

 

https://s3-us-west-2.amazonaws.com/climate-com/json/portraits/mike.json

 

But GSAP can animate CSS, HTML DOM, SVG, Canvas, WEB GL, and any JS Object and property .

 

Sample of their transition function, that is just one part of their very long code compilation animating last points to current points. Found in their js_body.js file
 

 this.transition = function (portraitData) {
	        TweenMax.killChildTweensOf(portrait-canvas);
	        var duration = 2;
	        var delay = 1;

	        var tweenX = TweenMax.to(lastPortraitX,duration,currentPortrait.x);
	        var tweenY = TweenMax.to(lastPortraitY,duration,currentPortrait.y);
	        var tweenR = TweenMax.to(lastPortraitR,duration,currentPortrait.r);

	        tweenX.vars.ease = tweenY.vars.ease = tweenR.vars.ease = Power3.easeInOut;


	        portraitIndex = portraits.length-1 == portraitIndex ? 0 : portraitIndex+1;

	        tweenX.vars.onComplete = function(){
	            changeInProgress = false;
	        }
}

 

So the trick is to get each faces points mapped to create the points needed to animate last points to current points

[Carl]

Great detective work, Jonathan. Glad you are on the case!