I actually tried that first but ran in to an issue at some point and switched. Now that I'm playing with it I can't seem to recreate the issue (haha) so I don't see why you couldn't do it. Here's a little example. NOTE there is a small artifact line on circle border I can't seem to get rid of completely. Found some custom CSS but it's still not entirely gone. In my build with clip path the transform: scaleZ(1) took care of it. preview.webflow.com/preview/circle-31afa1?preview=4410ad354fa393d80cb4ae82790b63a1&workflow=preview
This is great! Once you get into the actual site, do you think they are page switching with barbajs and scroll trigger or similar to switch between the various stages of the quiz?
Good question - I haven't explored barba but I do see the URL changing from '/start' to '/quiz' once you align the stars. It's seemless so they are prefetching the URL somehow for sure.
@@webbae yes my best guess is is each part of flow e.g. select star sign is an individual page route. Im trying to a similar effect at the moment as the endless case study scrolling on basic agencies website. So wondered if you had a hunch! Thanks f for the great tutorial.
Woah, polarizing content over here
Awesome video! 😃
I’ve always wondered how to build complex multi step timelines and this has been very helpful 😃
You deserve 1m followers.
Thanks JTL! Gonna keep doing my thing and hope it works. 🤞
great vid web bae 🤞🤞🤞
You already know
Awesome! Thank you so much! Please more videos :)
You got it!
Amazing! you make this look so easy 😅
Thank you! Cheers!
Awesome ! You make it look like piece of a cake 😔😔.
Thank you 😋
I’m a mercury rising
Gonna try this with react and framer motion because I like suffering.
That’s the spirit!
@@webbae what do you use to record your browser tab? I finished it and want to share it on my socials.
@@doenaldjonathan862 I use Screenflow or QuickTime
Can you do this without webflow?
of course you can! it's all html/css/js at the end of the day.
Thank you so much for your videos. Quick question, is there a reason you've used clip-path and not just a “round” div with overflow hidden?
I actually tried that first but ran in to an issue at some point and switched. Now that I'm playing with it I can't seem to recreate the issue (haha) so I don't see why you couldn't do it. Here's a little example. NOTE there is a small artifact line on circle border I can't seem to get rid of completely. Found some custom CSS but it's still not entirely gone. In my build with clip path the transform: scaleZ(1) took care of it. preview.webflow.com/preview/circle-31afa1?preview=4410ad354fa393d80cb4ae82790b63a1&workflow=preview
This is great! Once you get into the actual site, do you think they are page switching with barbajs and scroll trigger or similar to switch between the various stages of the quiz?
Good question - I haven't explored barba but I do see the URL changing from '/start' to '/quiz' once you align the stars. It's seemless so they are prefetching the URL somehow for sure.
@@webbae yes my best guess is is each part of flow e.g. select star sign is an individual page route.
Im trying to a similar effect at the moment as the endless case study scrolling on basic agencies website.
So wondered if you had a hunch! Thanks f for the great tutorial.
What is that whiteboarding tool you're using?
excalidraw.com - free online whiteboarding tool