Build an Animated Tesla Landing Page using HTML, CSS & JavaScript

Let's create an Animated Tesla Landing Page using HTML, CSS, and JavaScript! This project features smooth car animations, dynamic color transitions, and an interactive slider that perfectly captures Tesla's sleek and modern design aesthetic. 🚗⚡

Tesla Landing Page

✅

Success

Perfect for learning advanced CSS animations, JavaScript interactions, and building professional landing pages!

🎯 What You'll Build

An interactive landing page with:

Car slider with smooth transitions and animations
Dynamic color themes that change per car model
Animated statistics with custom easing functions
Scroll-based navigation for seamless user experience
Responsive design that works on all devices

📁 File Structure

tesla-landing-page/
├── index.html
├── style.css
└── script.js

🏗️ HTML Code

This HTML creates the basic structure with React and supporting libraries loaded via CDN. The entire landing page is built dynamically using JavaScript.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Animated Tesla Landing Page | @flemuxbros</title>
  <link rel="stylesheet" href="https://public.codepenassets.com/css/normalize-5.0.0.min.css">
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="root"></div>
 
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-transition-group/2.2.0/react-transition-group.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.1/prop-types.js"></script>
  <script src="https://unpkg.com/lodash@4.17.5/lodash.js"></script>
  <script src="https://unpkg.com/bezier-easing@2.1.0/dist/bezier-easing.min.js"></script>
  <script src="./script.js"></script>
</body>
</html>

🎨 CSS Code

The CSS uses CSS variables for dynamic theming and includes complex animations for car transitions, background effects, and parameter changes.

css

@font-face {
  font-family: "BebasNeue";
  src: url("https://raw.githubusercontent.com/10clouds/codepen/tesla-hero-slider/tesla-hero-slider/src/assets/fonts/BebasNeue-Regular.otf");
}
 
* {
  box-sizing: border-box;
}
 
:root {
  --btn-color: white;
  --car-color: white;
  --bckg-height: 300px;
  --shadow-opacity: 0.2;
  --car-shadow-height: 300px;
}
 
body {
  background-color: black;
  overflow: hidden;
  font-family: "Helvetica", "Arial", sans-serif;
  color: #fff;
}
 
/* Button Styling */
.button {
  position: relative;
  height: 55px;
  width: 180px;
  background: none;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 300;
  text-align: center;
  border: 0;
  cursor: pointer;
}
 
.button:hover:before {
  height: 100%;
  opacity: 1;
}
 
.button:before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  opacity: 0;
  background-color: var(--btn-color);
  transition: all 0.3s;
  z-index: -1;
}
 
.button__border {
  position: absolute;
  top: 0;
  left: 0;
  height: 55px;
  width: 180px;
  border: 1px solid var(--btn-color);
  transition: all 0.6s ease-in-out;
}
 
/* Slide animations */
.tesla-slide__img {
  position: absolute;
  overflow: hidden;
  transform: translateX(0) scale(1);
  transition: opacity 0.8s ease-in-out 0.05s, transform 0.8s ease-in-out 0.1s;
}
 
.tesla-slide__img:before {
  position: absolute;
  content: "";
  width: calc(var(--car-shadow-height));
  height: calc(var(--car-shadow-height) * 1.4);
  top: 45%;
  left: 60%;
  transform: translate(-50%, -50%);
  opacity: 0.35;
  background: radial-gradient(ellipse at center, var(--car-color) 10%, transparent 75%);
  transition: opacity 0.5s ease-in 0.3s;
  z-index: 9;
}
 
.tesla-slide__bckg {
  position: absolute;
  right: 5%;
  bottom: 38%;
  width: 250px;
  height: calc(var(--bckg-height) / 2.2);
  z-index: -1;
}
 
.tesla-slide__bckg-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0.8;
  background: var(--car-color);
  transition: all 0.8s ease-in 0.3s, transform 0.8s ease-in-out, background 0s;
}
 
/* Navigation */
.tesla-slider-navigation__link--active {
  font-size: 1.8rem;
  transition: font-size 0.3s linear, color 0.2s linear 0.8s;
}

⚡ JavaScript Code

The JavaScript code handles all the interactive functionality including the slider, animations, scroll navigation, and dynamic color changes based on the selected car model.

javascript

const { TransitionGroup, CSSTransition } = ReactTransitionGroup;
 
