GSAP Animation

KioSIgn WP includes the full version of the GSAP animation library, with the ability to enable different GSAP plugins. 

https://css-tricks.com/writing-smarter-animation-code/

https://www.freecodecamp.org/news/the-beginners-guide-to-the-greensock-animation-platform-7dc9fd9eb826/

TweenMax.set(“#stage, #luke, #darth, #chewie, #r2d2”, {autoAlpha:0});

var master1 = newTimelineMac=x({});
var mydelay = 1
var myease = Power3.easeInOut

 

var tl = new TimelineLite;
tl.to(“selector”, animtime, { property:value, property:value, ease:easingVariant}, offset)
tl.to(“#rectangle”, 2, { x:100, y:75, backgroundColor:“#000000”, ease:Power4.easeIn})”

TweenLite.defaultEase = Power3.easeInOut;

var master = new TimelineMax({delay:0.5, repeat:-1, repeatDelay:0.5});
var mt = 0.85;
var es = Power2.easeOut;

TweenMax.set(“#demo”, {autoAlpha:1});
TweenMax.set(“.bottomFighter”, {rotation:180, y:758, transformOrigin: “center center”});
TweenMax.set(“#stage, #luke, #darth, #chewie, #r2d2”, {autoAlpha:0});

function flyBy() {
var tl = new TimelineMax();
tl.add(“fighter”);
tl.from(“.bottomFighter, .topFighter”, 0.1, {autoAlpha:0}, “fighter”);
tl.to(“.smallLine”, 1, {attr:{x1:749, x2:751}, ease:es});
return tl;
}

function bladeCut() {
var tl = new TimelineMax();
tl.staggerFrom(“#saber path, #saber rect, #saber circle”, 0.6, {scale:0, transformOrigin: “center center”, ease:Elastic.easeOut.config(1, 0.5)}, 0.05);
tl.from(“#bladeMaskRect”, 0.8, {y:512});
tl.to(“#saber”, 2, {rotation:360, svgOrigin:”750 500″}, “spin”);
tl.from(“#stageOutline”, 2, {drawSVG:0}, “spin”);
tl.to(“#bladeMaskRect”, 0.5, {y:512, ease:es});
tl.to(“#saber”, 0.25, {autoAlpha:0, ease:Linear.easeNone});
return tl;
}

function leiaStage() {
var tl = new TimelineMax({id:”Leia”});
tl.to(“#stage”, 0.5, {autoAlpha:1});
tl.staggerFrom(“#leia path”, 1.1, {scale:0, transformOrigin: “center center”, ease:Elastic.easeOut.config(1, 0.5)}, 0.15);
tl.to(“.leiaEye”, 0.15, {scaleY:0, repeat:3, yoyo:true, transformOrigin:”center center”});
return tl;
}

function leiaToLuke() {
var tl = new TimelineMax({id:”Leia To Luke”});
tl.to(“#leiaHead”, mt, {morphSVG:”#lukeHead”}, 0);
tl.to(“#leftBun”, mt, {morphSVG:”#leftSideHair”, fill:”#be9664″}, 0);
tl.to(“#rightBun”, mt, {morphSVG:”#rightSideHair”, fill:”#be9664″}, 0);
tl.to(“#leiaHair”, mt, {morphSVG:”#lukeTopHair”, fill:”#be9664″}, 0);
tl.to(“#leiaNose”, mt, {morphSVG:”#lukeNose”, fill:”#ba8d79″}, 0);
tl.to(“#leiaLeftEye”, mt, {morphSVG:”#lukeLeftEye”, fill:”#2980b9″}, 0);
tl.to(“#leiaRightEye”, mt, {morphSVG:”#lukeRightEye”, fill:”#2980b9″}, 0);
tl.set(“#luke”, {autoAlpha:1});
tl.set(“#leia”, {autoAlpha:0});
tl.from(“#dimple”, 0.25, {autoAlpha:0, ease:es});
tl.to(“.lukeEyes”, 0.25, {x:-30});
tl.to(“.lukeEyes”, 0.45, {x:30}, “+=0.25”);
tl.to(“.lukeEyes”, 0.25, {x:0}, “+=0.25”);
return tl;
}

function lukeToDarth() {
var tl = new TimelineMax({id:”Luke to Darth”});
tl.to(“#lukeHead”, mt, {morphSVG:”#darthHead”, fill:”#323232″}, 0);
tl.to(“#leftSideHair”, mt, {morphSVG:”#leftTriangle”, fill:”#505050″}, 0);
tl.to(“#rightSideHair”, mt, {morphSVG:”#rightTriangle”, fill:”#505050″}, 0);
tl.to(“#lukeTopHair”, mt, {morphSVG:”#darthHelmet”, fill:”#000″}, 0);
tl.to(“#lukeLeftEye”, mt, {morphSVG:”#darthLeftEye”, fill:”#000″}, 0);
tl.to(“#lukeRightEye”, mt, {morphSVG:”#darthRightEye”, fill:”#000″}, 0);
tl.to(“#lukeNose”, mt, {morphSVG:”#rightTriangle”, fill:”#505050″}, 0);
tl.to(“#dimple”, mt, {morphSVG:”#leftTriangle”, fill:”#505050″}, 0);
tl.set(“#darth”, {autoAlpha:1});
tl.set(“#luke”, {autoAlpha:0});
tl.from(“#maskBase”, 0.5, {scale:0, transformOrigin:”center center”, ease:es});
tl.from(“#maskVerticals”, 0.35, {scaleY:0, transformOrigin:”center bottom”, ease:es }, “-=0.1”);
tl.from(“#helmetHighlight, #highlights”, 0.35, {autoAlpha:0, ease:Linear.easeNone});
return tl;
}

function darthToChewie() {
var tl = new TimelineMax({id:”Darth to Chewie”});
tl.to(“#darthHead”, mt, {morphSVG:”#chewieHead”, fill:”#503c1d”}, 0);
tl.to(“#darthHelmet”, mt, {morphSVG:”#chewieFace”, fill:”#a57d52″}, 0);
tl.to(“#leftTriangle”, mt, {morphSVG:”#nose”, fill:”#323232″},0);
tl.to(“#rightTriangle”, mt, {morphSVG:”#noseShadow”, fill:”#503c1d”, opacity:0.35}, 0);
tl.to(“#darthLeftEye”, mt, {morphSVG:”#chewieLeftEye”, fill:”#503c1d”}, 0);
tl.to(“#darthRightEye”, mt, {morphSVG:”#chewieRightEye”, fill:”#503c1d”}, 0);
tl.to(“#maskBase”, mt, {morphSVG:”#chewieMouth”, fill:”#323232″}, 0);
tl.to(“#maskVerticals, #helmetHighlight, #highlights”, 0.25, {autoAlpha:0 }, 0.25);
tl.to(“#chewie”, 0.75, {autoAlpha:1, ease:Linear.easeNone});
tl.from(“.botTeeth”, 0.35, {scaleY:0, transformOrigin:”center bottom”}, “teeth”);
tl.from(“.upperTeeth”, 0.35, {scaleY:0, transformOrigin:”center top”}, “teeth”);
tl.set(“#darth”, {autoAlpha:0});
return tl;
}

function chewieToR2() {
var tl = new TimelineMax({id:”Chewie to R2D2″});
tl.to(“.botTeeth”, 0.35, {scaleY:0, transformOrigin:”center bottom”}, 0);
tl.to(“.upperTeeth”, 0.35, {scaleY:0, transformOrigin:”center top”}, 0);
tl.to(“#chewieEyes”, 0.25, {autoAlpha:0, ease:Linear.easeNone}, 0);
tl.to(“#chewieFace”, mt, {morphSVG:”#r2Head”, fill:”#bebebe”}, 0);
tl.to(“#chewieHead”, mt, {morphSVG:”#r2Head”, fill:”#bebebe”}, 0);
tl.to(“#nose”, mt, {morphSVG:”#eyeBase”, fill:”#2980b9″},0);
tl.to(“#noseShadow”, mt, {morphSVG:”#r2Eye”, fill:”#323232″, opacity:1}, 0);
tl.to(“#chewieLeftEye”, mt, {morphSVG:”#topLeftBlue”, fill:”#2980b9″}, 0);
tl.to(“#chewieRightEye”, mt, {morphSVG:”#topRightBlue”, fill:”#2980b9″}, 0);
tl.to(“#chewieMouth”, mt, {morphSVG:”#bottomStripe”, fill:”#2980b9″}, 0);
tl.to(“#r2d2”, 0.75, {autoAlpha:1, ease:Linear.easeNone});
tl.set(“#chewie”, {autoAlpha:0});
tl.staggerFrom(“#decals path”, 0.9, {scale:0, transformOrigin: “center center”, ease:Elastic.easeOut.config(1, 0.5)}, 0.1);
tl.to(“#r2EyeHighlight”, 0.4, {x:20, y:20, repeat:1, repeatDelay:0.8, yoyo:true, ease:Power2.easeInOut});
return tl;
}

function ending() {
var tl = new TimelineMax();
tl.to(“#r2d2”, 0.5, {autoAlpha:0});
tl.to(“#stage, #stageOutline”, 1, {attr:{r:0}, ease: Power3.easeIn}, 0);
return tl;
}

master.from(“#name”, 2, {autoAlpha:0, ease:Linear.easeNone});
master.add( flyBy() );
master.add( darthToChewie(), “+=1” );

GSDevTools.create({paused:true, id:”SVG Wars”});

function leiaToLuke() {
var tl = new TimelineMax({id:”Leia To Luke”});
tl.to(“#leiaHead”, mt, {morphSVG:”#lukeHead”}, 0);
tl.to(“#leftBun”, mt, {morphSVG:”#leftSideHair”, fill:”#be9664″}, 0);
tl.to(“#rightBun”, mt, {morphSVG:”#rightSideHair”, fill:”#be9664″}, 0);
}


Parts of an Animation:

selector (element, class or ID)

 

Animation Properties:

stagger delay

Animation Duration

Repeat

duration: 2

delay: -=3 

POSITION

x, y, left, right, top, bottom

transformOrigin: “50% 50%”

transformOrigin: “center center”