{"id":27,"date":"2017-09-13T14:26:22","date_gmt":"2017-09-13T14:26:22","guid":{"rendered":"https:\/\/webdesignerinc.com\/blog\/?p=27"},"modified":"2017-09-13T15:55:15","modified_gmt":"2017-09-13T15:55:15","slug":"12-essential-scroll-to-view-animation-trends","status":"publish","type":"post","link":"https:\/\/webdesignerinc.com\/blog\/12-essential-scroll-to-view-animation-trends\/","title":{"rendered":"12 Essential Scroll-To-View Animation Trends"},"content":{"rendered":"<p class=\"single-first-p\">Animated page elements are super common on landing pages and startup websites. But they\u2019re not always talked about in design circles because the idea of \u201canimate on view\u201d isn\u2019t covered a lot.<\/p>\n<p>I use the phrase scroll-to-view because it seems like an accurate description. Basically as you scroll down the page new animated elements come into view.<\/p>\n<p>It\u2019s not a technique that works for every website but it does add a nice touch into certain layouts. And I\u2019ve curated some of my favorites here to showcase how these scroll-to-view animations work and why you might try using them yourself.<\/p>\n<h2>1. TOMORROW SLEEP<\/h2>\n<p>On the\u00a0<a class=\"external inner-link-effect\" href=\"https:\/\/www.tomorrowsleep.com\/\" rel=\"nofollow\">Tomorrow Sleep<\/a>\u00a0website you\u2019ll notice a few fairly benign animated effects. These fade different pieces of text and CTAs into view all around the layout.<\/p>\n<p>What\u2019s interesting is how most of the images and background areas are fully visible even on first scroll. Many websites use fading animation to display images and screenshots while keeping the text visible.<\/p>\n<p>This minor difference helps draw attention to the text as it fades into view. A great way to capture attention from visitors browsing along.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-13\" src=\"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/01-tomorrow-sleep-webpage-1024x474.jpg\" alt=\"\" width=\"625\" height=\"289\" srcset=\"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/01-tomorrow-sleep-webpage-1024x474.jpg 1024w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/01-tomorrow-sleep-webpage-300x139.jpg 300w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/01-tomorrow-sleep-webpage-768x355.jpg 768w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/01-tomorrow-sleep-webpage-624x289.jpg 624w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/01-tomorrow-sleep-webpage.jpg 1856w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/p>\n<h2><\/h2>\n<h2>2. TWIST<\/h2>\n<p>Another technique I often see is targeting most of the page\u2019s content for on-scroll animations.<\/p>\n<p>For example the\u00a0<a class=\"external inner-link-effect\" href=\"https:\/\/twistapp.com\/\" rel=\"nofollow\">Twist app homepage<\/a>\u00a0includes varying page segments and blocks of text that animate in &amp; out of view on scroll. These have a very soft fading effect so they\u2019re noticeable yet not too harsh.<\/p>\n<p>Some visitors may be annoyed by the delay but I don\u2019t think it\u2019s too long. Plus it only animates one time so if you hit the bottom of the page all animations are done.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-14\" src=\"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/02-twist-app-landing-page-1024x477.jpg\" alt=\"\" width=\"625\" height=\"291\" srcset=\"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/02-twist-app-landing-page-1024x477.jpg 1024w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/02-twist-app-landing-page-300x140.jpg 300w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/02-twist-app-landing-page-768x358.jpg 768w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/02-twist-app-landing-page-624x290.jpg 624w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/02-twist-app-landing-page.jpg 1856w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h2>3. YARN APP<\/h2>\n<p>For much more complex animations check out the\u00a0<a class=\"external inner-link-effect\" href=\"http:\/\/yarnvideoapp.com\/\" rel=\"nofollow\">Yarn App<\/a>\u00a0lander. This one has multi-part animations and even elements that come into view from different angles.<\/p>\n<p>Some of the screenshot demo images animate upwards while the accompanying text\/BG patterns animate down into view. This alternating style is pretty unique and not something I see often.<\/p>\n<p>However the landing page is also\u00a0<strong>incredibly simple<\/strong>\u00a0and there isn\u2019t much else here to grab attention. In this case varying animations work nicely.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-15\" src=\"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/03-yarn-app-landing-page-1024x520.jpg\" alt=\"\" width=\"625\" height=\"317\" srcset=\"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/03-yarn-app-landing-page-1024x520.jpg 1024w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/03-yarn-app-landing-page-300x152.jpg 300w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/03-yarn-app-landing-page-768x390.jpg 768w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/03-yarn-app-landing-page-624x317.jpg 624w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/03-yarn-app-landing-page.jpg 1856w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/p>\n<h2>4. DASHFLOW<\/h2>\n<p>Out of all these examples I think\u00a0<a class=\"external inner-link-effect\" href=\"http:\/\/dashflow.co\/\" rel=\"nofollow\">DashFlow<\/a>\u00a0uses the most common animation techniques.<\/p>\n<p>This lander animates images and text into view all in one sitting. It\u2019s real simple and uses a single-column layout so all content flows straight down in a linear path.<\/p>\n<p>Nothing inherently special about this design beyond the very clear-cut method of animating items on scroll. A great style if you have a similar website and want to keep the animations simple.<\/p>\n<div class=\"finline-large\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-16\" src=\"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/04-dashflow-app-ui-1024x520.jpg\" alt=\"\" width=\"625\" height=\"317\" srcset=\"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/04-dashflow-app-ui-1024x520.jpg 1024w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/04-dashflow-app-ui-300x152.jpg 300w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/04-dashflow-app-ui-768x390.jpg 768w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/04-dashflow-app-ui-624x317.jpg 624w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/04-dashflow-app-ui.jpg 1856w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/div>\n<h2>5. QUUU PROMOTE<\/h2>\n<p><a class=\"external inner-link-effect\" href=\"http:\/\/quuupromote.co\/\" rel=\"nofollow\">Quuu Promote<\/a>\u00a0keeps animations to the bare minimum and only uses them in CTA areas.<\/p>\n<p>I can\u2019t say if this increases conversions but that does seem to be the goal. When you first load the page the very top header animates into view with a tilting animation on the CTA.<\/p>\n<p>As you scroll down you\u2019ll notice the rest of the page is pretty static. But at the bottom there\u2019s one final CTA above the footer that also animates &amp; runs the same tilting animation.<\/p>\n<p>Goes to show you can have on-scroll animation effects that don\u2019t run across the entire page.<\/p>\n<div class=\"finline-large\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-17\" src=\"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/05-quuu-promote-animated-buttons-1024x440.jpg\" alt=\"\" width=\"625\" height=\"269\" srcset=\"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/05-quuu-promote-animated-buttons-1024x440.jpg 1024w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/05-quuu-promote-animated-buttons-300x129.jpg 300w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/05-quuu-promote-animated-buttons-768x330.jpg 768w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/05-quuu-promote-animated-buttons-624x268.jpg 624w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/05-quuu-promote-animated-buttons.jpg 1856w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/div>\n<h2>6. QONTO<\/h2>\n<p>The homepage for\u00a0<a class=\"external inner-link-effect\" href=\"https:\/\/qonto.eu\/\" rel=\"nofollow\">Qonto<\/a>\u00a0has an interesting take on scroll-to-view animation. It uses the same type of animation across the entire website and animates individual items into view from the side.<\/p>\n<p>For the majority of the page this includes icon sections that have a small graphic above some content explaining the app\u2019s features. Not too subtle yet not overly overt either.<\/p>\n<p>Plus you can find a few other animation styles in the header along with some BG images that fade into view. This page is just a gorgeous example of what\u00a0<a class=\"inner-link-effect\" href=\"https:\/\/www.webdesignerdepot.com\/2015\/05\/the-ultimate-guide-to-web-animation\/\">web animation<\/a>\u00a0can do.<\/p>\n<div class=\"finline-large\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-25\" src=\"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/featured_animation-1-1024x563.jpg\" alt=\"\" width=\"625\" height=\"344\" srcset=\"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/featured_animation-1-1024x563.jpg 1024w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/featured_animation-1-300x165.jpg 300w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/featured_animation-1-768x422.jpg 768w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/featured_animation-1-624x343.jpg 624w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/div>\n<h2>7. HIKE<\/h2>\n<p>For an example of subtle animations check out\u00a0<a class=\"external inner-link-effect\" href=\"https:\/\/hikeup.com\/\" rel=\"nofollow\">Hike<\/a>.<\/p>\n<p>Their page alternates between animated elements and fixed elements. But the animation effects are fast so you don\u2019t feel annoyed waiting for viewable content.<\/p>\n<p>This is my preference for any scroll-to-animation effect. It\u2019s always a beautiful technique but the timing needs to be quick and to the point. Nobody wants to wait around for content to come into view and Hike clearly understands this.<\/p>\n<div class=\"finline-large\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-19\" src=\"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/07-hike-app-landing-page-design-1024x519.jpg\" alt=\"\" width=\"625\" height=\"317\" srcset=\"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/07-hike-app-landing-page-design-1024x519.jpg 1024w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/07-hike-app-landing-page-design-300x152.jpg 300w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/07-hike-app-landing-page-design-768x389.jpg 768w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/07-hike-app-landing-page-design-624x316.jpg 624w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/07-hike-app-landing-page-design.jpg 1856w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/div>\n<h2>8. PROJECT FI<\/h2>\n<p>If there\u2019s anyone who knows great UX it\u2019s Google. And across all their products they have a ton of landing pages,\u00a0<a class=\"external inner-link-effect\" href=\"https:\/\/fi.google.com\/about\/\" rel=\"nofollow\">Project Fi<\/a>\u00a0being one example with some fantastic animations.<\/p>\n<p>These only apply to icons and they don\u2019t fade into view, but rather pop up from lower on the page. As you scroll you\u2019ll find icons that slide up into view for each small section.<\/p>\n<p>It\u2019s a pretty subtle effect but it adds some life into the design. And it\u2019s based solely on the viewer\u2019s position on the page so if you scroll to the top &amp; move back down you\u2019ll be greeted by the same animation effects.<\/p>\n<div class=\"finline-large\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-20\" src=\"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/08-google-project-fi-1024x484.jpg\" alt=\"\" width=\"625\" height=\"295\" srcset=\"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/08-google-project-fi-1024x484.jpg 1024w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/08-google-project-fi-300x142.jpg 300w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/08-google-project-fi-768x363.jpg 768w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/08-google-project-fi-624x295.jpg 624w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/08-google-project-fi.jpg 1856w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/div>\n<h2>9. BASE<\/h2>\n<p>The\u00a0<a class=\"external inner-link-effect\" href=\"https:\/\/getbase.com\/products\/base\/\" rel=\"nofollow\">Base CRM homepage<\/a>\u00a0is an excellent example of simple animation at work. This site uses custom animation effects to move images up and into the viewer\u2019s eye line.<\/p>\n<p>Based on the number of landing pages I see daily this is very typical of what I expect. It\u2019s not really a complex animation to recreate and it doesn\u2019t affect the experience too much either.<\/p>\n<p>One thing I wish is that the animations would load a bit faster. But beyond that I think this is a prime example of animating images on scroll with a very clean layout to boot.<\/p>\n<div class=\"finline-large\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-21\" src=\"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/09-base-crm-webapp-lander-1024x468.jpg\" alt=\"\" width=\"625\" height=\"286\" srcset=\"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/09-base-crm-webapp-lander-1024x468.jpg 1024w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/09-base-crm-webapp-lander-300x137.jpg 300w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/09-base-crm-webapp-lander-768x351.jpg 768w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/09-base-crm-webapp-lander-624x285.jpg 624w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/09-base-crm-webapp-lander.jpg 1856w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/div>\n<h2>10. ANYLIST<\/h2>\n<p>All the best mobile applications have their own websites for promotion. And the best ones usually have some pretty snazzy animation styles.<\/p>\n<p><a class=\"external inner-link-effect\" href=\"https:\/\/www.anylistapp.com\/\" rel=\"nofollow\">AnyList<\/a>\u00a0mixes a few different techniques together on one page. Their header image animates up from beneath the cut-off area but it\u2019s the only \u201cmoving\u201d animation on the page.<\/p>\n<p>Everything else just fades into view and it all uses a pretty quick load time for the animation. These techniques are used elsewhere on the site which gives it a more cohesive feel.<\/p>\n<div class=\"finline-large\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-22\" src=\"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/10-anylist-app-lander-1024x519.jpg\" alt=\"\" width=\"625\" height=\"317\" srcset=\"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/10-anylist-app-lander-1024x519.jpg 1024w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/10-anylist-app-lander-300x152.jpg 300w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/10-anylist-app-lander-768x389.jpg 768w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/10-anylist-app-lander-624x316.jpg 624w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/10-anylist-app-lander.jpg 1856w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/div>\n<h2>11. ERNEST<\/h2>\n<p>The page style for\u00a0<a class=\"external inner-link-effect\" href=\"https:\/\/ernest.ai\/\" rel=\"nofollow\">Ernest<\/a>\u00a0is a little different than other landing pages I\u2019ve covered.<\/p>\n<p>It uses\u00a0<a class=\"inner-link-effect\" href=\"https:\/\/www.webdesignerdepot.com\/2015\/07\/30-websites-that-prove-parallax-isnt-dead\/\">parallax scrolling animations<\/a>\u00a0to create motion on a single page layout with different sections.<\/p>\n<p>These vary based on the direction you\u2019re scrolling whether you move up or down, and at what speed. They also vary with intensity based on the different sections of the page.<\/p>\n<p>You can navigate using the side dot navigation menu and this quickly jumps around the page to different areas. It\u2019s one of the few techniques you\u2019ll often see on parallax pages and it certainly helps Ernest stand out from the crowd.<\/p>\n<div class=\"finline-large\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-23\" src=\"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/11-ernest-app-design-landing-page-1024x505.jpg\" alt=\"\" width=\"625\" height=\"308\" srcset=\"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/11-ernest-app-design-landing-page-1024x505.jpg 1024w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/11-ernest-app-design-landing-page-300x148.jpg 300w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/11-ernest-app-design-landing-page-768x379.jpg 768w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/11-ernest-app-design-landing-page-624x308.jpg 624w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/11-ernest-app-design-landing-page.jpg 1856w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/div>\n<h2>12. TAXINET<\/h2>\n<p>To catch a glimpse of full-page animations in action take a look at the\u00a0<a class=\"external inner-link-effect\" href=\"http:\/\/www.taxinetcab.com\/\" rel=\"nofollow\">TaxiNet<\/a>\u00a0website.<\/p>\n<p>It\u2019s a smorgasbord of scroll-based animation effects tied to icons, text, images, and even background styles. Individual page background colors animate into view with the user, definitely not a typical technique but certainly an interesting one.<\/p>\n<p>If you like this style you could absolutely apply a similar approach to your own landing page. Just make sure you keep the animations\u00a0<strong>snappy<\/strong>\u00a0and\u00a0<strong>quick<\/strong>\u00a0because nobody wants to wait around for your neat animations to load.<\/p>\n<p>But if you do \u2018em right these scroll-to-view elements add a nice effect to any landing page.<\/p>\n<div class=\"finline-large\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-24\" src=\"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/12-taxinet-website-landing-page-1024x493.jpg\" alt=\"\" width=\"625\" height=\"301\" srcset=\"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/12-taxinet-website-landing-page-1024x493.jpg 1024w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/12-taxinet-website-landing-page-300x145.jpg 300w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/12-taxinet-website-landing-page-768x370.jpg 768w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/12-taxinet-website-landing-page-624x301.jpg 624w, https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/12-taxinet-website-landing-page.jpg 1856w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Animated page elements are super common on landing pages and startup websites. But they\u2019re not always talked about in design circles because the idea of \u201canimate on view\u201d isn\u2019t covered&#8230; <a class=\"read-more-link\" href=\"https:\/\/webdesignerinc.com\/blog\/12-essential-scroll-to-view-animation-trends\/\">Read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":18,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,2],"tags":[],"class_list":["post-27","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-inspiration","category-web-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>12 Essential Scroll-To-View Animation Trends - Web designer Blog | web designer<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdesignerinc.com\/blog\/12-essential-scroll-to-view-animation-trends\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"12 Essential Scroll-To-View Animation Trends - Web designer Blog | web designer\" \/>\n<meta property=\"og:description\" content=\"Animated page elements are super common on landing pages and startup websites. But they\u2019re not always talked about in design circles because the ide\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdesignerinc.com\/blog\/12-essential-scroll-to-view-animation-trends\/\" \/>\n<meta property=\"og:site_name\" content=\"Web designer Blog | web designer\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Webdesignerinc\" \/>\n<meta property=\"article:published_time\" content=\"2017-09-13T14:26:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-09-13T15:55:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/06-qonto-landing-page-animation.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1856\" \/>\n\t<meta property=\"og:image:height\" content=\"871\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Teji\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@teji_tejinder\" \/>\n<meta name=\"twitter:site\" content=\"@teji_tejinder\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Teji\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webdesignerinc.com\/blog\/12-essential-scroll-to-view-animation-trends\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webdesignerinc.com\/blog\/12-essential-scroll-to-view-animation-trends\/\"},\"author\":{\"name\":\"Teji\",\"@id\":\"https:\/\/webdesignerinc.com\/blog\/#\/schema\/person\/5e2f01e80461d9a5ca3c361b86f405e7\"},\"headline\":\"12 Essential Scroll-To-View Animation Trends\",\"datePublished\":\"2017-09-13T14:26:22+00:00\",\"dateModified\":\"2017-09-13T15:55:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webdesignerinc.com\/blog\/12-essential-scroll-to-view-animation-trends\/\"},\"wordCount\":1252,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webdesignerinc.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webdesignerinc.com\/blog\/12-essential-scroll-to-view-animation-trends\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/06-qonto-landing-page-animation.jpg\",\"articleSection\":[\"INSPIRATION\",\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webdesignerinc.com\/blog\/12-essential-scroll-to-view-animation-trends\/\",\"url\":\"https:\/\/webdesignerinc.com\/blog\/12-essential-scroll-to-view-animation-trends\/\",\"name\":\"12 Essential Scroll-To-View Animation Trends - Web designer Blog | web designer\",\"isPartOf\":{\"@id\":\"https:\/\/webdesignerinc.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webdesignerinc.com\/blog\/12-essential-scroll-to-view-animation-trends\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webdesignerinc.com\/blog\/12-essential-scroll-to-view-animation-trends\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/06-qonto-landing-page-animation.jpg\",\"datePublished\":\"2017-09-13T14:26:22+00:00\",\"dateModified\":\"2017-09-13T15:55:15+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webdesignerinc.com\/blog\/12-essential-scroll-to-view-animation-trends\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webdesignerinc.com\/blog\/12-essential-scroll-to-view-animation-trends\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdesignerinc.com\/blog\/12-essential-scroll-to-view-animation-trends\/#primaryimage\",\"url\":\"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/06-qonto-landing-page-animation.jpg\",\"contentUrl\":\"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/06-qonto-landing-page-animation.jpg\",\"width\":1856,\"height\":871},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webdesignerinc.com\/blog\/12-essential-scroll-to-view-animation-trends\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webdesignerinc.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"12 Essential Scroll-To-View Animation Trends\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webdesignerinc.com\/blog\/#website\",\"url\":\"https:\/\/webdesignerinc.com\/blog\/\",\"name\":\"Web designer Blog | web designer\",\"description\":\"Web Designer and Developer Blog\",\"publisher\":{\"@id\":\"https:\/\/webdesignerinc.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webdesignerinc.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webdesignerinc.com\/blog\/#organization\",\"name\":\"Web designer Blog | web designer\",\"url\":\"https:\/\/webdesignerinc.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdesignerinc.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/logo1.png\",\"contentUrl\":\"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/logo1.png\",\"width\":409,\"height\":80,\"caption\":\"Web designer Blog | web designer\"},\"image\":{\"@id\":\"https:\/\/webdesignerinc.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Webdesignerinc\",\"https:\/\/x.com\/teji_tejinder\",\"http:\/\/www.linkedin.com\/in\/tejinder-singh-97bb19115\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webdesignerinc.com\/blog\/#\/schema\/person\/5e2f01e80461d9a5ca3c361b86f405e7\",\"name\":\"Teji\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/3933d592d4425623e44a3ddce18ae04f785295e0dd9b8b9d99251e81a0544a52?s=96&r=g&d=https:\/\/webdesignerinc.com\/blog\/wp-content\/plugins\/userswp\/assets\/images\/no_profile.png\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3933d592d4425623e44a3ddce18ae04f785295e0dd9b8b9d99251e81a0544a52?s=96&r=g&d=https:\/\/webdesignerinc.com\/blog\/wp-content\/plugins\/userswp\/assets\/images\/no_profile.png\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3933d592d4425623e44a3ddce18ae04f785295e0dd9b8b9d99251e81a0544a52?s=96&r=g&d=https:\/\/webdesignerinc.com\/blog\/wp-content\/plugins\/userswp\/assets\/images\/no_profile.png\",\"caption\":\"Teji\"},\"description\":\"i am admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"12 Essential Scroll-To-View Animation Trends - Web designer Blog | web designer","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webdesignerinc.com\/blog\/12-essential-scroll-to-view-animation-trends\/","og_locale":"en_US","og_type":"article","og_title":"12 Essential Scroll-To-View Animation Trends - Web designer Blog | web designer","og_description":"Animated page elements are super common on landing pages and startup websites. But they\u2019re not always talked about in design circles because the ide","og_url":"https:\/\/webdesignerinc.com\/blog\/12-essential-scroll-to-view-animation-trends\/","og_site_name":"Web designer Blog | web designer","article_publisher":"https:\/\/www.facebook.com\/Webdesignerinc","article_published_time":"2017-09-13T14:26:22+00:00","article_modified_time":"2017-09-13T15:55:15+00:00","og_image":[{"width":1856,"height":871,"url":"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/06-qonto-landing-page-animation.jpg","type":"image\/jpeg"}],"author":"Teji","twitter_card":"summary_large_image","twitter_creator":"@teji_tejinder","twitter_site":"@teji_tejinder","twitter_misc":{"Written by":"Teji","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdesignerinc.com\/blog\/12-essential-scroll-to-view-animation-trends\/#article","isPartOf":{"@id":"https:\/\/webdesignerinc.com\/blog\/12-essential-scroll-to-view-animation-trends\/"},"author":{"name":"Teji","@id":"https:\/\/webdesignerinc.com\/blog\/#\/schema\/person\/5e2f01e80461d9a5ca3c361b86f405e7"},"headline":"12 Essential Scroll-To-View Animation Trends","datePublished":"2017-09-13T14:26:22+00:00","dateModified":"2017-09-13T15:55:15+00:00","mainEntityOfPage":{"@id":"https:\/\/webdesignerinc.com\/blog\/12-essential-scroll-to-view-animation-trends\/"},"wordCount":1252,"commentCount":0,"publisher":{"@id":"https:\/\/webdesignerinc.com\/blog\/#organization"},"image":{"@id":"https:\/\/webdesignerinc.com\/blog\/12-essential-scroll-to-view-animation-trends\/#primaryimage"},"thumbnailUrl":"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/06-qonto-landing-page-animation.jpg","articleSection":["INSPIRATION","Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/webdesignerinc.com\/blog\/12-essential-scroll-to-view-animation-trends\/","url":"https:\/\/webdesignerinc.com\/blog\/12-essential-scroll-to-view-animation-trends\/","name":"12 Essential Scroll-To-View Animation Trends - Web designer Blog | web designer","isPartOf":{"@id":"https:\/\/webdesignerinc.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdesignerinc.com\/blog\/12-essential-scroll-to-view-animation-trends\/#primaryimage"},"image":{"@id":"https:\/\/webdesignerinc.com\/blog\/12-essential-scroll-to-view-animation-trends\/#primaryimage"},"thumbnailUrl":"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/06-qonto-landing-page-animation.jpg","datePublished":"2017-09-13T14:26:22+00:00","dateModified":"2017-09-13T15:55:15+00:00","breadcrumb":{"@id":"https:\/\/webdesignerinc.com\/blog\/12-essential-scroll-to-view-animation-trends\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdesignerinc.com\/blog\/12-essential-scroll-to-view-animation-trends\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdesignerinc.com\/blog\/12-essential-scroll-to-view-animation-trends\/#primaryimage","url":"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/06-qonto-landing-page-animation.jpg","contentUrl":"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/06-qonto-landing-page-animation.jpg","width":1856,"height":871},{"@type":"BreadcrumbList","@id":"https:\/\/webdesignerinc.com\/blog\/12-essential-scroll-to-view-animation-trends\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdesignerinc.com\/blog\/"},{"@type":"ListItem","position":2,"name":"12 Essential Scroll-To-View Animation Trends"}]},{"@type":"WebSite","@id":"https:\/\/webdesignerinc.com\/blog\/#website","url":"https:\/\/webdesignerinc.com\/blog\/","name":"Web designer Blog | web designer","description":"Web Designer and Developer Blog","publisher":{"@id":"https:\/\/webdesignerinc.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdesignerinc.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webdesignerinc.com\/blog\/#organization","name":"Web designer Blog | web designer","url":"https:\/\/webdesignerinc.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdesignerinc.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/logo1.png","contentUrl":"https:\/\/webdesignerinc.com\/blog\/wp-content\/uploads\/2017\/09\/logo1.png","width":409,"height":80,"caption":"Web designer Blog | web designer"},"image":{"@id":"https:\/\/webdesignerinc.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Webdesignerinc","https:\/\/x.com\/teji_tejinder","http:\/\/www.linkedin.com\/in\/tejinder-singh-97bb19115"]},{"@type":"Person","@id":"https:\/\/webdesignerinc.com\/blog\/#\/schema\/person\/5e2f01e80461d9a5ca3c361b86f405e7","name":"Teji","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3933d592d4425623e44a3ddce18ae04f785295e0dd9b8b9d99251e81a0544a52?s=96&r=g&d=https:\/\/webdesignerinc.com\/blog\/wp-content\/plugins\/userswp\/assets\/images\/no_profile.png","url":"https:\/\/secure.gravatar.com\/avatar\/3933d592d4425623e44a3ddce18ae04f785295e0dd9b8b9d99251e81a0544a52?s=96&r=g&d=https:\/\/webdesignerinc.com\/blog\/wp-content\/plugins\/userswp\/assets\/images\/no_profile.png","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3933d592d4425623e44a3ddce18ae04f785295e0dd9b8b9d99251e81a0544a52?s=96&r=g&d=https:\/\/webdesignerinc.com\/blog\/wp-content\/plugins\/userswp\/assets\/images\/no_profile.png","caption":"Teji"},"description":"i am admin"}]}},"_links":{"self":[{"href":"https:\/\/webdesignerinc.com\/blog\/wp-json\/wp\/v2\/posts\/27","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdesignerinc.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdesignerinc.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdesignerinc.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webdesignerinc.com\/blog\/wp-json\/wp\/v2\/comments?post=27"}],"version-history":[{"count":0,"href":"https:\/\/webdesignerinc.com\/blog\/wp-json\/wp\/v2\/posts\/27\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdesignerinc.com\/blog\/wp-json\/wp\/v2\/media\/18"}],"wp:attachment":[{"href":"https:\/\/webdesignerinc.com\/blog\/wp-json\/wp\/v2\/media?parent=27"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdesignerinc.com\/blog\/wp-json\/wp\/v2\/categories?post=27"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdesignerinc.com\/blog\/wp-json\/wp\/v2\/tags?post=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}