Particles Animation: 20 Solutions from Codepen

Particles Animation: 20 Solutions from Codepen

Experiments with canvas, a basic HTML5 element that is used to produce graphics of various kinds and scale on a web page, are gaining more and more popularity nowadays. It seems that web developers have pinned their faith in this technology, even despite the fact that it suffers from the lack of proper browser compatibility.

Intending to unlock various possibilities of this potent element the artists come up with pretty remarkable and occasionally unexpected results that strike the eye from the first seconds. One of such successful experiments that have found its practical application in website design is particles animation.

Using just the regular tools and, of course, a bit of magic of Javascript, primitive dots on the screen begin to move chaotically, bounce, dance, respond to gravity, form various shapes and even interact with users. What’s more with the help of the more powerful libraries like WebGL, Three.js or TweenMax they transform into real masterpieces that are able to grab the biggest piece of the attention pie in any interface.

If you take a look at elegant Deutser or top-notch Void, you will notice that they have one thing in common: all of them are enriched with particles-inspired centerpieces that take the user experience to the next level. They are representative examples of the stream. Aren’t they outstanding? The feature is in trend these days, so why not to get acquainted with a dozen of solutions available over at Codepen to learn from?

We have included different implementations to reflect the diversity of the direction. Explore them, and tell us which one is your favorite?

Just so you know

Sign up for a free Jotform account to create powerful online forms in minutes.

Fluid Simulation

fluid simulation
Animation by Jeff Thomas on CodePen

Creator: Jeff Thomas

GLParticle sns Icons

gl particles icons
Animation by Kenji Saito on CodePen

Creator: Kenji Saito

WebGL Particle Head

head made of particles
Animation by Robert Bue on CodePen

Creator: Robert Bue

Particle Fountain

particles fountain
Animation by Shawn G. on CodePen

Creator: Shawn G.

CSS Particle Animation 

pure css particles animation
Animation by Nate Wiley on CodePen

Creator: Nate Wiley

JavaScript Particles Animation

javascript particles animation
Animation by Roshin Jose on CodePen

Creator: Roshin Jose

Particles.js – Javascript Library

particles plugin
Animation by Vincent Garreau on CodePen

Creator: Vincent Garreau

Particles in Space

particles in space
Animation by Dean Wagman on CodePen

Creator: Dean Wagman

Text Particle

text particle
Animation by Gthibaud on CodePen

Creator: Gthibaud

Explosion Particles

Image of Explosion Particles
Animation by Explosion Al on CodePen

Creator: Explosion Al

Particle Swarm

particle swarm
Animation by Bas Groothedde on CodePen

Creator: Bas Groothedde

Particle Galaxy

particle galaxy
Animation by Sebastian Schepis on CodePen

Creator: Sebastian Schepis

Vibrating Particles

vibrating circles
Animation by Prayush S on CodePen

Creator: Prayush S

Giphy: Particles

particles gifs

Creator: Giphy

Particles.js: Stars Version

starry sky
Animation by Johan on CodePen

Creator: Johan

Particle Button made with Canvas and HTML5 

particle button
Animation by Ignacio Correia on CodePen

Creator:  Ignacio Correia

Simple Particles Animation

simple particles animation
Animation by Alexander on CodePen

Creator: Alexander

40k Particles Animated

40k particles animated
Animation by Robert Lemon on CodePen

Creator: Robert Lemon

Dynamic 3D Confetti Text Effect

dynamic 3d confetti
Animation by Rachel Smith on CodePen

Creator: Rachel Smith

Particle Orb CSS

particle orb css
Animation by Nate Wiley on CodePen

Creator: Nate Wiley

(The article was first published in June 2016 and has been updated to make sure all links and resources are still valid.)

When a spreadsheet isn’t enough for your team
Nataly is an internet entrepreneur and an amateur web designer and developer from Sevastopol, Ukraine. She is running a blog for web designers and developers where you can find some inspirational and useful stuff. In her spare time she reads books, unveils the secrets of the world and plays volleyball.

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.