animate your website with velocity hp://...
TRANSCRIPT
![Page 1: Animate your website with Velocity hp:// velocityjs…schd.ws/hosted_files/2017hdc/04/Velocityjs.pdf · Animate your website with Velocity hp:// velocityjs.org/#vmd ... Play animaons](https://reader034.vdocuments.mx/reader034/viewer/2022051800/5acc4d1f7f8b9a63398cbe30/html5/thumbnails/1.jpg)
1370NW114thSt#300|DesMoines,IA50325|515.225.0920|spindustry.com
AnimateyourwebsitewithVelocityhHp://velocityjs.org/#vmd
![Page 2: Animate your website with Velocity hp:// velocityjs…schd.ws/hosted_files/2017hdc/04/Velocityjs.pdf · Animate your website with Velocity hp:// velocityjs.org/#vmd ... Play animaons](https://reader034.vdocuments.mx/reader034/viewer/2022051800/5acc4d1f7f8b9a63398cbe30/html5/thumbnails/2.jpg)
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
![Page 3: Animate your website with Velocity hp:// velocityjs…schd.ws/hosted_files/2017hdc/04/Velocityjs.pdf · Animate your website with Velocity hp:// velocityjs.org/#vmd ... Play animaons](https://reader034.vdocuments.mx/reader034/viewer/2022051800/5acc4d1f7f8b9a63398cbe30/html5/thumbnails/3.jpg)
Non-profesional programming
9/10/17 ConfidenQalityNoQce:ThisdocumentcontainsconfidenQalinformaQonforuseonlybytheintendedrecipients.Spindustry|1370NW114thSt#300|DesMoines,IA50325|515.225.0920|spindustry.com 3
![Page 4: Animate your website with Velocity hp:// velocityjs…schd.ws/hosted_files/2017hdc/04/Velocityjs.pdf · Animate your website with Velocity hp:// velocityjs.org/#vmd ... Play animaons](https://reader034.vdocuments.mx/reader034/viewer/2022051800/5acc4d1f7f8b9a63398cbe30/html5/thumbnails/4.jpg)
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
![Page 5: Animate your website with Velocity hp:// velocityjs…schd.ws/hosted_files/2017hdc/04/Velocityjs.pdf · Animate your website with Velocity hp:// velocityjs.org/#vmd ... Play animaons](https://reader034.vdocuments.mx/reader034/viewer/2022051800/5acc4d1f7f8b9a63398cbe30/html5/thumbnails/5.jpg)
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
![Page 6: Animate your website with Velocity hp:// velocityjs…schd.ws/hosted_files/2017hdc/04/Velocityjs.pdf · Animate your website with Velocity hp:// velocityjs.org/#vmd ... Play animaons](https://reader034.vdocuments.mx/reader034/viewer/2022051800/5acc4d1f7f8b9a63398cbe30/html5/thumbnails/6.jpg)
Why use Velocity
FasterthanjQuery SVGsupportPlayanimaQonsinreverse WorksinIE!(backtoIE8!!)CallbackfuncQonsEasingbuiltinScrolltoanelementMulQpleunitsChainingandSequencesQueue9/10/17 ConfidenQalityNoQce:ThisdocumentcontainsconfidenQalinformaQonforuseonlybytheintendedrecipients.
Spindustry|1370NW114thSt#300|DesMoines,IA50325|515.225.0920|spindustry.com 6
![Page 7: Animate your website with Velocity hp:// velocityjs…schd.ws/hosted_files/2017hdc/04/Velocityjs.pdf · Animate your website with Velocity hp:// velocityjs.org/#vmd ... Play animaons](https://reader034.vdocuments.mx/reader034/viewer/2022051800/5acc4d1f7f8b9a63398cbe30/html5/thumbnails/7.jpg)
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
![Page 8: Animate your website with Velocity hp:// velocityjs…schd.ws/hosted_files/2017hdc/04/Velocityjs.pdf · Animate your website with Velocity hp:// velocityjs.org/#vmd ... Play animaons](https://reader034.vdocuments.mx/reader034/viewer/2022051800/5acc4d1f7f8b9a63398cbe30/html5/thumbnails/8.jpg)
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
![Page 9: Animate your website with Velocity hp:// velocityjs…schd.ws/hosted_files/2017hdc/04/Velocityjs.pdf · Animate your website with Velocity hp:// velocityjs.org/#vmd ... Play animaons](https://reader034.vdocuments.mx/reader034/viewer/2022051800/5acc4d1f7f8b9a63398cbe30/html5/thumbnails/9.jpg)
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
![Page 10: Animate your website with Velocity hp:// velocityjs…schd.ws/hosted_files/2017hdc/04/Velocityjs.pdf · Animate your website with Velocity hp:// velocityjs.org/#vmd ... Play animaons](https://reader034.vdocuments.mx/reader034/viewer/2022051800/5acc4d1f7f8b9a63398cbe30/html5/thumbnails/10.jpg)
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
![Page 11: Animate your website with Velocity hp:// velocityjs…schd.ws/hosted_files/2017hdc/04/Velocityjs.pdf · Animate your website with Velocity hp:// velocityjs.org/#vmd ... Play animaons](https://reader034.vdocuments.mx/reader034/viewer/2022051800/5acc4d1f7f8b9a63398cbe30/html5/thumbnails/11.jpg)
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
![Page 12: Animate your website with Velocity hp:// velocityjs…schd.ws/hosted_files/2017hdc/04/Velocityjs.pdf · Animate your website with Velocity hp:// velocityjs.org/#vmd ... Play animaons](https://reader034.vdocuments.mx/reader034/viewer/2022051800/5acc4d1f7f8b9a63398cbe30/html5/thumbnails/12.jpg)
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
![Page 13: Animate your website with Velocity hp:// velocityjs…schd.ws/hosted_files/2017hdc/04/Velocityjs.pdf · Animate your website with Velocity hp:// velocityjs.org/#vmd ... Play animaons](https://reader034.vdocuments.mx/reader034/viewer/2022051800/5acc4d1f7f8b9a63398cbe30/html5/thumbnails/13.jpg)
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
![Page 14: Animate your website with Velocity hp:// velocityjs…schd.ws/hosted_files/2017hdc/04/Velocityjs.pdf · Animate your website with Velocity hp:// velocityjs.org/#vmd ... Play animaons](https://reader034.vdocuments.mx/reader034/viewer/2022051800/5acc4d1f7f8b9a63398cbe30/html5/thumbnails/14.jpg)
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
![Page 15: Animate your website with Velocity hp:// velocityjs…schd.ws/hosted_files/2017hdc/04/Velocityjs.pdf · Animate your website with Velocity hp:// velocityjs.org/#vmd ... Play animaons](https://reader034.vdocuments.mx/reader034/viewer/2022051800/5acc4d1f7f8b9a63398cbe30/html5/thumbnails/15.jpg)
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
![Page 16: Animate your website with Velocity hp:// velocityjs…schd.ws/hosted_files/2017hdc/04/Velocityjs.pdf · Animate your website with Velocity hp:// velocityjs.org/#vmd ... Play animaons](https://reader034.vdocuments.mx/reader034/viewer/2022051800/5acc4d1f7f8b9a63398cbe30/html5/thumbnails/16.jpg)
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
![Page 17: Animate your website with Velocity hp:// velocityjs…schd.ws/hosted_files/2017hdc/04/Velocityjs.pdf · Animate your website with Velocity hp:// velocityjs.org/#vmd ... Play animaons](https://reader034.vdocuments.mx/reader034/viewer/2022051800/5acc4d1f7f8b9a63398cbe30/html5/thumbnails/17.jpg)
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
![Page 18: Animate your website with Velocity hp:// velocityjs…schd.ws/hosted_files/2017hdc/04/Velocityjs.pdf · Animate your website with Velocity hp:// velocityjs.org/#vmd ... Play animaons](https://reader034.vdocuments.mx/reader034/viewer/2022051800/5acc4d1f7f8b9a63398cbe30/html5/thumbnails/18.jpg)
Thank you!!
• @DavidHoxeng• [email protected]
9/10/17 ConfidenQalityNoQce:ThisdocumentcontainsconfidenQalinformaQonforuseonlybytheintendedrecipients.Spindustry|1370NW114thSt#300|DesMoines,IA50325|515.225.0920|spindustry.com 18
![Page 19: Animate your website with Velocity hp:// velocityjs…schd.ws/hosted_files/2017hdc/04/Velocityjs.pdf · Animate your website with Velocity hp:// velocityjs.org/#vmd ... Play animaons](https://reader034.vdocuments.mx/reader034/viewer/2022051800/5acc4d1f7f8b9a63398cbe30/html5/thumbnails/19.jpg)
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