Can you guys help me to remake just the Tesla homepage?

Here’s an overview or screen capture of the the Tesla website, and all it’s characteristics.

This remake is kind of like my first design assignment/project to learn the fundamentals of Webflow. This will be a good learning exercise for me for learning Webflow, but also my requirement before next Tuesday. Please help me finish it :pray:

I’ve mostly recreated the layout for now, not the responsiveness yet tho. Just the homepage btw.

So here’s the things that I’m still missing and need help from y’all guys to be completed.


(Can’t upload GIF, please see the Tesla website to understand reference)

  1. I need to implement the staggered scrolling, where a whole 100 vw and vh is just shown upon some scroll, and the animation is also smoothed out.

(Can’t upload GIF, please see the Tesla website to understand reference)

  1. I need the exact smoothness control upon clicking the down arrow, is that a possibility right now on Webflow. Selecting Section as the link destination won’t let you control any of the scroll animations yet. Or is there anything I’m missing out??

(Can’t upload GIF, please see the Tesla website to understand reference)

  1. I can’t seem to make my own carousel indicators button (those little dots at the top banner image) and once you click it, it should stay with the White fill? I can’t seem to imitate this on Interactions, the White background color only shows once you click the element, or hold it. I want it once clicked, it stays white, and once clicked again, the fill becomes empty or 0% opacity? How can I achieve this. I know Webflow have their own lightbox component, but the thing with premade components on Webflow is you can’t customize the look of it mostly, and remaking it exactly is very important.

(Can’t upload GIF, please see the Tesla website to understand reference)

  1. I need to make the Top banner background image move once you either tap each side of the screen or click the carousel indicators. The thing is I’ve used Background image on a div, and I can’t make it move on interactions? Should I use Image block instead? The thing with using Image block is there’s no granular zooming or Cover settings, unlike on Background Image properties. Please tell me if I’m missing something here.

  1. How can I make the SVG images change colors? It seems Webflow treats SVG images as images, not independent vector images that you can independently change colors, even nest with transitions or interactions? Invert effect doesn’t work either. Because I need the Tesla header and arrow icon change from black to white on some pages below. Without the obvious duplicate showing/hiding trick? What is the best way to implement this? Will that need Lottie animation too?

  1. Click the right side Top menu icon, see the microinteraction transforming the Menu icon to X? How can I do that on Webflow with just the SVGs, don’t tell me they still don’t support individual SVG points interactions/animations, and I’ll need Lottie for that simple thing? Or recreating it with divs? What’s the best way to implement that?

(Can’t upload GIF, please see the Tesla website to understand reference)

  1. How can I do this vertical scrolling indicator, but segmented, and let’s you jump thru sections/scrolling point? Based on what I’ve known on Webflow Interaction, there’s still no Scrolling option as Trigger/Action. Help me recreate this

(Can’t upload GIF, please see the Tesla website to understand reference)

  1. Lastly about the top nav header of Tesla? Will that need me to do a 3 Grid collumn? And at the middle, I’ll need either a flex, inline block, or a 5 grid collumn inside it, for " Model S, Model 3, Model X, Model Y, Roadster & Energy" and on right side of the header, either a flex, inline block, or a 2 grid collumn, for “Shop & Sign In”

I’ve hit a ceiling and I can’t seem to recreate any of these. Either please help me step by step here on the replies, but providing sample Webflow projects for the implementation would be much appreciated.

I really need to learn and is keen Webflow and pass this project, please help me with this. I’m stucked and this community is my only hope to pass this on time.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

For the scrolling effect, try fullpage.js

I haven’t implemented it in a project yet though so am unable to advise on the particulars.

Bummer, it looks like Webflow now locked the Custom Code to paid plans.

@Mancerrss why you say so?
Seems to be working fine for me?
See my tutorial here: