The Top 144 Scroll Webflow cloneables

Several different text reveal on scroll animations for Webflow. These techniques use a paid GSAP plugin called SplitText was used to achieve this effect. You can find the plugin here: https://greensock.com/club/ There are three different animations demonstrated here, line animation in which each line is animated as the user scrolls into the viewport, word animation in which each word is animated on scroll, and letter animation in which each letter individually animates.

A method to highlight text on page scroll in Webflow. A unique a fun interaction in which the text on the page begins to highlight as you scroll down the page. Each letter even partially highlights depending on where you've scrolled on the page. This effect uses GSAP and Scrolltrigger.js to create the effect. You'll need to add the custom code found on page settings for this to work properly.

A way of utilizing sticky cards that stack on scroll in Webflow. Using position sticky and a scrolling into view interaction allows for this effect without any custom code.

An animated timeline scrolling effect perfect for about pages, historical pages and many others. As the user scrolls down the page a fun native interaction is applied that allows users to visit historical timelines with a unique Webflow interaction. The current date and item that is in view increases brightness while others out of view are faded out. The user can scroll down the page and have historical information provided in a unique and interactive fashion. This interaction uses while scrolling in view and while page is scrolling page trigger interactions.

An infinite scrolling vertical image interaction for Webflow. A great way of achieving a vertical scrolling looping image on your Webflow site. This technique uses custom CSS and JS so be sure to check the custom code within the Page Settings.

Featuring 10 different text and typography scroll effects powered by GSAP, ScrollTrigger, Lenis.js, splitting.imin.js and Scrolltype.js. Keep in mind that these effects are great but you will need to have some understanding of code in order to modify these significantly as they rely on simply the JS libraries and data attributes to apply each effect. The first effect rotates the text and highlights each letter as the paragraph comes into view. This is achieved via the data attributes as mentioned previously. The second text effect showcases each letter coming into view from a different rotation and then all combines together to make the visible text. The third effect has each word come in at different positions from out of view and then into view on page scroll. The third version unwraps each word letter by letter as you scroll down the page. The fourth effect takes each letter and has it fold up at random intervals as you scroll into view. The fifth demonstration shows each letter rotating into place upon scrolling into view. The next demonstration creates a rolling hills effect for the letters as you scroll into view. The next one showcases a paragraph in which each letter is grown from the initial position as you scroll down the page. An appear example follows this one in which each letter of a word appears to be blurry and come into focus as you scroll down the page. The next and final variation has each word come in from random directions to create the paragraph.

A unique stacking cards on scroll interaction in Webflow. When you scroll down the page the cards on the right side stack on top of each other. A unique interaction perfect for a SaaS or technology site. The stacking cards effect was built entirely using Webflow interactions and does not require any additional code or scripts. The effect is created by using the While scrolling into view trigger, with the use of Scale and Filter. The filter applied reduces the overall brightness of the card and the scaling is used to send the item back smaller. Overall a well designed and thought out solution for a stacking card interaction.

Supercharged marquees powered by GSAP. These unlock a whole new level of customization to your marquees via GSAP. The first example showcases two marquees, both on different z-indexes with an image in between both of them so that one marquee is in front of the image and the other is behind it. The next marquee provides a unique vertical marquee that speeds up or slows down as you scroll it into view. The third and final marquee is a horizontal marquee that does the same as the second. As you scroll this marquee into view it speeds up the marquee while the page is scrolling. As mentioned these demos rely upon GSAP and Scrolltrigger to function properly and provide the functionality. You can customize the code from within the custom code page settings.

Here are four different text reveal animations on scroll interactions in Webflow. These designs all use custom code via HTML embeds. The four techniques include classic text review on scroll, growing circle mask on scroll, and text in from left and right on scroll.

Infinite looping scroll marquee with stopping on hover via CSS. Also provides a unique jquery effect for hover over to display more information about the object. The infinite scroll marquee is powered by Webflow's native CMS system. In order for this to work you'll need to add the custom CSS script and JS script found within the Page Settings.

