CodePen is a great place to find inspiration and see what crazy UI experiments others are coming up with. As well as this, it’s also a useful place to find educational content. In this roundup we’ll explore some cool examples of CodePens that teach us all about web animation.
1. How Keyframes Work
This CodePen illustrates how browsers read through the sequence of steps in a keyframe animation.
2. Performant CSS Animation for Beginners
When we animate with CSS we have a vast array of properties to animate. However, not all are a good idea. Animating the wrong properties can make for slow, janky animations. This example from Ian Hazelton explains how the most efficient four properties work.
3. Keyframes Animation Demo
Sometimes a simple example is all you need. This example shows how the from and to syntax can be used in a simple keyframe.
4. requestAnimationFrame Demo
In this JavaScript demo from Matt West, see how the requestAnimationFrame API can be used to play and pause.
5. How to ChartJS
A great use of inline comments that demonstrate how to create two animated charts using ChartJS.
6. HTML5 Canvas Guide for Beginners
A nicely commented guide to using Canvas, by Petr Tichy.
7. Convert GIF to CSS Animations
Sometimes you don’t need a rendered GIF to get a fancy animation effect. These CSS-only examples from Joey Cheng are a useful example of what’s possible.
8. animateTransform Examples
Chris Coyier demonstrates how to use SVG’s animateTransform.
9. CSS Transforms: 3D Example and TransitionEnd
It’s often useful to know when an animation has finished. This simple demo shows how we can use JavaScript to tell when an animation ends.
10. Switching Animation Keyframes in Media Queries
Another great one to bookmark–this example shows how we can change animations using media queries. Resize the screen to see the effect!
Bonus: CSS Motion Paths
Lastly, let’s glimpse into the future of SVG animation with this demo showing how the motion-path property allows us to create complex paths of motion for our animations.
That’s a Wrap!
These are just a handful of the demos, blogs and walkthroughs available on CodePen. CodePen isn’t just great for animation though; try searching and you’ll find all sorts of great info and demos covering all manner of web development topics. Explore, learn, and have fun!
More Animation Resources
- Get Started With Web Animation
- Adding Appeal to Your Animations on the Web by yours truly
- 9 Popular Courses on CSS Animation
- New Short Course: A Visual Guide to CSS Animation by Kezz Bracey
- Ease in to Cubic Bezier Functions in Our Coffee Break Course by Guy Routledge
No comments:
Post a Comment