Animate your website with Velocity hp://...

1370NW114thSt#300|DesMoines,IA50325|515.225.0920|spindustry.com

AnimateyourwebsitewithVelocityhHp://velocityjs.org/#vmd

David Hoxeng

@[email protected]•  Sr.ApplicaQonDeveloper/Analyst@Spindustry• Programmingprofessionallyfor20+years• MCPD

9/10/17 ConfidenQalityNoQce:ThisdocumentcontainsconfidenQalinformaQonforuseonlybytheintendedrecipients.Spindustry|1370NW114thSt#300|DesMoines,IA50325|515.225.0920|spindustry.com 2

Non-profesional programming


Brief history of Web Anima=on

•  Imageswereawesome!•  Look…amovingimage(AnimatedGifs)•  JavaApplets• DHTML• PluginsEverywhere!!(Flash,Shockwave,Silverlight)• HTML5(FinallyscripQngreadyforprimeQme)• WebGL(TheholygrailforanimaQon)


What is Velocity.js?

Velocity:therateofchangeofposi3onalongastraightlinewithrespectto3me:thederiva3veofposi3onwithrespectto3me.–Merriam-Webster

VelocityisananimaQonenginewiththesameAPIas

jQuery's$.animate().ItworkswithandwithoutjQuery.It'sincrediblyfast,anditfeaturescoloranima*on,transforms,loops,easings,SVGsupport,andscrolling.ItisthebestofjQueryandCSStransiQonscombined.– velocity.org


Why use Velocity

FasterthanjQuery SVGsupportPlayanimaQonsinreverse WorksinIE!(backtoIE8!!)CallbackfuncQonsEasingbuiltinScrolltoanelementMulQpleunitsChainingandSequencesQueue9/10/17 ConfidenQalityNoQce:ThisdocumentcontainsconfidenQalinformaQonforuseonlybytheintendedrecipients.

Spindustry|1370NW114thSt#300|DesMoines,IA50325|515.225.0920|spindustry.com 6

Already using jQuery?

Simpletoswitch:Downloadvelocity.jsChangeall$.animate()with$.velocity().That’sis.Serious…that’sit.


Velocity basics $element.velocity({

width:"500px",

property2:value2

},{

/*Velocity'sdefaultopQons*/

duraQon:400,

easing:"swing",

queue:"",

begin:undefined,

progress:undefined,

complete:undefined,

display:undefined,

visibility:undefined,

loop:false,

delay:false,

mobileHA:true

});


Velocity basics

$element.velocity({properQes:{opacity:1},opQons:{duraQon:500}})Or:

$element.velocity({p:{opacity:1},o:{duraQon:500}});Or:$element.velocity({opacity:1},{duraQon:500})


Velocity basics

jQuerycommaseperated(onlyforduraQon,easingandcompletecallback:$element.velocity(propertyMap[,duraQon][,easing][,complete]).$element.velocity({top:50},1000);$element.velocity({top:50},1000,"swing");$element.velocity({top:50},"swing");$element.velocity({top:50},1000,funcQon(){alert("Hi");});


Velocity basics

PropertyMap:SingleproperQes(can’tdoCSSstyle){paddingLep:1,paddingRight:1}NOT{padding:”1111”}Supportspx,em,rem,%,deg,andvw/vhunits(remandvw/vhnotsupportedbelowIE9,vw/vhnotsupportedbelowAndroid4)


Velocity op=ons

duraQon:400,easing:"swing",queue:"",(true,falseorcustomqueue)begin:undefined,progress:undefined,complete:undefined,display:undefined,visibility:undefined,loop:false,delay:false,mobileHA:true


Velocity commands

Fade$element.velocity("fadeIn",{duraQon:1500}).velocity("fadeOut",{delay:500,duraQon:1500});

Slide$element.velocity(”slideup",{duraQon:1500}).velocity(”slidedown",{delay:500,duraQon:1500});

Scroll$element.velocity("scroll",{duraQon:1500,easing:"spring"})$element.velocity("scroll",{container:$(“#someContainer”),duraQon:1500,easing:"spring"})Stop$element.velocity(”stop”)($(".velocity-animaQng").velocity("stop",true))

Finish$element.velocity("finish");

Reverse$element.velocity("reverse");


Chaining

$element.velocity({translateX:400px},{duraQon:1000}).velocity({opacity:0},{duraQon:1000}).velocity(next…).velocity(next…)


Anima=ng mul=ple elements

ParallelQming:$element.velocity({opacity:0},{duraQon:1000});$element.velocity({translateX:200px},{duraQon:1000});Parallelwithdelay:$element.velocity({opacity:0},{duraQon:1000});$element.velocity({translateX:200px},{delay:2000,duraQon:1000});Oneaperanother:$element.velocity({opacity:0},{duraQon:1000,queue:true});$element.velocity({translateX:200px},{duraQon:1000,queue:true});$element.velocity(“reverse”);


Sequences

CleanerwaytogrouplargeanimaQonsSyntax:

Arrayof Element(e),properQes(p),opQons(o)

varseq=[

{e:$element,p:{lep:90%},o:{duraQon:500}}, {e:$element,p:{translateZ:40px},o:{duraQon:500}}, {e:$element,p:{opacity:0},o:{duraQon:800,display:false}}, ];

$.Velocity.RunSequence(seq);


Callbacks

$element.velocity({width:50%},{duraQon:1500,callback:funcQon(){ alert(“Iamthecallback);}

})$element.velocity({width:50%},{duraQon:1500,callback:funcQon()

{ //dosomething //CallanotheranimaQon $element.velocity(“reverse”);}

})


Thank you!!

• @DavidHoxeng• [email protected]


Links

hHp://velocityjs.org/-VelocitywebsitehHps://codepen.io/GreenSock/pen/pmknI-SpeedtesthHp://easings.net/-Easingslist(IgnoreelasQcandbounce)hHps://codepen.io/dhoxeng/pen/OjYZQW-SimpleexampleshHps://codepen.io/julianshapiro/pen/wmtEH-SVGexamplehHps://codepen.io/julianshapiro/pen/kBuEi-ScrollexamplehHps://codepen.io/collecQon/tIjGb/-largecollecQonofcodepenexampleshHp://velocityjs.org/#vmd-VelocityMoQonDesigner


Animate your website with Velocity hp://...

Documents

Transcript of Animate your website with Velocity hp://...