Scroll animation inspiration

January 3, 2024

I have been thinking about some of the sites I have seen over the past 6 months that have inspired me in the area of animation specifically in scroll animation. I had references to these projects in several different places so I wanted to collect them here is a post so I know where to find them.

I had trouble tracking down the Motion Design Principles site and finally found the link in a Slack message to one of our designers. I had looked before but must have overlooked it on my first pass a few weeks ago.

I started collecting a list of these sites in the middle of December. I have been wanting to learn how to use certain techniques and methods in GreenSocks and I knew that I learn best by actually building something. I can hear the Shop Talk Show mantra in my head as I write this. “Just build websites!” (audio below)

It was just recently that I thought of the idea of trying to recreate one of these sites which inspired me to build and learn. I don’t have the creative energy or vision to try to create something from scratch on my own as far as design. But there are already some designs out there. Why not just recreate them? I have done that type of thing in the past. Not sure why it took me so long to think of this way of practicing.

This is my collection. I am looking forward to trying to deconstruct some of these sites to learn some new things and to apply some of the techniques that I am inspired by and fit well into the projects I work on.

Typography Principles

My son linked me to this site, probably for the content because he is a graphic design student. I like how they are using horizontal scrolling to tell the story. I like how the Gallery sections scale in and out. A very interesting storytelling technique using scroll animations. I don’t think I have seen anything like it on another site.

Runway Financial

There are a lot of fun animations on this site as you scroll. I like how the content scales in and out. I like how the header menu animates. I like the scroll-to-path animations. The animations feel pretty smooth on this site and are not jarring. If you want to see jarring animations, visit the AI.gov site. I prefer much smoother experiences.

Motion Design Principles

As I mentioned before, I had trouble relocating this site. I finally found a link in a Slack message with one of our designers. I like that this site teaches motion design principles by using those motion design principles on the page. A lot of nice things to learn here.

ASM Technologies

I love Mike Kus‘ work. I like the subtle animations on this site as you scroll or as you hover over different elements. I love the illustrations and the colors. Just a really nice experience.

UX London 2021

This is a site that inspired me several years ago. I love the work that Cassie Evans did on this site (and others on her Clearleft team). I love the movement of the shapes and I especially love a scroll animation of a curved path later on down the homepage.

I recreate this section of the site as a Codepen several years ago. I used the SVG from their site but then created my page elements that are revealed as the user scrolled down the page. It was a good exercise where I learned some different things about how scroll animation works in GreenSock. Unfortunately, without regular practice, I have forgotten some of those things. Just like everything else, you need practice to keep those skills sharp.

Superrb Design and Development Agency

I like how content animates fairly soon after it enters the viewport. I have seen this on some other sites and I really like it. I tend to think you want to animate things into view closer to the center of the viewport so that you can see more of it. Doing it fairly soon as the content enters the viewport is much more subtle and feels nice. And you don’t end up with a lot of blank spaces before the content fades in.

Vendome Clinique on dribble

This is from dribble. I like how things grow as they animate into view.

Elegant Seagulls Agency

I like the transition on the animations on this site. I also like the masking of the video in the hero section. Another good example of a site that fades in and fades up content very soon after it enters the viewport at the bottom of the page.

Kauffman Foundation Real World Learning

One of my favorite projects that I used scroll animations on was the Real World Learning site we built for the Kauffman Foundation in 2022. There were several icons and sketchy type elements in the design that I animated as the user scrolls down the page.