Smooth Scrolling Image Effects

A small set of ideas on animating images and other elements while smooth scrolling a page.
SmoothScrollingEffects_featured

From our weekly sponsor: Design every part of your website with the brand new Divi Theme Builder. Try it for free.

Picking up on our last tutorial on how to add smooth scrolling plus image animations to a page, we’d like to explore some more ideas for animations. We’ve made a small set of effects that show how you can apply some interesting transforms to elements like images and text while scrolling the page smoothly.

Inspirations for some of the effects come from Jesper Landberg’s smooth scroll with skew effect demo, Manuel Rovira’s Dribbble shot Lusaxweb Home and Jo Mor’s website.

The animations are powered by TweenMax.

Attention: Note that the demos are experimental and that we use modern CSS properties that might not be supported in older browsers.

For the demos, we’ve created different (grid) layouts with images that have decorative elements and captions.

We’ve used background images that are wrapped in a division with its overflow set to hidden, so that we can animate the scale or translate of the inner images in some examples. There are many possibilities to explore, for example, rotating the images:

SmoothScrollingEffects_01

…or adding a blend mode to one of the moving elements:

SmoothScrollingEffects_02

As you can also see in Jesper Landberg’s smooth scroll with skew effect demo, you can use the acceleration to control the transform amount. So when you scroll faster, the elements distort more.

Here’s a little GIF to show a detail of one of the animations:

smoothscrolleffect.2019-07-23 11_04_22

Note that when using the scale transform, the animations in Firefox don’t perform so smoothly.

We hope you enjoy this little set and find it inspirational.

References and Credits

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.