Best Animation Frameworks Notes

Popular Cross Platform Github Animation Frameworks

samir looked through the top 20 animation scripts & added them to our code base

Hover.css - Hover CSS

• [demo] (http://ianlunn.github.io/Hover/)

Re-Modal.js - Dope modal pure JS / animation animation

• [demo] (http://vodkabears.github.io/remodal/)
• [github] (http://vodkabears.github.io/remodal/)
• Note: Inject onboarding value props.

SVG Loaders - Dope svg loaders

• [demo] (http://samherbert.net/svg-loaders/)
• [github] (https://github.com/SamHerbert/SVG-Loaders)
• [supported browsers / dependencies] (http://caniuse.com/#feat=svg-smil)

Iconate.js - Transform your icons with trendy animations

• [demo] http://bitshadow.github.io/iconate/
• [github] https://github.com/bitshadow/iconate
• dependencies: any icon set!
• Note: Animations can transition value props, category pages, and cards to emphasize points. Look into verticalFlip for card transitions on the WAYS TO EARN page.

Countup.js - Numbers counting up really quickly

• [github] (https://github.com/inorganik/countUp.js)
• [demo] (http://inorganik.github.io/countUp.js/)
• Note: Effect for loading the WORK YOUR WAY UP page

Smooth Scroll - Simple animated scrolling to anchor links

• [github] (https://github.com/cferdinandi/smooth-scroll)
• [demo] (http://cferdinandi.github.io/smooth-scroll/)
• Note: Effect for horizontal scroll amongst the LEARNING pages; transitioning below the fold on vertical scroll pages.

Velocity Accelerated javascript animation

• [github] (https://github.com/julianshapiro/velocity)
• [lol they have a book on it] (http://www.amazon.com/Web-Animation-using-JavaScript-Develop/dp/0134096665)
• [demos] (http://codepen.io/collection/tIjGb/)
• Note: You can do a lot with this animation engine, it contributes fast performance across all devices.Magnific Popup could be particularly useful for the TEAM page as it transitions from clicking on a team member to their guru profile.

WOW Animations are triggered after user scrolls

• [github] (https://github.com/matthieua/WOW)
• [demo] (http://mynameismatthieu.com/WOW)
• Note: When discovering WORK YOUR WAY UP, the page scrolls to reveal the different value props with companion instructional text.

Snabbt.js Fast animations with javascript and CSS transforms
Has advantage because it will only animate things that modern browsers can animate cheaply.

• IMPORTANT: NOT IE SUPPORTED
• [github] (https://github.com/daniel-lundin/snabbt.js)
• [docs] (http://daniel-lundin.github.io/snabbt.js/index.html)
• [demo] (http://daniel-lundin.github.io/snabbt.js/cards.html)
• [demo 2] (http://daniel-lundin.github.io/snabbt.js/sticks.html)
• Note: Looking at the cards example, we can create joyful animations for stacking course or skill chips. We can even have a money animation where it flies around when a guru hits a milestone.

Parallax reacts to the orientation of your smart device, offsetting layers depending on their depth within a scene.

• [demo] (http://matthew.wagerfield.com/parallax/)
• [github] (https://github.com/wagerfield/parallax)
• Note: If we want to go hard core with the school photo backgrounds, we can create a "virtual reality" effect when tilting the device/moving the mouse to show different angles the panorama campus photo affords.

ScrollMagic Parallax A scroll interaction library

• Dependencies (velocity.js)
• [docs] (http://scrollmagic.io/docs/index.html)
• [advanced demo] (http://janpaepke.github.io/ScrollMagic/examples/advanced/parallax_scrolling.html)
• [github] (https://github.com/janpaepke/ScrollMagic)
• Note: To create cohesion scrolling across the 💯 LEARNING pages, we can animate a student icon walking across the breadcrumbs.

Quicksand Reorder and filter items with a nice shuffling animation. NOTE REQUIRES JQUERY

• [demo] (http://razorjack.net/quicksand/)
• [github] (https://github.com/razorjack/quicksand)
• Note: Sort through courses, skills, and other chips.

Vivus Javascript library to make drawing animation on svg

• [github] (https://github.com/maxwellito/vivus)
• [demo] (http://maxwellito.github.io/vivus/)
• Note: Perfect for a loading screen graphic. Equally perfect for comparing past and present progress statuses in real time.

Textillate.js Text-only CSS3 Animations

• NOTE REQUIREMENTS: jQuery, lettering.js, animate.css (heavy as fuck)
• [github] (https://github.com/jschr/textillate)
• [demo] (http://textillate.js.org/)
• Note: Would add personality to headers or greetings from the guru logo (see: mobile browser comps).

Typed JS Looks like a terminal typing code js animation

• dependencies: jquery
• [demo] (http://www.mattboldt.com/demos/typed-js/)
• [github] (https://github.com/mattboldt/typed.js)
• Note: Great if we want to create a snarky 404 page.

CTA.js Animate your 'action-to-effect' paths

• [github] (http://kushagragour.in/lab/ctajs/)
• [demo] (https://github.com/chinchang/cta.js)
• Note: Wow. Use for menu, sign up modal, and login modal transitions please.