Custom Slider Transition in Webflow using Swiper JS and GSAP - Beginner Tutorial

Hi everyone!
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!
👀 Get my favourite FREE cloneables: webtotheflow.com/cloneables
🚀 Check out Webflow: webflow.grsm.io/webtotheflow
(Affiliate-Link to support the Channel ❤️)
🧑🏾‍💻 Link to the Code-Snippet mentioned:
bit.ly/3T31qIF
Codesandbox: codesandbox.io/
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
SwiperJS, GSAP, Webflow Tutorial for beginner

[@webtotheflow]

Hey there! 👋🏾 Thanks for watching! I am curious - Would you like to see more videos using *Webflow with custom code* ?

[@michaelblau]

This is great thank you! one question, the animation does not appear to start till the second slide as that is when the sliderchange is initiated. the first slide is loaded with no animation. do you know a fix for this?

[@webtotheflow]

Thanks for your feedback Michael! 🙏🏾 So if you want for example the initial headline to be animated you can hide it in Webflow and use gsap on page load to reveal & animate it. You can currently see the same effect on my WTTF homepage ✌🏾 Here is how to use js to checking the page loaded: window.addEventListener("load", (event) => { // Your code });

[@michaeljerxsen4577]

Hi. Wie verknüpfe ich die Animation mit einem dynamischen CMS-Slider? Da man eine Klasse als target der Animation nutzt, wirkt sich die Animation auf den schwindenden und den erscheinenden Slide aus. Ich möchte aber dass auf dem schwindenden Slide der Text langsam verschwindet und auf dem erscheinenden Slide der Text sichtbar wird. Bisher habe ich noch keine Kombination aus Event, Target und Animation gefunden, die funktioniert. EDIT: Eben nochmal deine Lösung in Slo-Mo angesehen - bei dir verschwindet der Text auch instant auf dem schwindenden Slide. Da deine Transition schnell und der Text relativ klein ist, fällt das aber nicht weiter auf. Bei einer fetten Headline wirkt es leider wie ein Glitch.

[@webtotheflow]

Hi! Du kannst gsap auch mit ID‘s füttern. Statt gsap.from(„.class“) nutze gsap.from(„#id“). Zusätzlich kannst du in die Timeline weitere Animationen einspielen, um die Headline smooth auszublenden. Schau mal in die docs .. sind relativ intuitiv 👍🏾