How to Add a CSS Reveal Animation to Your Images
Learn how to create a range of amazing CSS image reveal animations by using simple CSS properties and no extra elements or pseudo-elements.
Tag: animation
How to Animate CSS Box Shadows and Optimize Performance
Learn how to animate CSS box shadows, how each method affects browser performance, and how to decide which animation method to use.
GreenSock 3 Web Animation: Get to Know GSAP’s New Features
Learn about the great features in GreenSock Animation Platform 3, and find out how to use them to create better animations for the web.
How to Create Web Animations with Anime.js
Anime.js is one of the best JavaScript animation libraries. It's easy to use, has a simple API, and offers all you could want from a web animation engine.
Learn to Design and Animate in 3D with Zdog
We introduce you to Zdog, a library that helps you design and animate in 3D, and show you demos that you can reverse-engineer and learn from.
How to Avoid DOM Blocking in JavaScript
Web performance is a hot topic. Users expect fast, OS-like application performance. Craig Buckler explains how to do as little DOM blocking possible, and covers options for when long-running tasks can’t be avoided.
7 Performance Tips for Jank-free JavaScript Animations
Maria Antonietta Perna presents tips for optimizing JavaScript animation performance and achieving the 60fps target for smooth motion on the web.
Advanced Timing & Easing for Web Animations with Tumult Hype
Jonathan Deutsch offers an easy-to-follow guide on how you can fine tune animation timing functions with Tumult Hype, a visual tool for advanced animations.
Frame by Frame Animation Tutorial with CSS and JavaScript
Michael Romanov explains how you can build a frame by frame animation with just HTML, CSS and JavaScript which performs well and works great on all browsers
The Basics of DOM Manipulation in Vanilla JavaScript (No jQuery)
Sebastian Seitz gives you a crash course in DOM manipulation with vanilla JavaScript, abstracting the more verbose parts into a set of helper functions.
UI Motion : Can You Tell a Story with Movement?
We all think carefully about choosing a color, but – as Heider and Simmel show – the way an object moves can have a profound impact on how we feel about it.
The Movement Towards Motion in Website Backgrounds
While the background video trend might not be an automatic usability fail, that doesn't mean you can't get it wrong. Stephen looks at the wins and pitfalls.
Quick Tip: How to Make a Game Loop in JavaScript
Mark Brown demonstrates how to make a simple game loop in JavaScript, paving the way for you to start making your own browser based games and animations.
The 7 Best Resources for Web and Mobile App Animations
Dennis Williams looks at 7 of the best resources for creating animations to bring dazzle and delight to your mobile web and native apps.
How to Handle Complex Animations with Ease in Atomic.io
Animation is as important to our modern UIs as buttons and menus. Daniel shows us how to prototype complex animations with Atomic.io
5 Big Mobile Design Trends of 2015
It's 2015 and mobile browser numbers have officially surpassed their desktop cousins. Gabrielle looks at 5 mobile design trends that are shaping the market.
Animating Text with Blast.js
Jérémy Heleine introduces the jQuery plugin Blast.js, and how it can be used to animate individual characters, words, and sentences in blocks of text.
On Our Radar This Week: Watch Apple, and Intuitive Animations
Paul Wilkins takes a look at the best links of the week, sharing articles about styleguides, UI, and intuitive animations.
Advanced Snap.svg
This article looks at some of the advanced features of Snap.svg.
Using UIKit Dynamics in Swift to Animate Your Apps
UIKit Dynamics in iOS 8 allows you to add real-life behaviours and animations to your apps with very little code. We show you how using Swift.
Creating a Folded Paper Effect with OriDomi
This article looks at OriDomi, a front end library that applies origami folds to DOM elements.
2D Animation Tutorial Using Spine for Mobile Apps
Spine is a new 2d animation tool ideal for mobile apps. Jen Looper shows us how to get started.
Bounce.JS: Create Complex CSS Animations Fast
Getting your head around CSS animation can be tricky but Elio has a great tool to get you started. Bounce.js is free, funky and functional.
Adding CSS Animations to AngularJS Applications
This article shows how CSS animations can be incorporated into common AngularJS directives.
A Guide to the jQuery animate() Method
This article introduces some of the capabilities of the jQuery animate() method. Several basic animations are created for the reader to follow along.
On Our Radar: Android’s Material, Better Design, and Refactoring
Read On Our Radar: Android's Material, Better Design, and Refactoring and learn with SitePoint. Our web development and design tutorials, courses, and books will teach you HTML, CSS, JavaScript, PHP, Python, and more.
Incredibly Fast UI Animation Using Velocity.js
This article introduces Velocity.js, a library that aims to provide very fast JavaScript based animations.
How to Fix the Chrome Animation Flash Bug
Read How to Fix the Chrome Animation Flash Bug and learn with SitePoint. Our web development and design tutorials, courses, and books will teach you HTML, CSS, JavaScript, PHP, Python, and more.
The Animation Keyframe Gotcha
Read The Animation Keyframe Gotcha and learn with SitePoint. Our web development and design tutorials, courses, and books will teach you HTML, CSS, JavaScript, PHP, Python, and more.
CSS3 Animation and the JavaScript API
Read CSS3 Animation and the JavaScript API and learn with SitePoint. Our web development and design tutorials, courses, and books will teach you HTML, CSS, JavaScript, PHP, Python, and more.