The Top 165 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.

Another stunning snapping slider design for your Webflow site. As users scroll down the page each section elegantly snaps to the next slide effortlessly. Beautiful transitions change both the primary image, and background image of the relevant sections. The slides information is all driven by Webflow's native CMS system powered by GSAP, and Swiper.js. In order for this to work you'll need to add the relevant code found in the page settings, both body and head.

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.

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.

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.

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.

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.

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.

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.

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/

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.

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.

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.

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.

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 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 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 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.

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 simple, yet sophisticated overlapping image scroll interaction powered by Lenis.js, GSAP and Scrolltrigger. When a user scrolls down the page an image overlaps and switches out the previous image based on the scroll depth of a page. This utilizes custom code so you'll need to add the custom code found on the page settings, as well as the CSS found via the HTML embed. This code works on both desktop and mobile sites to provide the same experience to all users regardless of device. A great way of adding dynamic elements to your Webflow site with simple use of GSAP, Scrolltrigger and Lenis.js.

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.

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 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.

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.

A unique scrolling image sequence in Webflow created by GSAP and Scrolltrigger. Be sure to add the custom styles embed, head script, and body scripts for this to work properly.

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 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.

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.

Here's a way of achieving a grid of images that move from left to right on page scroll. Smooth scrolling is achieved via luxy.js script.

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.

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 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 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 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.

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 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.

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

A simple script to create a reverse scroll effect in Webflow. This technique utilizes a simple script to create the effect. You'll need to add the custom script from the Page Settings to work properly.

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.

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

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

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.

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.

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.

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

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 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.

An example of integrating locomotive scroll integration in Webflow

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.

A full page CMS scrolling interaction that's perfect for portfolios and product driven websites in Webflow. Built with GSAP this scroll interaction creates smooth scrolling interactions between sections on your Webflow site. Be sure to add the custom global styles embed symbol as well as the custom scripts in the head and body section.

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 scroll into portfolio transition effect for Webflow. Be sure to use the HTML embed code found within the global styles symbol. The majority of this transition effect is accomplished via Webflow's native interactions.

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

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.

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.

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

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.

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.

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.

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

A technique of adjusting the pages background on scroll via GSAP and ScrollTrigger. As the user scrolls down the page the background color of the site changes and the text adjusts as well. This adds a unique style interaction and feels lightweight thanks to GSAP and Scrolltrigger. This technique uses custom code and you can find the necessary code within the custom code page settings. This custom code uses custom attributes using the tr-pagecolor-element=trigger to trigger the page color switch. It then adds a class to the parent class in order to perform the color changes for the text and elements as well as the BG color changes.

Here's a way to achieve a folding and unfolding technique for divs or items within your Webflow site on page scroll.

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.

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

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 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.

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

A way to achieve text appearing on scroll effect.

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 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'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.

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 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 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 scroll-into-view animation that teases the portfolio image as soon as they come into the view port.

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 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.

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

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 GSAP grid scroll effect powered Scrolltrigger. As a user scrolls down the page the images in the grid shrink down as the reach the top of the page. A unique and fun experiment of using GSAP & Scrolltrigger for a simplistic yet unique Webflow interaction. The code to update is also very simple so most users should be able to utilize this, although the design within Webflow may be somewhat cumbersome. In the custom code page settings you can update the photo image class, provide the trigger and update the scale and easing effect.

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.

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.

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.

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.

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 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.

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.

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 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 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 clean and easy to implement scrolling hero section for your Webflow project using parallax.

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 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.

Here's a way to create a custom homepage with a split and reverse scroll technique in Webflow. When someone scrolls on the page the two sections scroll in opposite directions providing a unique interaction to add uniqueness to your Webflow site.

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.

A unique way of displaying a falling leaf via scrolling interactions with Webflow. This was not built with any lottie animations however was built entirely from one large Webflow native interaction via the While page is scrolling functionality. The leaf sits within an invisible circular track that rotates and guides the direction of the leaf. A great example of what's possible to achieve via Webflow's native interactions and a bit of ingenuity.

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.