--- title: Scroll-Based Layout Animations | daily.dev description: The main idea is to switch the layout view while scrolling and keep the section pinned. We achieve this by combining GSAP’s ScrollTrigger and Flip which... canonical: https://daily.dev/posts/scroll-based-layout-animations-vh6nlt9td twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Scroll-Based Layout Animations | daily.dev og:description: The main idea is to switch the layout view while scrolling and keep the section pinned. We achieve this by combining GSAP’s ScrollTrigger and Flip which... og:url: https://daily.dev/posts/scroll-based-layout-animations-vh6nlt9td og:image: https://api.daily.dev/og/posts/VH6NLT9Td.png og:image:alt: Scroll-Based Layout Animations og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Scroll-Based Layout Animations **[Codrops](https://daily.dev/sources/codrops)** · 1 min read · 185 upvotes · 20 comments ## Summary The main idea is to switch the layout view while scrolling and keep the section pinned. We achieve this by combining GSAP’s ScrollTrigger and Flip which seamlessly transition the layout to a new design. This is partly inspired by this demo made by the folks of Framer University. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@kyoukhana** · 4 upvotes > Would be cool if there was a tutorial on how to build this **@7zedd7** · 2 upvotes > this is awesome 🔥🔥❤️‍🔥 **@niklasrefnov** · 1 upvotes > ScrollTrigger and Flip could redefine user interactions with websites. However, I wonder how this might impact the load time and performance? Is it efficient even with heavy content sites? **@niklasrefnov** · 1 upvotes > These animations reminds me so much of Apple's product landing pages. They've always had that knack for marrying design and tech to create engaging, dynamic experiences. Very nice. **@connicee** · 0 upvotes > pretty cool ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments --- Tags: [#javascript](https://daily.dev/tags/javascript) [View this post on daily.dev](https://daily.dev/posts/scroll-based-layout-animations-vh6nlt9td) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Scroll-Based Layout Animations","url":"https://daily.dev/posts/scroll-based-layout-animations-vh6nlt9td","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/scroll-based-layout-animations-vh6nlt9td"},"datePublished":"2023-07-20T09:40:03.978Z","dateModified":"2023-07-20T14:10:56.027Z","description":"The main idea is to switch the layout view while scrolling and keep the section pinned. We achieve this by combining GSAP’s ScrollTrigger and Flip which...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/51229ce284c0b41b9cb976811f527d8d?_a=AQAEufR","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/51229ce284c0b41b9cb976811f527d8d?_a=AQAEufR","isAccessibleForFree":true,"articleSection":"Codrops","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Codrops","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/codrops","url":"https://daily.dev/sources/codrops"},"commentCount":20,"discussionUrl":"https://daily.dev/posts/scroll-based-layout-animations-vh6nlt9td","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":185},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":20}],"keywords":"javascript","timeRequired":"PT1M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Codrops","item":"https://daily.dev/sources/codrops"},{"@type":"ListItem","position":3,"name":"Scroll-Based Layout Animations"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/scroll-based-layout-animations-vh6nlt9td","comment":[{"@type":"Comment","text":"Would be cool if there was a tutorial on how to build this","datePublished":"2023-07-23T01:08:33.037Z","url":"https://daily.dev/posts/VH6NLT9Td#c-cI1VkxIfB","author":{"@type":"Person","name":"Kevin","url":"https://daily.dev/kyoukhana","image":"https://avatars2.githubusercontent.com/u/756849?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4}},{"@type":"Comment","text":"this is awesome 🔥🔥❤️‍🔥","datePublished":"2023-08-08T06:04:51.809Z","url":"https://daily.dev/posts/VH6NLT9Td#c-sNIxuIrbt","author":{"@type":"Person","name":"Zeel Patel","url":"https://daily.dev/7zedd7","image":"https://lh3.googleusercontent.com/a-/AFdZucqlwWBo3jdHpBc2s1FJVPHCQM6gVk_TB6hO5A2HUQ=s100"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"ScrollTrigger and Flip could redefine user interactions with websites. However, I wonder how this might impact the load time and performance? Is it efficient even with heavy content sites?","datePublished":"2023-07-21T08:13:35.668Z","url":"https://daily.dev/posts/VH6NLT9Td#c-dwrIBSLQ2","author":{"@type":"Person","name":"Niklas Refnov","url":"https://daily.dev/niklasrefnov","image":"https://media.daily.dev/image/upload/s--uFGEfXTn--/f_auto,q_auto/v1/avatars/avatar_5pht0nenOD0YJqflNsYht"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"These animations reminds me so much of Apple’s product landing pages. They’ve always had that knack for marrying design and tech to create engaging, dynamic experiences. Very nice.","datePublished":"2023-07-26T10:51:36.331Z","url":"https://daily.dev/posts/VH6NLT9Td#c-wm89OLieb","author":{"@type":"Person","name":"Niklas Refnov","url":"https://daily.dev/niklasrefnov","image":"https://media.daily.dev/image/upload/s--uFGEfXTn--/f_auto,q_auto/v1/avatars/avatar_5pht0nenOD0YJqflNsYht"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"pretty cool","datePublished":"2023-07-24T01:25:32.046Z","url":"https://daily.dev/posts/VH6NLT9Td#c-PbWcKZRfa","author":{"@type":"Person","name":"Connice","url":"https://daily.dev/connicee","image":"https://avatars.githubusercontent.com/u/91693637?v=4"}}]} ```