16 Captivating Websites with Scroll-triggered Animations
Have you ever browsed a site only to be fascinated by the various motions, effects, and element transitions that show up on your every scroll? These are called scroll-triggered animations, and they’re not only beautiful to look at but can also help create user engagement and make a website more memorable.
Well-thought-out scroll-triggered animations grasp our attention and we soon find ourselves enveloped in captivating textual content that conforms to our scrolling tempo, images that zoom in or become smaller as they enter or exit the viewport, graphics that carefully follow the movements of our mouse cursor, etc. With every new scroll, the scene unfolding before us becomes more dynamic and exciting. The animated features make us feel as if we’re levitating in a 3D space and all the elements surrounding us are telling an exhilarating, cohesive story. Scroll-triggered animations are especially popular on storytelling websites as they help keep visitors interested in the content, so people are likely to stick around longer. This is important because visitors tend to skim through text-rich pages, often without giving the actual content the attention it deserves. And that’s where scroll-triggered animations can come in handy.
Our movement through websites with scroll-triggered animations is controlled and well planned. We never feel lost, because the content reveals itself to us in an arranged manner – we see exactly what we’re supposed to see and when we’re supposed to see it. The browsing experience becomes fun, unique, engaging, and attention-grabbing, and the following examples are a true testament to how impactful scroll-triggered animations can be:
Want to add scroll-triggered animation on your website? Check out our Qi Addons for Elementor plugin and keep an eye out for these widgets:
Let’s kick things off with a brand that’s reshaped technology and our lives with their trend-setting and innovative products.
For their online presentation of the iPhone 11 pro, Apple opted for a showcase site loaded with fantastic scroll-triggered animations. First, there’s a short introductory video that starts with the name of the phone written in large, white letters on a dark background, followed by a close up of a single camera lens that slowly starts to rotate. The camera then zooms out, our perspective changes, and finally, we are presented with an oversized image of the phone with all three camera lenses on display.
As we start scrolling, a new section containing some technical information about the product is uncovered. The textual content, which is in light hues, is organized and dispersed in several black boxes placed on the website’s already-dark background, creating an elegant and modern atmosphere. There’s no need to click anywhere. All we need to know reveals itself to us as we scroll down the page.
Besides the animation effects and the constant switch from zoomed-in to zoomed-out images of the phone, what makes this site even more dynamic are the rapidly changing, high-quality photos taken with this phone. The whole presentation is harmonious, insightful, goal-oriented, and it provides us with essential product information while simultaneously highlighting its design and functionality. All these elements combined are sure to leave a strong impression on the site’s visitors.
The Joey Bada$$ Political MC’s website is an amazing example of how effective scroll-triggered animations can be when used to tell a story. The French magazine Shoes Up collaborated with this American MC to create a satirical website that presents him as a presidential candidate, and so the whole site resembles a political campaign. They used scroll-triggered animations throughout, and even though there’s a lot of text, you’re not bored for one second. To make the content even more amusing, scrolling often switches from horizontal to vertical. Each scroll takes you someplace new and reveals more interesting information about Joey and his political beliefs. In fact, the moment the website loads you become a part of his ideology – the first thing you see is a bill with Donald Trump’s face on it, and as you start scrolling, the bill starts to burn up.
Work and Life of Stanley Kubrick is another remarkable example of a storytelling website. It is dedicated to the 90th birthday of the American film director and producer Stanley Kubrick. His life and creative opus are presented in an astounding fashion thanks to the synergy of scroll-triggered animations and numerous other creative elements.
The transition from one section to the next is exciting, the typefaces elegantly and slowly fade in until they reach their full, bold form, and we get a close-up view of all the beautiful imagery. The parallax effect is present in the background sections and is used to uncover more prominent elements of this project, most notably Kubric’s works, which are showcased in chronological order. Moreover, each of his films is presented in a detailed manner, using terrific animation effects.
Let’s take a closer look at the presentation of one of his classics – “Lolita”. This one comes right after the showcase of “Spartacus”, his famous historical drama, and the contrast in the way these two films are presented is stark. At first, a heart shows up on the page. The more we scroll, the bigger the heart becomes, until it loses its shape and colors the entire screen in a bubbly pink shade. The font used in this section is white, feminine, and it suits the genre of the movie just right. Lolita is a black comedy-drama, based on a novel by Vladimir Nabokov. This information, as well as a few other fun facts, are all featured in a textual resume that appears on the page.
Our focus is then shifted on the iconic heart-shaped glasses and lollipop, which never appeared in the film itself but have become its trademark (both were used just in the promo shoot that was organized right before the film began shooting).
Fantastic black and white editorial photographs and movie stills are placed on the contrasting pink background, and together they vividly depict the vibe of the movie and of this presentation. The showcase of all movies featured in this project ends with information about the awards that specific feature has won. Here, that element is particularly highlighted and the colors used are purposefully there to introduce us to the next movie.
As the final details regarding “Lolita” disappear, all we see is a black background. After a few scrolls, a two-dimensional missile appears, blows up, and colors the screen in red. The typefaces are strong, black, taken from the druk condensed collection. They’re a perfect choice to announce “Dr. Strangelove”.
This movie was created in 1964. It’s a political satire black comedy about the Cold War and the nuclear conflict between the Soviet Union and the US. The beginning of this presentation resembles that of Lolita, except that now the black-and-white photographs of the characters levitate on the black background, perfectly depicting the atmosphere of the movie. The short textual section is followed with a fullscreen image of a meeting in the War room, which is when we get to see the horizontal scroll in action. Thanks to this scrolling effect, we almost feel as if we’re present in that room, which some consider the best-designed movie set ever.
Since this website is huge and takes some time to explore, one might think that users will get bored fast. However, with each scroll, something thrilling unravels right before our eyes. Because of that, we’re sure the fans of Kubrick’s films will stick till the very end and thoroughly enjoy this astounding experience.
To make your scroll-triggered site captivating, you don’t always have to use tons of elements and flashy graphics. In fact, sometimes all you need is some carefully chosen typography, as this next site demonstrates perfectly.
The first thing we see once Vincent Saïsset’s remarkable portfolio site loads is a large, white letter V on a black background. V is the initial of the artist’s name, but it can also be viewed as an arrow pointing downward, encouraging us to start exploring the site.
The first scroll of the mouse starts an avalanche of animated typefaces and a monochromatic interplay in which the letters and the background switch their color from black to white and vice versa. The website is adorned with both vertical and horizontal scroll transitions, as well as with a playful micro-interaction between the cursor and letters.
When it comes to websites that rely heavily on scroll-triggered animations, it’s important to ensure that everything – from the actual content all the way down to the smallest part of the interface – works perfectly together to create a coherent whole.
Take Fabian Ferdinand Fallend’s portfolio website for example. It looks raw, bold, and you can immediately tell that it’s targeting an alternative crowd.
There are lots of vertically placed letters that move on scroll. They’re colored in red, which makes them even more attention-grabbing while adding character to the website. Besides large typography, there’s also an interesting video that plays on a loop in the first section of the website. As you scroll, the video zooms in and it becomes so big that it covers the entire screen. Then it vanishes.
It’s replaced with the asymmetric portfolio list that’s enriched with the parallax effect. However, the pictures slide in at different speeds which makes them look as if they’re levitating in a space covered with some sort of web. There are more red-colored typefaces placed at the bottom of the portfolio list, but this time they appear with the horizontal scrolling effect.
This website is striking and it reflects the artist’s personality. The combination of bold fonts, asymmetric layouts, and scroll-triggered animations makes the typography look particularly arresting and captivating. All these elements together inspire us to scroll through the website and explore the content that way rather than use the menu to immediately skip to a specific section.
Home Société’s website beautifully showcases this company’s interior design works. Speaking of design, this site is quite simple, but simultaneously rich and diverse in terms of animations, graphic elements, and of course, typography. The animated elements are rhythmical and they overlap and intersect with each other. Images in the background are constantly changing, and the typefaces are quite eye-catching. What sets this typography-adorned website apart from the previous one is the horizontal scroll, which gives it a whole new dimension and provides users with one infinite scroll experience.
Danilo De Marco’s website was created in collaboration with Studio K95 with the purpose of promoting his works. Even though scroll-triggered animations are used only in certain sections of the site, they are still prominent. The logo and font presentations of De Marco’s works are captivatingly animated, and the vibrant green color keeps the visitor’s eyes glued to the screen. Typography is very dominant and textual content appears on scroll. If you click on any of the featured projects and go to a single page dedicated solely to the selected work, you’ll notice that, as you explore the content, photographs seem to drift further away from your point of view.
Yuto Takahashi’s portfolio website is another example that illustrates how much you can achieve with scroll-triggered animations. The first thing you see is a rotating circle made up of words such as the artist’s name, portfolio, and “based in Tokyo”. Then, you are instructed to hold the mouse button for a while to access his work. The projects he’s worked on look compelling and are splashed across the better part of the screen.
Serif typefaces surrounding the photographs are prominent and asymmetrically placed around projects. With each new scroll, some sort of a liquid-looking animation shows up over images, disrupting their form, while our attention is focused on the wavy movement. If we click on any of the featured works, we’ll see that scroll-triggered animations are used on single project pages as well, mostly for featured images, that change their size on scroll.
“A Gucci Hallucination” is the Spring / Summer 2018 campaign directed by Alessandro Michele (creative director of Gucci) and illustrated by Spanish artist Ignasi Monreal.
This website is filled with digital, surreal scenes and illustrations inspired by classical artworks, with some pop culture elements added into the mix.
The entire campaign represents an ironic depiction of reality as a surreal and utopian fantasy.
There are all kinds of characters represented in illustrations. Some are wearing clothes from the ’18 Gucci collection and are fishing for planes in the clouds. A few scrolls below there are mermaids waiting for us. They’re chilling on the rocks advertising the free Gucci-fi area (free WiFi) while trying to capture the perfect selfie. There’s also a scene reminiscent of Disney’s Snow White, in which a model is sleeping whilst wearing a sweater with the image of this beloved Disney character. Some famous artworks are featured in the project as well, such as Van Eyck’s “Arnolfini Portrait” and “Ophelia” by John Everett Millais.
The illustrations are colorful and filled with surreal elements. Aesthetically speaking, the website looks very distinct and peculiar (which makes it all the more inspiring), but at the same, this is exactly the style Gucci has been known for years.
The Editorial New website is a collaboration between Locomotive and Pangram Pangram Foundry. The project is dedicated to the Editorial New font, a serif typeface that reflects ‘90s design trends. It all starts with a newspaper-like section that rotates as we scroll, until it fills up the entire screen. You are then introduced to multiple examples of this typeface in use, showcasing its versatility. There’s also an example of a magazine cover created using this beautiful font. If you click on the Randomize button placed below the magazine, the cover will change, showing the font in different sizes and weights. There’s lots of typography in motion and scroll-triggered animations that are incorporated even in the smallest of details, making this typeface presentation memorable and outstanding.
Wtower is a website created by the Russian digital agency JetsStyle. They built an interactive virtual world to tell us the story of the Ural’s White Tower, which used to be the world’s largest water tower. This is yet another beautiful example of how a storytelling website and scroll-triggered animations fit like puzzle pieces. The scrolling effect leads us deep into the 3D space where we can learn about the origins of the tower and the issues it faces today. There’s also a progress bar at the bottom of the screen. It’s visible at all times and is a very useful element to have on storytelling websites since visitors can always check where they are and how much is left to be seen. And as if the site wasn’t already captivating enough, its creators decided to add a VR version which puts you in the center of the action.
The Green Chameleon design agency created this site to showcase their most cherished memories and achievements from 2018. We’re first greeted with an intro graphic, and then, we begin to explore the site by scrolling. We can’t help but feel as if we’ve entered a time capsule. Month by month, we go through multiple presentations of the projects they’ve worked on in 2018. And if we click on any of the works, the image will then be displayed at the center of the screen with information about the project placed underneath the picture. The background color changes as we navigate through a 3D space from one month to the next using our mouse.
Sally is a company from NYC that rents cars to Uber, Lyft, Juno, and Via, and their website was created by the Red Collar Agency.
This site looks minimal in terms of design and colors, with gorgeous detailing. There’s a 3D model of a car, that, thanks to more than 70 separate animations, looks like it’s moving. You can make it move from one section to the next by scrolling or moving your cursor in the desired direction. All transitions are perfectly synchronized and they work without a hitch.
Themes with Scroll Animations
View Collection
When it comes to scroll-triggered animations, in general, timing is essential, and this website for modern architectural project K24 Moscow is the perfect example. This site evokes the spirit of the Russian avant-garde and suprematism. Scroll-triggered animations have been used throughout the entire presentation. Everything looks very fluid and dynamic, and with every new scroll we discover something new. The combination of red, white, and black sections that move, overlap, and go from smaller to huge sizes looks amazing paired with a very distinct typeface. Together, these elements make up for a highly exciting website that perfectly suits the spirit of the Russin avant-garde.
Bewegen is a world-class system for sharing bikes. Their website, created by the Locomotive agency, is an amazing showcase rich with content, animations, and interactions. By relying on scroll-triggered animations and zoom shots, the authors have given us a detailed view of the Bewegen Pedelec bike, a model the company is known for. As you continue to scroll down the site, you’ll discover all there is to know about this bike-sharing system and learn how to use it. You can also create your own sharing system by selecting the city, entering the number of people you wish to include in the project, choosing the color of the bike, etc., and then submitting the form to Bewegen. Once again, the Locomotive team has demonstrated how well-versed they are in terms of creating compelling and authentic interactive presentations for their clients.
The showcase site for the luxurious Kalpa collection of watches by Swiss watchmakers Parmigiani Fleurier is another great example of how scroll-triggered animations can take a website to a whole new level. The layout is elegant and demure. The watch that this presentation is dedicated to is centrally placed and it follows the movement of your mouse. You can explore the entire collection first using the arrows placed on the left and right side of the screen. When you find a model that catches your eye, the information about the product and more pictures of it show up asymmetrically on scroll, around the watch. You can learn all about the winding system, case, strap, dial, and other technical details. The animations are well-balanced and subtle. You definitely won’t miss them, but they won’t distract your attention from the Kalpa collection of watches.
Final Thoughts
Just by taking a look at the examples featured in this list, it becomes clear that scroll-triggered animations are tremendously versatile and practical, and can be used on a variety of websites.
One of the most important things to remember about this kind of animation is that balance is key. We could say that less is often more and we’d be right when it comes to design in general. But, when we’re talking about scroll-triggered animations, that doesn’t necessarily have to be the case. As you could see for yourself while going through these websites, the user experience can become particularly exciting when things are pushed to the limit animations-wise. When we observe transitions from one page or section to the other, we’re often left surprised with what we’ve witnessed, but most of all, we’re thrilled and inspired.
Another great thing about animations that spur elements into movement, bring our focus on specific sections of a website, and lead us from one screen to the next is that they can have a positive impact on the website’s entire interface. They make it look clean and uncluttered. Instead of using numerous buttons, menus, navigation, different types of arrows, etc., we can ensure a fun, interactive, and fluid browsing experience for our users simply by incorporating carefully planned scroll-triggered animation effects into our projects.
