News

Use Velocity.js to apply slick app-like motion effects

Apply more simplified, slicker and app-like motion effects with a JavaScript library employed beautifully by mariobruschi.com

Screen-shot-2015-01-22-at-12.31.31

Velocityjs

Introduction to Velocity.js

Put most simply, Velocity.js is a JavaScript library or plugin for applying effects and transitions to HTML page elements. Written by NameLayer founder and web programming guru Julian Shapiro (check out his website for more info at julian.com), the plugin behaves just like jQuery’s $.animate() function while offering performance gains. A special UI Pack provides rapid access to an array of motion effects, which we will be using to observe a few quick animations.

Attach the Velocity.js library

To get started quickly we can add Velocity.js alongside jQuery from online CDNs, inserting the following <script> tags into the head of our page. Should you prefer you can download the velocity-master.zip plugin repository via GitHub (https://github.com/julianshapiro/velocity). You can then simply copy the core JS files into the root of your page and link locally, making sure you add jQuery also.

001 <script src="http://code.jquery.    com/jquery-1.11.0.min.js"></script>    
002 <script src="http://cdn.jsdelivr.    net/velocity/1.1.0/velocity.min.js"></    script>    
003 <script src="http://cdn.jsdelivr.    net/velocity/1.1.0/velocity.ui.min.    js"></script>

Basic page setup

We’ll use a variety of page objects for showcasing each effect and you can check the examples in the supplied index.html document on FileSilo (http://www.filesilo.co.uk/webdesigner). Fundamentally we’re using <div> elements and applying prebuilt Velocity effects, these being transitions and callouts. So our basic example page has a heading, text paragraph and email input box arranged like so and styled in the head of our page:

001 <div id="container">        
002 <div id="myHeading"><h1>Velocity.    js</h1></div>
003 <div id="textBlock">This is my     descriptive block of text…</div>
004 <div id="emailBox">Email signup:     <input type="email" value="yourname@    email.com"></input></div></div>
005 </body>

Transition effects

So to animate our heading we use JavaScript’s setInterval() method to loop a function at a desired interval. In here append .velocity() with the name of the chosen UI Pack effect, so in this instance we’re going to be using a transition effect to make the text slide downwards into view. By adding a delay we are now able to slow the effect before the next loop or chain additional .velocity() animations:

001 <script>                 
002 setInterval(function() {        
003     $("#myHeading")            
004         .velocity        
005 ("transition.slideDownIn")         
006     .delay(5000)             
007 }, 300);                
008 </script>

Invisible effects

Using that same basic principle we can change up the previous code slightly to animate our text paragraph instead. On the Mario Bruschi site, a particular velocity transition is used to ‘swing’ item description text into view. So here we’ll use the transition.flipXIn effect to mimic it, setting the durations again to change things up. If you set the opacity of your element to zero or display to none in your CSS you can ensure it is initially invisible on load:

001 <script>                
002 setInterval(function() {         
003 $("#textBlock")            
004     .velocity("transition.flipXIn")    
005     .delay(6000)             
006 }, 500);                 
007 </script>

Callout effects

One of the next aspects of the UI Pack are the range of callout effects, used to add subtle motion to call user attention. This is great for prompting data from the user for example. Here we’ll add a bounce to our email input field. Again it’s merely a case of changing the event name and setting your preferred timings. Be sure to check out julian.com/research/velocity/#uiPack for full documentation and experiment with our example page!

001 setInterval(function() {        
002     $("#emailBox").            velocity("callout.bounce");         
003 }, 5000);                
004 </script>
×