animate your website with velocity hp://...
TRANSCRIPT
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
9/10/17 ConfidenQalityNoQce:ThisdocumentcontainsconfidenQalinformaQonforuseonlybytheintendedrecipients.Spindustry|1370NW114thSt#300|DesMoines,IA50325|515.225.0920|spindustry.com 3
Brief history of Web Anima=on
• Imageswereawesome!• Look…amovingimage(AnimatedGifs)• JavaApplets• DHTML• PluginsEverywhere!!(Flash,Shockwave,Silverlight)• HTML5(FinallyscripQngreadyforprimeQme)• WebGL(TheholygrailforanimaQon)
9/10/17 ConfidenQalityNoQce:ThisdocumentcontainsconfidenQalinformaQonforuseonlybytheintendedrecipients.Spindustry|1370NW114thSt#300|DesMoines,IA50325|515.225.0920|spindustry.com 4
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
9/10/17 ConfidenQalityNoQce:ThisdocumentcontainsconfidenQalinformaQonforuseonlybytheintendedrecipients.Spindustry|1370NW114thSt#300|DesMoines,IA50325|515.225.0920|spindustry.com 5
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.
9/10/17 ConfidenQalityNoQce:ThisdocumentcontainsconfidenQalinformaQonforuseonlybytheintendedrecipients.Spindustry|1370NW114thSt#300|DesMoines,IA50325|515.225.0920|spindustry.com 7
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
});
9/10/17 ConfidenQalityNoQce:ThisdocumentcontainsconfidenQalinformaQonforuseonlybytheintendedrecipients.Spindustry|1370NW114thSt#300|DesMoines,IA50325|515.225.0920|spindustry.com 8
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})
9/10/17 ConfidenQalityNoQce:ThisdocumentcontainsconfidenQalinformaQonforuseonlybytheintendedrecipients.Spindustry|1370NW114thSt#300|DesMoines,IA50325|515.225.0920|spindustry.com 9
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");});
9/10/17 ConfidenQalityNoQce:ThisdocumentcontainsconfidenQalinformaQonforuseonlybytheintendedrecipients.Spindustry|1370NW114thSt#300|DesMoines,IA50325|515.225.0920|spindustry.com 10
Velocity basics
PropertyMap:SingleproperQes(can’tdoCSSstyle){paddingLep:1,paddingRight:1}NOT{padding:”1111”}Supportspx,em,rem,%,deg,andvw/vhunits(remandvw/vhnotsupportedbelowIE9,vw/vhnotsupportedbelowAndroid4)
9/10/17 ConfidenQalityNoQce:ThisdocumentcontainsconfidenQalinformaQonforuseonlybytheintendedrecipients.Spindustry|1370NW114thSt#300|DesMoines,IA50325|515.225.0920|spindustry.com 11
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
9/10/17 ConfidenQalityNoQce:ThisdocumentcontainsconfidenQalinformaQonforuseonlybytheintendedrecipients.Spindustry|1370NW114thSt#300|DesMoines,IA50325|515.225.0920|spindustry.com 12
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");
9/10/17 ConfidenQalityNoQce:ThisdocumentcontainsconfidenQalinformaQonforuseonlybytheintendedrecipients.Spindustry|1370NW114thSt#300|DesMoines,IA50325|515.225.0920|spindustry.com 13
Chaining
$element.velocity({translateX:400px},{duraQon:1000}).velocity({opacity:0},{duraQon:1000}).velocity(next…).velocity(next…)
9/10/17 ConfidenQalityNoQce:ThisdocumentcontainsconfidenQalinformaQonforuseonlybytheintendedrecipients.Spindustry|1370NW114thSt#300|DesMoines,IA50325|515.225.0920|spindustry.com 14
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”);
9/10/17 ConfidenQalityNoQce:ThisdocumentcontainsconfidenQalinformaQonforuseonlybytheintendedrecipients.Spindustry|1370NW114thSt#300|DesMoines,IA50325|515.225.0920|spindustry.com 15
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);
9/10/17 ConfidenQalityNoQce:ThisdocumentcontainsconfidenQalinformaQonforuseonlybytheintendedrecipients.Spindustry|1370NW114thSt#300|DesMoines,IA50325|515.225.0920|spindustry.com 16
Callbacks
$element.velocity({width:50%},{duraQon:1500,callback:funcQon(){ alert(“Iamthecallback);}
})$element.velocity({width:50%},{duraQon:1500,callback:funcQon()
{ //dosomething //CallanotheranimaQon $element.velocity(“reverse”);}
})
9/10/17 ConfidenQalityNoQce:ThisdocumentcontainsconfidenQalinformaQonforuseonlybytheintendedrecipients.Spindustry|1370NW114thSt#300|DesMoines,IA50325|515.225.0920|spindustry.com 17
Thank you!!
• @DavidHoxeng• [email protected]
9/10/17 ConfidenQalityNoQce:ThisdocumentcontainsconfidenQalinformaQonforuseonlybytheintendedrecipients.Spindustry|1370NW114thSt#300|DesMoines,IA50325|515.225.0920|spindustry.com 18
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
9/10/17 ConfidenQalityNoQce:ThisdocumentcontainsconfidenQalinformaQonforuseonlybytheintendedrecipients.Spindustry|1370NW114thSt#300|DesMoines,IA50325|515.225.0920|spindustry.com 19