Learn how to implement GSAP ScrollTrigger in Webflow. This tutorial and example cloneable showcases several different Scrolltrigger GSAP effects to turn your Webflow site into a dynamic powerhouse. When loading the page you are presented with a primary image and brand name. As you scroll down the brand moves from the bottom of the page to the top menu while reducing size. Further down the hero section appears and one of the words begins to move behind other text. Further down an image appears and then grows as you scroll further down the page. This shifts into the product section in which images appear with a parralax effect over certain words. This shifts into another product section and the backgrounds transition while the images still float above the text. Each section has a different background color/text color with the images continually scrolling above the text. This utilizes a lot of custom code, and utilizes Webflow's native CMS for products and items found on this page with CSS nth-child. You will need to add the custom code found in Page Settings to get this to work properly. Watch my GSAP Scrolltrigger tutorial for this project at https://www.youtube.com/watch?v=x-BVEhyYW50 Conceptual design for https://www.minimalgoods.co/

Here's another way to add full page scroll snapping functionality to Webflow via Fullpage.js. In this example you can see full page, smooth snapping section on scroll. Please note that you'll need to add the custom code found within the page settings found in both the header and body sections.

Here's a way of adding a full page infinite scrollable and draggable grid in Webflow. This grid is fully draggable in ALL directions, horizontal and vertical as well as in any other direction. A perfect way of adding a unique design for portfolios, photography and much more in Webflow. This can also be used to tie into Webflow's native CMS system.

Integrate GSAP scroll text effects to your Webflow site. Eight different text scroll effects powered by GSAP for your Webflow site. The effects include words sliding up, individual words rotating in, words sliding in from the right, individual letters sliding up, individual letters sliding down, and individual letters fading in. This effect utilizes GSAP, ScrollTrigger and split type in order to work properly, you'll also need to add and modify the pages custom JS code in order for it to work. The code can be modified to change the start offset of the effect, the opacity, the duration, the ease effect and much more. Unlock the power of GSAP for various text effects today in your Webflow projects.

A unique scrolling interaction in which the images scroll up the page and the title changes in Webflow. This scroll interaction was built entirely with Webflow's native interactions and requires no additional code. As the users scroll down the page images from various locations on the page scroll up the page while at the same time the title of each image is shown as they are introduced on the page.

A text gradient scroll effect that was similar to the one used on Apple's website. This text scroll effect showcases a block of text, which has a gradient effect applied to it. As the user scrolls down the bottom portion of the text is visible and as the user scrolls down further the entire text is visible, scrolling down further on the page the text then fades out. This effect does not require any HTML embed or custom code and utilizes Webflow's native interactions. This interaction utilizes the element trigger and while scrolling into view to create the effect. This interaction works by changing the opacity and moving an object over the text.

A unique interaction of scrolling to zoom into full screen on a section in Webflow. This example uses no custom code and strictly Webflow native interactions to zoom into a section with a background video.

Here's a way of adding a text reveal animation on scroll to Webflow powered by Anime.js and Luxy.js. As a user scrolls down the page the text animation is displayed showing one letter fading in at a time. As you scroll further down the page you'll notice the smooth scrolling effect created by Luxy.js. All of this is powered by the custom code found within the page settings of both the header and body section. Be sure to add these to your site in order for this method to work properly.

Here's an easy way to create a masked video in text in Webflow. No custom code is required. This was created with an SVG file and added interactions to zoom in while scrolling.

Here's a unique parallax blur scrolling animation that's perfect for portfolio sections in Webflow. This parallax blur scrolling animation effect adds the image that's being scrolled to the background with a blur filter effect. All of this is achieved via native Webflow interactions.

Here's a way of adding GSAP's motionpath technique using Scrolltrigger and Motionpath in Webflow. As a user scrolls down the page an animation follows a wavy path. Please note in order to get this to work you'll need to add the custom code found. in the closing body tag as well as the custom HTML embed found near the image file.

A smooth scrolling effect in Webflow that zooms into images as the page is scrolled. Perfect for adding smooth page scrolling and an image effect within your Webflow site.

Here's a way to achieve a sticky horizontal scroll section within your Webflow site. Using CSS sticky and interactions you can now have a showcase section that horizontally scrolls on scroll down in Webflow.

