Today we are going to learn how to create a Custom Slider Transition in Webflow using Swiper JS and GSAP! You will also learn how to implement custom code using the codesandbox - which I highly recommend! This is a beginners tutorial.
If you are not familiar with Webflow, it is a drag-and-drop website builder that allows you to create responsive websites without any coding. But this time we will supercharge Webflow by adding a bit of custom code. So let’s get started! The Slider Transition is a great way to add some extra umph to your website. It can give users a cool, interactive experience that will keep them on the page longer. This particular tutorial will focus on how to create an interesting slider transition using Swiper JS and GSAP.
Let me know if you learned something today!
🚀 Check out Webflow:
(Affiliate-Link to support the Channel ❤️)
🧑🏾💻 Link to the Code-Snippet mentioned:
You'll be learning about:
👉 Webflow Animations
👉 How to create a vertical scroll snap
👉 How to use Swiper.js and GSAP
👉 How to use the Codesandbox
⏲️ Timestamps
00:00 - Intro
00:35 - Overview
01:20 - Swiper Structure
02:20 - Webflow Structure
09:07 - Implement Codesandbox to your Webflow project
13:00 - Create your animation with Swiper & GSAP
19:03 - How GSAP works