{"id":11763,"date":"2020-09-04T15:00:47","date_gmt":"2020-09-04T13:00:47","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=11763"},"modified":"2022-10-25T15:12:11","modified_gmt":"2022-10-25T13:12:11","slug":"scroll-triggered-animations","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/scroll-triggered-animations\/","title":{"rendered":"16 Captivating Websites with Scroll-triggered Animations"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]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&#8217;re not only beautiful to look at but can also help create user engagement and make a website more memorable.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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\u2019re 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\u2019s where scroll-triggered animations can come in handy.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 &#8211; we see exactly what we\u2019re supposed to see and when we\u2019re supposed to see it. <strong>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<\/strong>:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">\n<a href=\"#iphone-11-pro\">iPhone 11 Pro<\/a>\n<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#joey-bada$$-political-mc\">Joey Bada$$ Political MC<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#stanley-kubrick-life\">Stanley Kubrick Life<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#vincent-saisset\">Vincent Sa\u00efsset<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#fabian-ferdinand-fallend\">Fabian Ferdinand Fallend<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#home-societe\">Home Soci\u00e9t\u00e9<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#danilo-de-marco\">Danilo De Marco<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#yuto-takahashi\">Yuto Takahashi<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#gucci-hallucination\">Gucci Hallucination<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">\n<a href=\"#editorial-new\">Editorial New<\/a>\n<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#wtower\">Wtower<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#green-chameleon\">Green Chameleon<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#sally\">Sally<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#composition-24\">Composition 24<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#bewegen\">Bewegen<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#parmigiani-fleurier\">Parmigiani Fleurier<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/stacked-item-scroll\/\">Stacked Item Scroll<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/intro-scrolling-images\/\">Intro Scrolling Images<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/animated-device-slider\/\">Animated Device Slider<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/interactive-project-carousel\/\">Interactive Project Carousel<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;70px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"iphone-11-pro\"><\/a>iPhone 11 Pro<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/www.apple.com\/iphone-11-pro\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"390\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/iPhone-11-Pro.jpg\" class=\"attachment-full size-full\" alt=\"iPhone 11 Pro\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/iPhone-11-Pro.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/iPhone-11-Pro-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/iPhone-11-Pro-620x345.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Let\u2019s kick things off with a brand that\u2019s reshaped technology and our lives with their trend-setting and innovative products.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For their online presentation of the <a href=\"https:\/\/www.apple.com\/iphone-11-pro\/\" target=\"_blank\" rel=\"noopener noreferrer\">iPhone 11 pro<\/a>, Apple opted for a showcase site loaded with fantastic scroll-triggered animations. First, there\u2019s 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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\u2019s already-dark background, creating an elegant and modern atmosphere. <strong>There\u2019s no need to click anywhere. All we need to know reveals itself to us as we scroll down the page.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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\u2019s visitors.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"joey-bada$$-political-mc\"><\/a>Joey Bada$$ Political MC<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"http:\/\/badass.shoes-up.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"390\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Joey-Bada-Political-MC.jpg\" class=\"attachment-full size-full\" alt=\"Joey Bada$$ Political MC\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Joey-Bada-Political-MC.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Joey-Bada-Political-MC-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Joey-Bada-Political-MC-620x345.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <a href=\"http:\/\/badass.shoes-up.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Joey Bada$$ Political MC<\/a>\u2019s 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. <strong>They used scroll-triggered animations throughout, and even though there\u2019s a lot of text, you\u2019re not bored for one second. To make the content even more amusing, scrolling often switches from horizontal to vertical.<\/strong> 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 \u2013 the first thing you see is a bill with Donald Trump\u2019s face on it, and as you start scrolling, the bill starts to burn up.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"stanley-kubrick-life\"><\/a>Stanley Kubrick Life<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/kubrick.life\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"390\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Stanley-Kubrick-Life.jpg\" class=\"attachment-full size-full\" alt=\"Stanley Kubrick Life\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Stanley-Kubrick-Life.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Stanley-Kubrick-Life-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Stanley-Kubrick-Life-620x345.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/kubrick.life\/\" target=\"_blank\" rel=\"noopener noreferrer\">Work and Life of Stanley Kubrick<\/a> is another remarkable example of a storytelling website. It is dedicated to the 90th birthday of the American film director and producer Stanley Kubrick. <strong>His life and creative opus are presented in an astounding fashion thanks to the synergy of scroll-triggered animations and numerous other creative elements.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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. <strong>The parallax effect is present in the background sections and is used to uncover more prominent elements of this project, most notably Kubric\u2019s works, which are showcased in chronological order<\/strong>. Moreover, each of his <a href=\"https:\/\/qodeinteractive.com\/magazine\/film-websites\/\">films<\/a> is presented in a detailed manner, using terrific animation effects.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Let\u2019s take a closer look at the presentation of one of his classics \u2013 \u201cLolita\u201d. This one comes right after the showcase of \u201cSpartacus\u201d, 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. <strong>The more we scroll, the bigger the heart becomes, until it loses its shape and colors the entire screen in a bubbly pink shade<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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).<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>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<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As the final details regarding \u201cLolita\u201d 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 <a href=\"https:\/\/commercialtype.com\/catalog\/druk_condensed\" target=\"_blank\" rel=\"noopener noreferrer\">druk condensed collection<\/a>. They\u2019re a perfect choice to announce \u201cDr. Strangelove\u201d.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This movie was created in 1964. It\u2019s 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. <strong>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<\/strong>. Thanks to this scrolling effect, we almost feel as if we\u2019re present in that room, which some consider the best-designed movie set ever.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Since this website is huge and takes some time to explore, one might think that users will get bored fast. However, <strong>with each scroll, something thrilling unravels right before our eyes<\/strong>. Because of that, we\u2019re sure the fans of Kubrick&#8217;s films will stick till the very end and thoroughly enjoy this astounding experience.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;qi-banner&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"vincent-saisset\"><\/a>Vincent Sa\u00efsset<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/www.vincentsaisset.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"390\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Vincent-Saisset.jpg\" class=\"attachment-full size-full\" alt=\"Vincent Sa\u00efsset\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Vincent-Saisset.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Vincent-Saisset-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Vincent-Saisset-620x345.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>To make your scroll-triggered site captivating, you don\u2019t 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.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first thing we see once <a href=\"https:\/\/www.vincentsaisset.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Vincent Sa\u00efsset<\/a>\u2019s remarkable portfolio site loads is a large, white letter V on a black background. V is the initial of the artist\u2019s name, but it can also be viewed as an arrow pointing downward, encouraging us to start exploring the site.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"fabian-ferdinand-fallend\"><\/a>Fabian Ferdinand Fallend<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/www.fabianfallend.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"390\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Fabian-Ferdinand-Fallend.jpg\" class=\"attachment-full size-full\" alt=\"Fabian Ferdinand Fallend\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Fabian-Ferdinand-Fallend.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Fabian-Ferdinand-Fallend-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Fabian-Ferdinand-Fallend-620x345.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>When it comes to websites that rely heavily on scroll-triggered animations, it&#8217;s important to ensure that everything &#8211; from the actual content all the way down to the smallest part of the interface &#8211; works perfectly together to create a coherent whole.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Take <a href=\"https:\/\/www.fabianfallend.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Fabian Ferdinand Fallend<\/a>\u2019s portfolio website for example. It looks raw, bold, and you can immediately tell that it\u2019s targeting an alternative crowd.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>There are lots of vertically placed letters that move on scroll<\/strong>. They\u2019re colored in red, which makes them even more attention-grabbing while adding character to the website. Besides <a href=\"https:\/\/qodeinteractive.com\/magazine\/large-typography-web-design\/\">large typography<\/a>, there\u2019s 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]It\u2019s replaced with the a<strong>symmetric portfolio list that\u2019s enriched with the parallax effect<\/strong>. However, the pictures slide in at different speeds which makes them look as if they\u2019re 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This website is striking and it reflects the artist\u2019s personality. <strong>The combination of bold fonts, asymmetric layouts, and scroll-triggered animations makes the typography look particularly arresting and captivating<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"home-societe\"><\/a>Home Soci\u00e9t\u00e9<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/homesociete.ca\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"390\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Home-Societe.jpg\" class=\"attachment-full size-full\" alt=\"Home Soci\u00e9t\u00e9\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Home-Societe.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Home-Societe-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Home-Societe-620x345.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/homesociete.ca\/\" target=\"_blank\" rel=\"noopener noreferrer\">Home Soci\u00e9t\u00e9<\/a>\u2019s website beautifully showcases this company\u2019s 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. <strong>The animated elements are rhythmical and they overlap and intersect with each other<\/strong>. Images in the background are constantly changing, and the typefaces are quite eye-catching. <strong>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.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"danilo-de-marco\"><\/a>Danilo De Marco<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/www.danilodemarco.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"390\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Danilo-De-Marco.jpg\" class=\"attachment-full size-full\" alt=\"Danilo De Marco\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Danilo-De-Marco.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Danilo-De-Marco-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Danilo-De-Marco-620x345.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.danilodemarco.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Danilo De Marco<\/a>\u2019s website was created in collaboration with Studio K95 with the purpose of promoting his works. <strong>Even though scroll-triggered animations are used only in certain sections of the site, they are still prominent<\/strong>. The logo and font presentations of De Marco\u2019s works are captivatingly animated, and the vibrant green color keeps the visitor\u2019s eyes glued to the screen. Typography is very dominant and textual content appears on scroll. <strong>If you click on any of the featured projects and go to a single page dedicated solely to the selected work, you\u2019ll notice that, as you explore the content, photographs seem to drift further away from your point of view<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"yuto-takahashi\"><\/a>Yuto Takahashi<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/yuto-takahashi.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"390\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Yuto-Takahashi.jpg\" class=\"attachment-full size-full\" alt=\"Yuto Takahashi\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Yuto-Takahashi.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Yuto-Takahashi-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Yuto-Takahashi-620x345.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/yuto-takahashi.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Yuto Takahashi<\/a>\u2019s 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\u2019s name, portfolio, and \u201cbased in Tokyo\u201d. Then, you are instructed to hold the mouse button for a while to access his work. The projects he\u2019s worked on look compelling and are splashed across the better part of the screen.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Serif typefaces surrounding the photographs are prominent and asymmetrically placed around projects. <strong>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<\/strong>. If we click on any of the featured works, we\u2019ll see that scroll-triggered animations are used on single project pages as well, mostly for featured images, that change their size on scroll.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"gucci-hallucination\"><\/a>Gucci Hallucination<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"http:\/\/springsummer.gucci.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"390\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Gucci-Hallucination.jpg\" class=\"attachment-full size-full\" alt=\"Gucci Hallucination\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Gucci-Hallucination.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Gucci-Hallucination-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Gucci-Hallucination-620x345.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"http:\/\/springsummer.gucci.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">\u201cA Gucci Hallucination\u201d<\/a> is the Spring \/ Summer 2018 campaign directed by Alessandro Michele (creative director of Gucci) and illustrated by Spanish artist Ignasi Monreal.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This website is filled with digital, surreal scenes and illustrations inspired by classical artworks, with some pop culture elements added into the mix.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The entire campaign represents an ironic depiction of reality as a surreal and utopian fantasy.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]There are all kinds of characters represented in illustrations. Some are wearing clothes from the \u201918 Gucci collection and are fishing for planes in the clouds. A few scrolls below there are mermaids waiting for us. They\u2019re chilling on the rocks advertising the free Gucci-fi area (free WiFi) while trying to capture the perfect selfie. There\u2019s also a scene reminiscent of Disney&#8217;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\u2019s \u201cArnolfini Portrait\u201d and \u201cOphelia\u201d by John Everett Millais.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The illustrations are colorful and filled with surreal elements<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"editorial-new\"><\/a>Editorial New<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/editorialnew.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"390\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Editorial-New.jpg\" class=\"attachment-full size-full\" alt=\"Editorial New\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Editorial-New.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Editorial-New-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Editorial-New-620x345.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <a href=\"https:\/\/editorialnew.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Editorial New<\/a> website is a collaboration between Locomotive and Pangram Pangram Foundry. The project is dedicated to the Editorial New font, a serif typeface that reflects \u201890s design trends.<strong> It all starts with a newspaper-like section that rotates as we scroll, until it fills up the entire screen.<\/strong> You are then introduced to multiple examples of this typeface in use, showcasing its versatility. There\u2019s also an example of a magazine cover created using this beautiful font. If you click on the <em>Randomize<\/em> button placed below the magazine, the cover will change, showing the font in different sizes and weights. There\u2019s 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"wtower\"><\/a>Wtower<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/wtower.ru\/#en\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"390\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Wtower.jpg\" class=\"attachment-full size-full\" alt=\"Wtower\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Wtower.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Wtower-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Wtower-620x345.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/wtower.ru\/#en\" target=\"_blank\" rel=\"noopener noreferrer\">Wtower<\/a> is a website created by the Russian digital agency JetsStyle. They built an interactive virtual world to tell us the story of the Ural\u2019s White Tower, which used to be the world\u2019s largest water tower. <strong>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<\/strong>. There\u2019s also a progress bar at the bottom of the screen. It\u2019s 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&#8217;t already captivating enough, its creators decided to add a VR version which puts you in the center of the action.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"green-chameleon\"><\/a>Green Chameleon<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/2018.craftedbygc.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"390\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Green-Chameleon.jpg\" class=\"attachment-full size-full\" alt=\"Green Chameleon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Green-Chameleon.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Green-Chameleon-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Green-Chameleon-620x345.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <a href=\"https:\/\/2018.craftedbygc.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Green Chameleon<\/a> design agency created this site to showcase their most cherished memories and achievements from 2018. <strong>We\u2019re first greeted with an intro graphic, and then, we begin to explore the site by scrolling. We can\u2019t help but feel as if we\u2019ve entered a time capsule.<\/strong> Month by month, we go through multiple presentations of the projects they\u2019ve 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"sally\"><\/a>Sally<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/new.drivesally.com\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"390\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Sally.jpg\" class=\"attachment-full size-full\" alt=\"Sally\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Sally.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Sally-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Sally-620x345.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/new.drivesally.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sally<\/a> is a company from NYC that rents cars to Uber, Lyft, Juno, and Via, and their website was created by the Red Collar Agency.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>This site looks minimal in terms of design and colors, with gorgeous detailing. There\u2019s a 3D model of a car, that, thanks to more than 70 separate animations, looks like it\u2019s moving<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;scroll-animations-banner&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"composition-24\"><\/a>Composition 24<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/k24moscow.ru\/en\/\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"390\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Composition-24.jpg\" class=\"attachment-full size-full\" alt=\"Composition 24\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Composition-24.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Composition-24-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Composition-24-620x345.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]When it comes to scroll-triggered animations, in general, timing is essential, and this website for modern architectural project <a href=\"https:\/\/k24moscow.ru\/en\/\" target=\"_blank\" rel=\"noopener noreferrer\">K24 Moscow<\/a> is the perfect example. This site evokes the spirit of the Russian avant-garde and suprematism. <strong>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.<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"bewegen\"><\/a>Bewegen<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/bewegen.com\/en\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"390\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Bewegen.jpg\" class=\"attachment-full size-full\" alt=\"Bewegen\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Bewegen.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Bewegen-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Bewegen-620x345.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/bewegen.com\/en\" target=\"_blank\" rel=\"noopener noreferrer\">Bewegen<\/a> 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. <strong>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<\/strong>. As you continue to scroll down the site, you\u2019ll 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"parmigiani-fleurier\"><\/a>Parmigiani Fleurier<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border qodef-image-behavior-custom-link\">\n    <div class=\"qodef-si-inner\" >\n        \t            <a itemprop=\"url\" href=\"https:\/\/bewegen.com\/en\" target=\"_blank\" rel=\"noopener\">\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"390\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Parmigiani-Fleurier.jpg\" class=\"attachment-full size-full\" alt=\"Parmigiani Fleurier\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Parmigiani-Fleurier.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Parmigiani-Fleurier-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/09\/Parmigiani-Fleurier-620x345.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                                <\/a>\n            <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The showcase site for the luxurious <a href=\"https:\/\/kalpa.parmigiani.com\/en\/#!\/collection\/kalpa-hebdomadaire\/final\" target=\"_blank\" rel=\"noopener noreferrer\">Kalpa<\/a> 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. <strong>The animations are well-balanced and subtle. You definitely won\u2019t miss them, but they won\u2019t distract your attention from the Kalpa collection of watches.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>One of the most important things to remember about this kind of animation is that balance is key<\/strong>. We could say that less is often more and we\u2019d be right when it comes to design in general. But, when we\u2019re talking about scroll-triggered animations, that doesn\u2019t 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\u2019re often left surprised with what we\u2019ve witnessed, but most of all, we\u2019re thrilled and inspired.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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\u2019s entire interface. They make it look <strong>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.<\/strong>[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Scroll-triggered animations are an effective way of capturing the user\u2019s undivided attention and introducing your brand in a highly creative way. Join us as we explore a selection of websites that demonstrate the power of scroll-triggered animations<\/p>\n","protected":false},"author":8229,"featured_media":14310,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[30,40,43],"class_list":["post-11763","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-creative","tag-inspiration","tag-showcase"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/11763","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/8229"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=11763"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/11763\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/14310"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=11763"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=11763"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=11763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}