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.
︱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.
YouTubeWeb Bae
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...
// RESOURCES
Webflow Dev Template on Github: https://github.com/learyjk/webflow-dev-template...GitHub
Contribute to alexatlaunchnotes/launchnotes-video-tabs development by creating an account on GitHub.