A great way to achieve a sticky Webflow effect for features, about sections or really anything in which the image becomes sticky in the viewport while the text still scrolls. As you scroll down the images are sticky while the text is scrollable, between each section there's an image transition effect. This effect uses no custom code and is all accomplished via Webflow's while scrolling into view interaction with the opacity and scale options.

A unique vertical navbar with a page scroll progress bar for Webflow. This vertical navbar features a progress bar that indicates how far down the page the user is and was created entirely with Webflow interactions. Note there is some CSS however this controls hiding the browsers default scroll bar. Otherwise this was built and created entirely with Webflow interactions. Taking advantage of While page is scrolling a div is moved down the page based on the percentage of the page that the user has scrolled down. This is perfect for storytelling or blog posts or pages with a large amount of information. A wonderful vertical menu solution for Webflow.

A simple way to add a mouse scroll animation with a dot moving from the top to bottom. This is not a lottie file or gif, this is made with interactions and divs.

Here's a horizontal scrolling technique with a progress bar and pop up navigation for Webflow. A perfect example of how to add horizontal scrolling to your Webflow site with a progress bar indicating how far you've scrolled.

Here's a unique way of adding count up odometers to your Webflow site via Hubspots odometer library. This cloneable includes several features, count up by 1 in a fixed interval, trigger odometer via GSAP Scrolltrigger, currency options, interval increase by own value, interval increment with a randomly generated number in a range, show numbers on a button click and a tutorial of how to make it work.

A CMS driven 3d parallax effect for photos and portfolios using classes by Finsweet.

Here's a way of adding a circular text with movement effect to Webflow via circulartype.js. Unfortunately the sizing is a little weird and doesn't work properly, although it does work. This includes an interaction for page load, scrolling through sections ad for page transitions.

A sun circle animation that grows based on the page scroll in Webflow. This entire animation is built natively with Webflow interactions and requires no custom code. A great example of how you can use Webflow's native interactions to build in depth, multi stage animations based on page scrolling.

A simple animation that has a scroll bar interaction/animation as you scroll down the page in Webflow. The animation is applied to the class, if you want to add more steps simply duplicate the last step and then edit the content.

No javascript, no interactions, easy CSS scrolling marquees for your Webflow site. This is the easiest way to add marquees to your Webflow site without ANY confusing interactions or complicated JS solutions. Please note that you must have an even number of elements within your marquees for them to function properly and not skip around. The CSS for each marquee is included inside of the container and denoted with an emoji.

A GSAP CMS horizontal scroll effect that utilizes a combination of Webflow's CMS, Webflow interactions and GSAP to allow for horizontal scrolling. This allows for distance based on the number of cards within each section and if not enough cards are present in the section the section will still appear without having the horizontal scroll effect. Using ScrollTrigger you can customize the number of items viewable upon load and the scroll speed between each slide. This mobile and responsive friendly solution allows you to customize the number of items viewable in each resolution. The individual cards can be powered by Webflow CMS allowing for truly dynamic Webflow sites and designs without a major refactoring of any code in order for it to work.

Want to add smooth scrolling to your Webflow site? With this cloneable you'll be able to add smooth scrolling via luxy.js. Adding smooth scrolling doesn't need to be complicated and there are plenty of options to achieve this inertia type scroll effect although Luxy.js provides a great way to achieve this.

A unique way of showcasing your logo front and center and have it move up on page scroll in Webflow. This adds a fun dynamic element to your Webflow site and draws the users attention in. This interaction was created entirely from Webflow's native interactions using the While page is scrolling functionality and size, move, scale, opacity and more. This requires no additional custom code and can be cloned and setup quickly.

Using Webflow's new blending modes this text effect on scroll becomes apparent of the capabilities of blend modes.

Add some dynamic flair to your iPhone mockups in Webflow. When you scroll down the animated phone unlocking animation is shown to reveal content. The phone has auto updating date and time based on the users location. The iPhone GUI was recreated and the phone has the ability to unlock and reveal content on scroll. The mockup is fully customizable and you can change the content and wallpaper and is also fully responsive on all devices.

Two way, opposite text scrolling based on page scroll in Webflow. When a user scrolls down the page two pieces of text begin to move in opposite directions. A simple and fun demonstration of adding dynamic elements to your Webflow site using native Webflow interactions.

