In this guest tutorial, Val Head uses the p5.js library to create a simple spring animation (without the use of a separate physics engine!)

This video has some audio problems towards the end. Sorry about that and I hope that you still enjoy this tutorial!

Val is a designer and web animation consultant with a talent for getting designers and developers alike excited about the power of animation. She is the author of The Pocket Guide to CSS Animations and Designing Interface Animation. She shares her passion for animation and UX by curating the UI Animation Newsletter, hosting the All The Right Moves screencast, and cohosting the Motion and Meaning podcast.


Codepen links:
The one built in this video:
Version with sliders:
Mouse chaser:

Val Head’s website:
Twitter account:
Val’s Book – Designing Interface Animation:
Web Animation Workshops:

For more Guest Tutorials and Interviews:
For more Coding Challenges:

Help us caption & translate this video!