Jump to content
Search Community

Dissolving photo profiles

Guest hptccharge
Moderator Tag

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

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.




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) {
	        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 :)

  • 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.
  • Create New...