An example of a fixed slogan/text that changes when scrolling through different sections on a Webflow site. The embedded code is compatible with all major browsers, including some variations of Internet Explorer and Edge.

Liven up your hero section with this unique vertical hero scroll animation.

A scroll to reveal text masking interaction in Webflow. When a user scrolls down the page the text is zoomed into the masked image and reveals the image upon scrolling. You can edit the text inside each section and change the image to your choosing. You can also add other icons or graphics inside of it. Just be sure to use black/white elements only.

A unique horizontal scrolling technique created for Webflow and built using a combination of Webflow interactions, custom CSS code and jQuery. This allows you to add horizontal scrolling to your Webflow site, this cloneable also features a page loader and a mouse cursor interaction. As you scroll down the page you'll notice the horizontal slider that also features parallax style effects, there's a unique text outline stroke effect. Each section is driven by Webflow CMS which allows you to easily add or remove pages based on your needs and requirements. This was built to work on both mobile and desktop devices making it responsive for any size browser.

A unique demonstration of using GSAP Flip & Scrolltrigger to move a video around the page based on the users page scroll in Webflow. As the user scrolls down the page the video transforms and moves in different locations on the page. It grows, rotates, and shifts locations, becoming the background of a section, moving to the right of a card and following the user throughout the navigation throughout the site. This method requires the custom code found within the custom code section in page settings. Utilizing GSAP, Flip.js and Scrolltrigger.js you can customize the locations and targets based on element IDs. Be sure to check the page design as well since there are custom CSS HTML embeds found on the page as well.

Here's a way to add a text reveal on scroll to your Webflow site. An eye catching animation reveals the text as the user scrolls down the page. An underline appears and then glitches the color and finally rolls away as you scroll.

An amazing 3D scroll animation that rotates a tablet towards the viewer on scrolling down. This can be used for both static images or animated videos and creates a wonderful depth perspective on page scroll by users.

Here's a technique to fade text in and out on page scroll with various sections and different texts in Webflow.

Here's a way to achieve a full view experience on scroll for different sections on your site. Essentially this is a way to achieve snap on scroll between sections with a pagination to indicate which section the viewer is viewing. There is code added to the page so be sure to add that to your site as well. This will not work in preview and will only work on the published site.

A scroll into view CMS driven portfolio or features interaction. Also has hover over effect.

Unleash the power of GSAP Scrolltrigger toggle in your Webflow projects. This allows you to create complex, and yet lightweight effects powered by both GSAP and Scrolltrigger. This CMS powered GSAP & Scrolltrigger effect showcases a hero section in which three different slides transition between each other based on the users position on the page. After the initial hero the second section features different words and images that ease in and out based again on the users position on the page. These sections are utilize Webflow's native CMS to power each slide. You will find the custom code that powers this under the pages custom code settings and it allows for you to customize the items, the trigger element, the timeline and mobile friendly attributes.

Here's a technique to display the percentage scrolled down indicator on your Webflow site. Using a custom JS script, which needs to be added to your closing body custom code in Page Settings you can easily add a custom scroll indicator to your Webflow sites. Simply update the .your-class div and with the text div you created and you'll be all set.

A sticky, stackable cards section that stacks upon scrolling on the Webflow site.

Here's a way to add a simple horizontal scrolling cards section to your Webflow site. The cards are designed for horizontal scrolling on desktop and tablets and vertical stacking on mobile. Since this was designed using Flexbox, you can add/remove cards and the scroll will still work. Although you'll likely want to resize the scroll track if you use a lot of cards. Each card can have a background video added to the card for a neat reveal on hover effect.

An example of integrating locomotive scroll integration in Webflow

Here's a way to add scrolling section transitions on a Webflow site. You can easily change the colors of the sections to whatever you choose and implement this easily on your Webflow site.

Do you need to disable page scroll on click in Webflow? Here's a method to disable page scrolling on an event click. This is perfect for modals, popups or really any method where you need to limit the page scroll on a Webflow site. This cloneable provides in depth explanations and tutorials of how to achieve this within Webflow.

