Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Mastering MeteorJS Application Development

You're reading from   Mastering MeteorJS Application Development MeteorJS makes full-stack JavaScript Application Development simple – Learn how to build better modern web apps with MeteorJS, and become an expert in the innovative JavaScript framework

Arrow left icon
Product type Paperback
Published in Dec 2015
Publisher
ISBN-13 9781785282379
Length 298 pages
Edition 1st Edition
Languages
Tools
Arrow right icon
Authors (2):
Arrow left icon
Jebin BV Jebin BV
Author Profile Icon Jebin BV
Jebin BV
Arturas Lebedevas Arturas Lebedevas
Author Profile Icon Arturas Lebedevas
Arturas Lebedevas
Arrow right icon
View More author details
Toc

Table of Contents (11) Chapters Close

Preface 1. Building a MeteorJS Web Application FREE CHAPTER 2. Developing and Testing an Advanced Application 3. Developing Reusable Packages 4. Integrating Your Favorite Frameworks 5. Captivating Your Users with Animation 6. Reactive Systems and REST-Based Systems 7. Deploying and Scaling MeteorJS Applications 8. Mobile Application Development 9. Best Practices, Patterns, and SEO Index

Animation using MeteorJS packages with Velocity.js

There are a few packages that help us perform animation. In this section, we will see how to perform page transition on every route change. Also, we will see how to animate elements using a MeteorJS package.

Animation packages that support page transitions are mostly router-specific. We will use the ccorcos:transitioner package that is specific to iron-router. Let's resume our animation party.

Create a MeteorJS application, such as AnimationPartyTransition. Add the iron:router and ccorcos:transitioner packages to the application. Remove the hello template-related code totally from the .js and HTML files. We need a layout that will be rendered by iron-router. Add the following layout code to AnimationPartyTransition.html:

<template name="homeLayout">
  {{> yield}}
</template>

To demonstrate page transitions, we need two routes. Add the following routes to the client block inside AnimationPartyTransition.js:

  Router...
lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image