We say it all the time because it’s true: CSS and JavaScript can do amazing things. Web-based animation is an excellent example.

Not long ago, animation online was a bit rudimentary – with the exception of add-on technology, for example Flash. The movements were fundamental and often oriented in a cartoonish direction. It’s not necessarily a bad thing, it just doesn’t fit perfectly into every project.

What if you’re looking for something more realistic – almost cinematic? These days, CSS and the right JavaScript library can help you get there.

To prove it, we’ve found beautiful snippets of code that bring an element of realism to online animation. They range from complete recreation to examples that use only hints of real effects. Have!

You may also like our collection Fragments for creating neutrophil interfaces

Power on

toggle switch It has become a staple part of web design, but this snippet takes things to a new level. By adding a realistic surface and a vibrating backlight, this clean CSS animation seems to be part of the machine. Clicking the switch also produces a satisfactory on / off effect.

Look at the pen Realistic red switch (Pure CSS) by Yoav Kadosh

Something to the sea

The shimmering sea. Dolphins jump playfully. All this is formatted with… JavaScript? Properly. The special effects are just stunning. Light dancing from gentle waves, natural movements and impressive shadows all make the code work.

Look at the pen Dolphins at dawn 🐬 by Dilum

Test down

Here is a unique example parallax scrolling. A large bird’s eye view of the city is itself an eye-catcher. But move the cursor, and the perspective changes as if you were standing on top of a building as you look down at the world. It’s subtle, but so-cool.

Look at the pen Bird’s eye view of parallax by Sharna Hossain (@sharnajh)

Mother Exploring the Earth

This step takes things even deeper into the stratosphere and provides an interactive view of the Earth Three.js. A planet left to itself rotates slowly as the star field moves in the background. But there is more! Click and drag the screen to change the position of the planet to your liking. Tip: The moon is hidden somewhere.

Look at the pen 3D earth by Bryan Jones

Nintendo Switch demo

This animation of gaming devices uses a different and perhaps more classic approach. The neumorphic Nintendo Switch acts as a repository for popular game video Crossing animals: new horizons. Put it all together, and it looks like the game is being played right in front of you.

Look at the pen CSS Nintendo Switch (Box shadow + Gradient training) by Elisabeth Diang

Subtle smoke

The beauty of this snippet lies in its subtlety. The heroic area uses the eye-catching photographic background of the volcano. Slow-moving chimneys (provided by CSS) provide the perfect highlight. It shows that small details can change the world.

Look at the pen Animated hero images with a CSS clip by Mihael Tomić

Rays of light

Driving through the mountains can be inspiring. This animation brings some of the experience to the screen. The lighting effects really work. As the sun rises and sets, check for intensity, shadows and movement. You can almost feel the heat!

Look at the pen Solar Quartet – JS1K 2018 writing by Yonatan

Just look at this

Those of us who grew up in the 1980s and 1990s remember these digital watches. It felt like every child had one. This snippet not only creates the look of a classic Casio, but also an interactive one. Click the “Light” button in the upper left corner to get a night view of the screen. Ah, memories.

Look at the pen CASIO F-91W and Pure CSS !! by Manz

Imagining a new level of reality

The examples above are a fun reminder of what is possible when combining great tools with creativity. As languages, frameworks, and hardware evolve, realistic animation effects become more achievable.

Think about it: in the early 2000s, a similar realism would have required fairly solid software for both developers and users. Now it can be built and viewed without major investment or buggy browser extensions.

We hope these snippets inspire you to smooth out your web animation projects. Want to see even more? Look at us CodePen Collection more ideas.

LEAVE A REPLY

Please enter your comment!
Please enter your name here