A beautiful horizontal image portfolio parallax effect for Webflow. When a user scrolls down the page the images move from right to left and provide a parallax style effect as the image behind the visible section is moved as well. This technique utilizes Webflow's native interactions and doesn't rely on extra Javascript or CSS. The technique uses While scrolling in view, with one div moving over at one speed and the section with images moving over at another, providing this unique parallax image scroll effect.

A way to achieve text appearing on scroll effect.

A way of creating a stacking testimonial card section in Webflow on scroll. As the user scrolls down the page testimonial cards are stacked on top of one another. This technique was built primarily with Webflow interactions although does use a HTML CSS embed for the numbers on the card. You can remove this if you don't plan on using the outlined numbers found in this demonstration.

A way to implement a parallax scroll effect on your Webflow site.

Highlight text as you scroll via Webflow via interactions that are based on the center of the viewport. This is created via Webflow interactions and some custom CSS found within the HTML embed found in the page designer. As the users scroll down the page a block of text is highlighted as it enters the viewport. This could be great for lyrics or similar style sites.

A set of Scrollify.js section scroll interactions and unique Webflow interactions to make for section scrolling interactions in Webflow. This cloneable features Scrollify.js and the settings can be found within the pages custom code section. Each section has a custom class added in which the scrollify.js script utilizes. Each section utilizes Webflow native interactions Scroll into view in which several different individual actions are applied such as , move, opacity, scale, rotate and opacity. In this example the Scrollify.js script is being used to snap each section on scroll and all of the other interactions are powered by Webflow. While this could have been built with Webflow interactions as well the author decided to use Scrollify to limit the number of interactions per section.

Make those Macbook mockups interactive by adding internal scroll to the screens via this Webflow cloneable. This cloneable requires no additional code and can easily be applied to your site. Simply copy the element to your site and then modify the image found in the Macbook wrapper called website image and modify it. This will allow you to add an image inside of a Macbook mockup so that the users can scroll inside of it. A fun way of showcasing items, features, portfolio site screenshots and more.

A sticky horizontal scrolling timeline container for your Webflow site. This is a combination of sticky position, overflow-x hidden and a scrolling in view interaction. This is perfect for timelines, milestones, process steps, about, history and much more.

Here's a way to create a fixed header text section within Webflow in which the header text stays static as the page is scrolled. A little tweak with the interaction and by moving the header 100VH up and down while scrolling over an element.

A unique way of creating an interactive scrolling timeline within Webflow. This demonstration provides a Covid timeline as an example for it's implementation. The animation is based on while scrolling into view with a scale of the line div blocks from 0 to 1. A

A unique iPhone mockup screen scroll animation for Webflow and perfect for portfolios and similar design elements. This cloneable features no additional custom code or HTML embeds and utilizes Webflow's native interactions to perform the unique animation. As a user scrolls down the page the images in the iPhone mockup provide a scroll interaction that appears to show the images scroll down as the page is scrolled down. Utilizing Webflow's While scrolling in view this moves the images within the iPhone mockups as the page is scrolled down. Since this is class based this works for all of the iPhone mockup images throughout the site. A simple, yet effective Webflow interaction that makes any portfolio pop.

A well designed scrolling sections that utilizes no additional page code or custom codes in order to achieve the effect. As a user scrolls down the page it appears that each section is on a different Z-index, which in turn makes it seem like the sections are unfolding. There's also a unique text masking effect being applied to one section so that the text appears transparent and you can view the background change in the text as you scroll down. As mentioned this cloneable doesn't use custom code or even Webflow native interactions to showcase it's effects. Instead it uses Webflow designer and unique positioning and text masking functionality.

Here are several demonstrations of mouse hover interactions as well as text page scroll animations and transitions for various sections of a Webflow site.

Here's a technique to lock the page scroll on a modal pop up window in Webflow. This is useful to ensure that the page doesn't scroll when a popup CTA modal window or mobile navigation modal is shown on your Webflow site.

Perfect for a services or overview page on a Webflow site. This progress bar indicates where you've scrolled through and which content you're currently viewing. The progress bar was created to scroll to the dynamic CMS collection blocks, typically this is not possible with Webflow since collections can't have anchor links. This was resolved via a nice hack by assigning the ID to the collection classes through an embed and then converting the progress bar links to anchor links so that you can scroll through the various content naturally.

