SaaS Style Hero Section

A beautiful Swiper.js overlapping cards slider built for Webflow. This Swiper.js slider is perfect for a hero section or features section of a site. When a user navigates between slides the top card is removed and the next card in line comes into view. The cards are stacked with various offsets so it looks like playing cards. There are text transitions for each text associated with the slide. This slider was created using Swiper.js and utilizes Webflow's native CMS collections. This allows you to dynamically generate slides based on the collection list items. This requires custom code so be sure to look at the pages custom code for the Swiper.js code. You can modify the Swiper.js code to include grabcursor, looping, and utilizing arrows to navigate between slides.

A fun example of how to utilize native div shapes to create ultra gradients in Webflow. In this example the author creates unique gradients via Webflow by creating colored blobs and utilizing a number of different effects to create a gradient style background for your Webflow site. This utilizes a combination of border radius, 2d & 3d transforms and other effects to allow you to create gradients without 3rd party images or CSS gradient classes. Add in native Webflow interactions and you can build Stripe like animated gradients in no time.

A demonstration of how to add an infinity cycle text header rotation with 3D style changes in Webflow. This technique uses native Webflow interactions and does not require any 3rd party scripts or plugins to work properly.

An excellent example of Swiper.js for Webflow CMS items. This example is perfect for a hero section, or any Webflow slider that wants to be upgraded to utilize Swiper.js. This demo includes scroll interactions, in which each card is changed upon scroll up or down on the mouse and also includes next & previous buttons to navigate between slides. Each slide changes the thumbnail previews of each slide, updates the slide active and slides the text of each slide. The thumbnails and text titles allow you to navigate between each slide as well. This script utilizes Webflow CMS, allowing you to utilize Webflow's CMS items in your native Swiper.js slider. Keep in mind that this utilizes Webflow's custom code section and you'll find the relevant code within Webflow's page custom code settings of this Webflow cloneable.

A full page background video hero section design in Webflow. An easy way to integrate a background video hero section in your Webflow projects with unique button interactions, and a scroll indicator.

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

A demonstration of using Swiper.js in a hero section. This is also mobile friendly by becoming full-width.

A unique gradient hero text animation in which the text of the hero section becomes a gradient a timed interval. This technique uses Webflow native interactions and a little bit of custom code.

A simple, yet modern hero section for SaaS and similar companies in Webflow. This cloneable hero section is a perfect way to quickly add a well designed hero section to your Webflow site.

A modern cloneable accordion grid for Webflow. This accordion grid is a free and easy copy and paste cloneable built with all necessary interactions so that you can quickly add an accordion to your Webflow project.

A beautifully designed modern newsletter opt-in call to action section for Webflow. This free cloneable can be copy and pasted to your Webflow project in no time.

Here's a way to add a beautiful, count up counter via JS in Webflow. This wonderfully designed metric section is perfect for a SaaS or similar industry that is looking to add a metrics section in their Webflow site. Be sure to add the custom code found in the page settings to ensure that this works properly.