Advanced Menu & Slider Interactions in Webflow
Timothy Ricks Timothy Ricks
49.5K subscribers
61,334 views
1.7K

 Published On Apr 3, 2021

In this tutorial, we'll setup a perspective cms infinite slider, custom trailing cursors that change per section, and an immersive full screen menu with 3D animations from Spline, lottie files, and nav link staggering. We'll create interactions that add character to the design through advanced hover states and micro interactions.

01:07 - Slider Setup
05:19 - Building Slider Controls & Interaction
10:14 - Adding Bends to Slider
12:20 - Testing The Slider
14:04 - Creating The Custom Cursor
17:51 - Changing The Cursor on Hover
22:35 - Hiding The Cursor on Hover Off
26:18 - Animating The Menu
31:22 - Adding Staggering to The Nav Links
33:44 - Fixing Menu Bugs
35:42 - Crafting Link Hover Interactions

Get the cloneable for this project (affiliate link)
https://webflow.grsm.io/circle-slider

Get the Splide slider code at https://www.notion.so/timothyricks/Sp...

Get the anime.js stagger code at https://www.notion.so/timothyricks/An...

Learn more about wizardry for Webflow at https://wizardry-technique.webflow.io/

Join my Webflow Wizards Community
  / timothyricks  

Try Webflow using my affiliate link below.
https://webflow.grsm.io/4840096

show more

Share/Embed