A unique photo/masonry grid for Webflow featuring reverse scrolling interaction and mouse hover over effects. As the user scrolls down the page two sets of images scroll in one direction while the middle row moves in the opposite direction. This effect was created strictly from Webflow's native interactions and doesn't require any extra JS or CSS.

A unique how it works horizontal scroll feature section perfect for your Webflow site. As a user scrolls down the page each section snaps into place horizontally. This effect was built entirely using Webflow's native interactions and does not utilize any other JS libraries or custom code. This effect was created by creating a scroll wrap with three different triggers for each section. As the user scrolls through each section the opacity, background color and size of each element changes. A unique approach to creating horizontal sliders within Webflow without the use of additional JS libraries or code.

Here's a way to achieve a 3D scrollable isometric grid in Webflow. When you add this to your Webflow sites you'll create a dynamic, scrollable grid that adds a 3D popping effect on hover. This technique is accomplished without any interactions and uses Webflow's native transitions and effects. This example also is tied to Webflow CMS.

A unique scroll interaction created using solely Webflow interactions and some minor CSS via an HTML embed. As the user scrolls down the page the hero image zooms out while the text continues to scroll up the page. As you enter the next section on the page the images for each section change in the same div that the original image zoomed out unto. This continues for each section on the page as you scroll throughout the site. An excellent use of Webflow's interactions and the While scrolling in view element trigger. All that is required to create this effect is the move element within the mentioned scrolling in view trigger.

Here's a way to create a rotating image on page scroll in Webflow. Perfect for portfolios, products images, and much more.

Here's a technique to autoplay videos on horizontal scroll in Webflow. Using the power of Youtube APIs, window scroll events and the power of Webflow interactions you're able to now create horizontal scroll animations in which videos are automatically played or paused on scroll events. There's also a delay on the play function to add a bit of an intro animation to each video by mixing the scroll into view interactions.

A demonstration of parallax scrolling movement interaction examples within Webflow. A perfect way of understanding how to build custom parallax scrolling effects within your Webflow site.

Have your navbar shrink on page scroll via this Webflow cloneable. Easily create dynamic navbars for your Webflow site that shrink upon scrolling down the page. Once a user reaches a certain point on the page the navbar transitions from dark to light while shrinking. This does not require any custom code and utilizes Webflow's native interactions. This utilizes Webflow's While scrolling in view for two different classes and as previously mentioned does not require any extra custom code. This cloneable is perfect for anyone looking to create a dynamic navbar that allows for dynamic changes based on the users scroll depth on the site.

Here's a way to create a feature section that highlights the text and changes the image based on page scroll. This was created with 100% native Webflow interactions.

An implementation of Locomotive.js smooth scroll in Webflow that includes position fixed, sticky and CSS interactions. Utilizing Locomotive.js smooth scroll allows for some unique interactions and scroll effects. You can find the script within the custom code page settings. Here you can modify the smoothing, mobile smoothing, tablet settings and the multiplier applied. You can set the time frame and for the ability to use anchor texts between sections of your site. Add a unique smooth scrolling effect to your Webflow site today by taking advantage of Locomotive.js

A 100% native CMS based Webflow horizontal scroll technique. This CMS horizontal scroll animation was built solely with Webflow native interactions without any custom code. The method was to use a second collection list and make the length of the scroll trigger wrapper always proportional to the width of the horizontal strip. This way nothing to adjust or change in the designer when the number of items changes, and the animation will always feel consistent and smooth.

Here is a way to create dual snapping cards on scroll in Webflow. When you scroll both cards snap into place, the slides change with an interesting reverse scrolling effect. Position sticky and Webflow interactions give the illusion of a snapping effect.

A rotating animation that transforms an image before and after the item scroll in Webflow. This is perfect for before and after effects and can be used without the rotation effect as well. There's also a mouseover interaction that creates a magnetic pull of the image.

A unique scroll-into-view animation that teases the portfolio image as soon as they come into the view port.

