Discover the best scroll-animations websites created by professional designers. Get inspired and start planning your perfect scroll-animations web design today!

This cloneable uses a paid GSAP plugin called SplitText that can be purchased at https://greensock.com/club/

Text Animations

Text Reveal Animations on Scroll

A 3D scroll animation that lets you slowly rotate a tablet towards the viewer while scrolling. You can even use animated videos instead of a static image. I use this setup in one of my case studies in my portfolio.

Watch the Tutorial: 
https://youtu.be/yX_KhCuMx_Q

3D Tablet Scroll Animation | Free Template

3D Tablet Scroll Animation in Webflow | Free Template

A split screen design, where on the left side the text is scrolling and on the right side the project image stays sticky in the viewport and is changing depending on the project teaser and scroll position.

Remember that you have to adjust the interaction as soon as more teasers are added!

Tutorial: https://youtu.be/iJzYIk34qPM

Sticky Project Teaser Image Scroll Animation

In this Webflow tutorial I will show you how to create a scroll animation with a 3D perspective. With a few tricks you can even make 2D objects look like 3D and bring a wow effect into your website.‍ To make the whole thing scale smaller easily, I use the Fluid Design System on the desktop breakpoint (see custom-CSS embed element).

Watch the tutorial here: https://youtu.be/NNGW2IlfNxA

3D Scroll Animation in Webflow

Here is a simple scroll animation; the purpose is to indicate to the user the page is scrollable. This may seem like second nature to scroll web pages but surprisingly not always.

Scroll Indicator Animation

Site code and tutorial from https://tympanus.net/codrops/2022/05/31/scroll-animation-ideas-for-image-grids/

https://twitter.com/Skylartkitchen

Made with GSAP and Scrolltrigger

Scroll Animation for Image Grids

scroll-animation-image-grid

This is a free clonable horizontal hero section for any project you want to develop in the future.

We used only Webflow interactions to animate all divs and texts.

For the settings: Make sure you have selected class Body (all-pages), go to the typography panel and apply 1vw for it.

Font Used: Rosemode

Feel free to use these interactions in any of your projects.

Much more will come!

Hope you like it! :)

Scroll & Text Animations

Got inspired by a simple animation on Snackable Copy Tips. It is super easy to replicate and it works on any device. 

Sign up for the lesson: www.webflowtips.com/b/how-to-animate-scroll-text-animation-1

If you have any questions feel free to comment.

P.S 🙂 🙌 - Like or follow if this was useful for you.

Snackable Copy Tips Scroll Animation

Scroll Text Animation #1

The project was made to help a forum question > https://forum.webflow.com/t/how-do-i-set-up-this-custom-code-scroll-animation/78314

Scroll icon animation

I created this effect to help someone out, and I thought I'd make it cloneable in case anyone else wants to use it! I also decided to spice it up a little with some more Animations & sections :)

Discover scroll animations websites built by the Webflow community

Discover scroll animations websites built by the Webflow community