Auto advance Multiple Webflow tabs based on viewport
I've been putting some of this journey in the #💎︱premium-baes channel but thought I'd open up a thread if anyone else has this question or need.
I've been following Web Bae's video on auto change tabs, here: https://www.youtube.com/watch?v=PPC2C6py_bQ
Got it all working and good to go on just ONE of the tabs on the page. There are 4 different tabbed sections. So I'm met with 2 main challenges:
1. Getting all tabbed components to follow the same functionality as my first tabbed component.
2. Getting the video/animations to pause when the the user scrolls down and it leaves the viewport.
The repo is here: https://github.com/alexatlaunchnotes/launchnotes-video-tabs
I cannot show a preview as this page is locked... Let me know if anything else is needed. Happy to hop on a call with anyone that can help me out.
Web Bae
YouTube
Auto Change Webflow Tabs (timed to video duration too!)
A Patreon subscriber needed some help extending the functionality of the Webflow tabs to autorotate to the next tab on video completion. This was a great challenge and really works some knowledge of MutationObserver, HTML video, setTImeout, and GSAP.
// RESOURCES
📣 Webflow Dev Template on Github: https://github.com/learyjk/webflow-dev-template...
GitHub
GitHub - alexatlaunchnotes/launchnotes-video-tabs
Contribute to alexatlaunchnotes/launchnotes-video-tabs development by creating an account on GitHub.
4 Replies
After some poking around, I stumbled across the intersection observer. Would this be useful and can that be used in tandem with the mutation observer?
Hey Alex I made this quite a while ago now maybe I can have a look at a new version that supports multiple tabs components on page.
That would be awesome, I'm sure the community would love this. and I'd love to be a part of the creation of it! I'm going to try my best at recreating it but I might book some time with you at some point on your calendar if that's cool!
I rewrote it from scratch today :). remove gsap so no dependencies needed and improved the code A LOT! Thanks @Alex Villacres for inspiring me to revisit this.
https://github.com/learyjk/autotabs-with-video-2
GitHub
GitHub - learyjk/autotabs-with-video-2
Contribute to learyjk/autotabs-with-video-2 development by creating an account on GitHub.