Here's a technique of toggling a class based on scroll in Webflow via GSAP. Using this technique you can trigger any class that you'd like, in this example images, as a user scrolls down the page. This technique is using CMS to drive the images and as the user scrolls down the page the class is triggered via GSAP and Scrolltrigger.js. Be sure to add the custom code found within the Page Settings (body and head) in order for this to work properly on your site.

Here is a beautiful, image based portfolio with smooth transition delays and snap-to-scroll properties in Webflow. This CMS powered Webflow technique features snap scrolling functionality, mouse cursor hover over effects and a smooth transition with delay perfect for any portfolio page in Webflow. Please note that there is code within the closing body section in Page settings required for the smooth scrolling using Luxy.js.

An example of how to create a sticky navigation sidebar in Webflow. Perfect for blogs, article pages or other sites that require a sticky sidebar in Webflow. In this demonstration there are three examples of sticky sidebars to showcase that multiple can be added to the same site.

A unique 3D scrolling interaction created for Webflow. As a user scrolls between sections each transition has various 3D effects with the image coming in one way and the text flying in another way. A majority of this was created with Webflow's native interactions while some minor CSS was utilized for the scrolling effects.

Here's an example of how you can integrate Mapbox into your Webflow project to help create an interactive storytelling experience. This is a great way to create an immersive map interaction while scrolling to different sections on your site. Perfect for giving the history of a city, providing a guided tour and much more. You will need to replace the Mapbox with your own API credentials. Unfortunately this isn't optimized for mobile yet.

An interactive horizontal scroll pricing calculator for Webflow. This lets customers or prospects calculate the pricing of your services via an interactive pricing calculator.

Ever wanted to create your own, customized scrollbar in Webflow? Now you can use any image you'd like to replace the browsers standard scrollbar. In this example a loaf of bread was used to customize the scrollbar. You can find the custom scrollbar code within an HTML embed found on the Webflow cloneable.

A great way to showcase different content in sections based on users page scroll. This cloneable utilizes GSAP and Scrolltrigger in line with Webflow CMS to showcase various content based on when a user scrolls down a page. In this example as the user scrolls the primary image changes to the next image based on the content that's currently visible. This is also hooked up to Webflow CMS in order to power this by your Webflow CMS collection. This opens all sorts of potential use cases aside from the one demonstrated here. You could switch content out instead of images, or even add videos or other GIF files instead of static images. A simple and yet powerful GSAP cloneable that's perfect for your Webflow arsenal.

Here's a great way to add a dynamic, image changing section based on scroll in Webflow. The left section is absolute image that changes as you scroll down the page further.

A horizontal scroll interaction built for Webflow using native Webflow interactions. This horizontal scroll allows you to use as many panels as you'd like and the panels don't need to be the same width or unit type. This horizontal scroll utilizes the While scrolling in view element trigger, and then utilizes only the move scroll action to complete this Webflow interaction. To add other panels simply add a new panel div in the track-flex section.

A free cloneable hero section that includes a scroll to reveal text interaction. As the user scrolls down the page the next section is zoomed into and the text then begins to appear. Make sure you have selected the body (all pages) and update your typography settings to 1vw for it to work.

A fully responsive 3D flippable/foldable card effect on hover. You can also achieve this via the scroll method as there are two options in this demonstration. These affects were created using Webflow's native interaction and require no additional code. The interaction uses hover event and rotate and move actions.

A unique javascript powered Webflow interaction in which images change on items in viewport and a clicking sound is triggered for each new item that's centered in the viewport. As mentioned this utilizes a custom javascript which is found in the pages custom code section. This script allows you to utilize Webflow's native CMS to create a list of text items and associated images with each CMS item. As the user scrolls down the list of text items, the items that are centered in view become highlighted white, the primary CMS image is shown and a clicking sound is played. A unique and fun way of adding a little bit of JS to your site to create unique, and effective Webflow interactions.

Here's a way to add a horizontal scrolling section to your Webflow site. It's perfect for timelines, features and other similar sections of your site. This technique also has a scroll into view animation for each point.

I wanted to see if I could rebuild this beautiful website. All interactions are created in Webflow :) Custom code used to create infinite scroll. Current limitations (stretch goals to fulfil at a later date): 1) Sound effects 2) Text changing effect Rebuild of https://one-is.com