// Car slides data with images and specifications
const slides = [
  {
    id: 1,
    name: "Model S",
    desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
    color: "#0047fd",
    imgFloorUrl: "truck-floor.png",
    imgUrl: "truck-car.png",
    topSpeed: 75,
    mph: 4.5,
    mileRange: 400
  },
  {
    id: 2,
    name: "Model X",
    desc: "Duis aute irure dolor in reprehenderit in voluptate",
    color: "#ee0101",
    imgFloorUrl: "roadster-floor.png",
    imgUrl: "roadster-car.png",
    topSpeed: 255,
    mph: 3,
    mileRange: 520
  },
  {
    id: 3,
    name: "Roadster",
    desc: "The quickest car in the world, with record-setting acceleration",
    color: "#ee0101",
    imgFloorUrl: "roadster-floor.png",
    imgUrl: "roadster-car.png",
    topSpeed: 250,
    mph: 1.9,
    mileRange: 620
  }
];
 
// Main Slider component
class Slider extends React.Component {
  state = {
    activeSlide: 0,
    animationForward: true
  };
 
  componentDidMount() {
    // Add scroll event listener for mouse wheel navigation
    document.body.addEventListener('wheel', this.handleScroll);
  }
 
  handleScroll = (e) => {
    e.preventDefault();
    // Scroll up to previous slide
    if (e.deltaY < 0 && this.state.activeSlide !== 0) {
      this.setActiveSlide(this.state.activeSlide - 1);
    }
    // Scroll down to next slide
    if (e.deltaY > 0 && this.state.activeSlide !== slides.length - 1) {
      this.setActiveSlide(this.state.activeSlide + 1);
    }
  };
 
  setActiveSlide = (slideId) => {
    this.setState({
      activeSlide: slideId,
      animationForward: this.state.activeSlide < slideId
    });
  };
 
  render() {
    return (
      <div className="tesla-slider">
        <SliderNavigation 
          activeSlide={this.state.activeSlide}
          setActiveSlide={this.setActiveSlide}
          carsNames={slides}
        />
        <Slide 
          activeSlide={slides[this.state.activeSlide]}
          animationForward={this.state.animationForward}
        />
      </div>
    );
  }
}
 
// Render the app
ReactDOM.render(<App />, document.getElementById('root'));

💡

Download Source Code

Need the complete project files? Download the ready-to-use source code!

📥 Download Source Code

✨ How It Works

The Animation Breakdown

Slide Transitions:

Car enters - Slides in from the right with scale animation
Background fills - Color fills from bottom to top
Text animates - Model name and description slide into view
Stats update - Numbers animate with custom easing
Previous slide exits - Fades out with scale transformation

Interactive Features:

Scroll navigation - Mouse wheel changes slides
Click navigation - Side menu for direct model selection
Color theming - Each car has unique color that affects button and accents
Animated stats - Top speed, 0-60 mph, and mile range with smooth counting

Key Technologies Used

Technology	Purpose
HTML	Page structure and container elements
CSS	Styling, animations, and transitions
JavaScript	Interactive slider and dynamic content
React (via CDN)	Component-based UI rendering
CSS Variables	Dynamic color theming
Bezier Easing	Custom animation curves
`transform`	Smooth position and scale changes

🎨 Customization Options

Add New Car Models

javascript

const newCar = {
  id: 6,
  name: "Cybertruck",
  desc: "Better utility than a truck with more performance than a sports car",
  color: "#808080",
  imgFloorUrl: "cybertruck-floor.png",
  imgUrl: "cybertruck.png",
  topSpeed: 130,
  mph: 2.9,
  mileRange: 500
};
 
slides.push(newCar);

Change Animation Speed

css

.tesla-slide__img {
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

Customize Color Themes

javascript

{
  name: "Model 3",
  color: "#00ff00",  // Custom green theme
  // ... other properties
}

Change Button Text

javascript

<button className="button">Order Now</button>
<button className="button">Learn More</button>

🐛 Troubleshooting

⚠️

Warning

Animations not smooth? Make sure you're using CSS transforms instead of position properties for better performance.

Scroll navigation not working? Check that the wheel event listener is properly attached to the document body.

Images not loading? Verify the image URLs are correct and accessible.

React errors? Ensure all CDN scripts are loaded in the correct order in the HTML file.

🎉 Conclusion

Building an Animated Tesla Landing Page with HTML, CSS, and JavaScript teaches you professional-level skills in:

Advanced CSS animations and transitions
JavaScript event handling and state management
Dynamic theming with CSS variables
Scroll-based interactions
Creating smooth, performant animations

This project showcases how to create premium, modern landing pages that engage users! 🚀

Happy Coding! ✨

Need help? 📧 flemuxstudio@gmail.com | 📞 +91 62899 98072

Written by: Anirban Das | Flemux Studio 🚀