DEV Community: Andrew Saeed

Three.js Tutorial for Beginners: Create a 3D Solar System Step by Step

Andrew Saeed — Wed, 16 Jul 2025 13:22:56 +0000

Content

Introduction
Setup
Add Some Data
Solar 3D Elements
Animate Elements
Stage and Render
Final code and demo

Introduction

Getting started with Three.js can feel overwhelming when you’re new to 3D graphics, but it doesn’t have to be. In this tutorial, you’ll take your first practical steps into Three.js by building a small project: a 3D Solar System.

Together, we will explore the essentials of Three.js: scenes, cameras, lighting, geometry, materials, and animation.

So, what is Three.js?

Three.js is a powerful JavaScript library that simplifies creating 3D graphics right in your web browser. Think of it as a helpful layer that makes working with WebGL – the browser's native 3D graphics API – much easier by handling a lot of the complex details for you.

Setup

Every Three.js project needs a foundational setup involving HTML, CSS, and JavaScript. Let's get these ready.

📌 HTML

First, you'll need a basic HTML structure. We'll include a <div> for a starry background and, crucially, a <canvas> element where our 3D scene will be rendered.

<!doctype html>
<html lang="en">
  <head>
    ...
  </head>
  <body>
    <div class="bg bg-stars"></div>
    <canvas id="main"></canvas>
    <script type="module" src="/src/main.js"></script> 
  </body>
</html>

📌 CSS

Next, let's add some CSS to ensure our canvas fills the screen and to set up a nice starry background.

body {
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevents scrollbars */

    canvas {
        display: block; /* Removes extra space below the canvas */
    }

    .bg {
        position: absolute;
        z-index: -1; /* Puts the background behind the canvas */
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;

        &.bg-stars {
            background: url('bg.jpg'); /* Your starry background image */
            background-size: cover;
        }
    }
}

📌 JavaScript

Now for the heart of our setup: the JavaScript. This setup initializes your 3D environment, adds controls, and starts your render loop.

✅ Create a Scene

import { Scene } from 'three'
const scene = new Scene()

Think of the scene as your 3D stage. It's where all your planets, moons, lights, and cameras will eventually reside. Nothing appears in Three.js without being added to the scene!

✅ Set Up the Camera

import { PerspectiveCamera } from 'three'

const camera = new PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 400)
camera.position.z = 100
scene.add(camera)

No scene is viewable without a camera. We're using a PerspectiveCamera here because it mimics how the human eye sees the world, adding depth and realism.

35: This is our field of view (FOV) in degrees. A lower number "zooms in" while a higher one "zooms out".
window.innerWidth / window.innerHeight: This calculates the aspect ratio of our browser window, crucial for preventing distortion.
0.1 and 400: These are the near and far clipping planes. Objects closer than 0.1 units or farther than 400 units from the camera won't be rendered.

We then pull the camera back along the Z-axis camera.position.z = 100 so it has a good vantage point to view our upcoming solar system, and finally, we add it to our scene.

✅ Prepare the Renderer

import { WebGLRenderer } from 'three'

const canvas = document.querySelector('#main')
const renderer = new WebGLRenderer({ canvas, antialias: true, alpha: true })
renderer.setClearColor(0x000000, 0)
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

The WebGLRenderer is what actually draws your 3D scene onto the 2D canvas in your browser.

We first grab our <canvas id="main"> element.
When creating the renderer, we enable antialias: true for smoother edges on our 3D objects and alpha: true to allow for a transparent background.
renderer.setClearColor(0x000000, 0) sets the background to a transparent black.
renderer.setSize() ensures the renderer fills the entire browser window.
renderer.setPixelRatio() makes sure your scene looks crisp on high-DPI (Retina) displays.

✅ Add OrbitControls

import { OrbitControls } from 'three/examples/jsm/Addons.js'

const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true

OrbitControls are a fantastic utility for development. They allow you to click and drag with your mouse to rotate, zoom, and pan around your 3D scene effortlessly.

Setting controls.enableDamping = true adds a nice, smooth deceleration effect when you stop moving the camera.

✅ Add Lighting

import { AmbientLight, PointLight} from 'three'

// Soft ambient light to prevent completely black shadows
const ambientLight = new AmbientLight(0xffffff, 0.1)
scene.add(ambientLight)

// Point light at the Sun's position to simulate sunlight
const pointLight = new PointLight(0xffffff, 500)
scene.add(pointLight)

Since we're using MeshStandardMaterial for our planets, we need light sources for them to be visible:

AmbientLight: Provides soft, uniform lighting from all directions
PointLight: Simulates the Sun, casting directional light and shadows

✅ Handle Window Resizing

window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
})

This event listener makes your 3D scene fully responsive. Whenever the browser window is resized, we:

Update the camera.aspect ratio to prevent stretching or squashing of your scene.
Call camera.updateProjectionMatrix() to apply the aspect ratio change.
Adjust the renderer.setSize() to match the new window dimensions.

✅ Add an Axes Helper

import { AxesHelper } from 'three'

const axesHelper = new AxesHelper(2)
scene.add(axesHelper)

The AxesHelper is an incredibly useful debugging tool. It displays a small set of colored lines at the origin (0,0,0) of your scene: red for the X-axis, green for the Y-axis, and blue for the Z-axis.

This helps you quickly understand the orientation of your 3D space.

You'll likely remove this in a final project, but it's invaluable during development!

✅ Create the Render Loop

const rendering = () => {
    renderer.render(scene, camera)
    controls.update()
    window.requestAnimationFrame(rendering)
};
rendering()

This is the heart of any animated Three.js scene – the render loop.

renderer.render(scene, camera): This is the core command that draws (or "renders") your entire scene from the perspective of your camera.
controls.update(): This is essential if you have controls.enableDamping set to true, as it smoothly updates the camera's position after user interaction.
window.requestAnimationFrame(rendering): This method tells the browser you want to perform an animation and requests that the browser calls your rendering function before the next repaint. This creates a continuous, efficient animation loop that's optimized for the browser.

Add Some Data

Let's add the essential data for the Sun, planets, and their moons, which will allow us to visualize them in our 3D scene.

We'll use a JavaScript array named solarSystemData to store the properties for each celestial body.

const solarSystemData = [
    {
        name: 'Sun',
        radius: 5,
        distance: 0,
        speed: 0,
        color: 'yellow',
        moons: [],
        animate: null,
        bg: 'alectrona_map_2k_by_greaterhtrae_dik6ipy-pre.jpg'
    },
    // ... (other planets will go here)
    {
        name: 'Uranus',
        radius: 1.7,
        distance: 65,
        speed: -0.003,
        color: 0x66ccff,
        moons: [
            { name: 'Miranda', radius: 0.15, distance: 1.5, speed: -0.03, color: 0xcccccc },
            { name: 'Ariel', radius: 0.15, distance: 2, speed: 0.028, color: 0xaaaaaa },
            { name: 'Umbriel', radius: 0.15, distance: 2.5, speed: -0.026, color: 0x999999 },
            { name: 'Titania', radius: 0.15, distance: 3, speed: 0.024, color: 0x888888 },
            { name: 'Oberon', radius: 0.15, distance: 3.5, speed: -0.022, color: 0x777777 }
        ],
        animate: true,
        bg: 'uranus_map_2k_by_greaterhtrae_dhlumbg-pre.jpg'
    }
]

Each object within this array will contain details like:

name: The name of the planet (e.g., 'Earth', 'Mars').
radius: How large the planet will appear in our 3D space.
distance: Its distance from the Sun (or from its parent planet, in the case of moons).
speed: How fast it orbits around its parent body.
color: A fallback color, useful for placeholder or simpler materials.
moons: An array of objects, each describing a moon with its own name, radius, distance, speed, and color.
animate: A boolean flag to determine if the object should be animated.
bg: The filename for the texture image that will be mapped onto the planet's surface.

Solar 3D Elements

With our solarSystemData ready, it's time to bring our celestial bodies into the 3D world!

In this step, we'll create the actual 3D models for the Sun, planets, and their moons, apply their unique textures, position them correctly in space, and set up the parent-child relationships for moons orbiting their planets.

We'll achieve this by iterating over our solarSystemData array and dynamically generating Mesh objects for each element.

// Ensure these imports are at the top of your main.js file
import { TextureLoader, SphereGeometry, MeshBasicMaterial, MeshStandardMaterial, Mesh } from 'three';

const textureLoader = new TextureLoader();
const sphereGeometry = new SphereGeometry(1, 32, 32); // A reusable sphere geometry

const solarSystemElements = solarSystemData.map((ele) => {

    // This object will hold our Three.js mesh and its related animation properties
    const solarSystemMesh = {
        mesh: null,     // The main Three.js Mesh for the planet/sun
        moons: [],      // Array to store moon meshes and their animation data
        distance: ele.distance,
        speed: ele.speed,
        animate: ele.animate,
    };

    let baseMaterial; // Declare material outside the conditional for scope

    // The Sun is self-illuminated, so it doesn't need to react to external lights.
    // Planets, however, need to reflect light.
    if (ele.name === 'Sun') {
        baseMaterial = new MeshBasicMaterial({ map: textureLoader.load(ele.bg) });
    } else {
        baseMaterial = new MeshStandardMaterial({ map: textureLoader.load(ele.bg) });
    }

    // Create the main mesh (planet or sun)
    const baseMesh = new Mesh(sphereGeometry, baseMaterial);
    baseMesh.scale.setScalar(ele.radius); // Set the size based on the data's radius
    baseMesh.position.x = ele.distance; // Position it along the X-axis
    solarSystemMesh.mesh = baseMesh; // Store the Three.js mesh

    // Check if this celestial body has moons
    if (ele.moons?.length) { // The '?' is optional chaining, ensures it only runs if 'moons' exists

        for (let moon of ele.moons) {
            // Create material for the moon (we'll just use color for moons for simplicity)
            const followerMaterial = new MeshStandardMaterial({ color: moon.color });
            const followerMesh = new Mesh(sphereGeometry, followerMaterial);

            followerMesh.scale.setScalar(moon.radius); // Set moon's size
            followerMesh.position.x = moon.distance;   // Position moon relative to its planet

            // IMPORTANT: Add the moon mesh as a child of the planet mesh.
            // This makes the moon automatically move and rotate with its parent planet!
            solarSystemMesh.mesh.add(followerMesh);

            // Store moon's mesh and animation data for later use
            solarSystemMesh.moons.push({
                mesh: followerMesh,
                speed: moon.speed,
                distance: moon.distance
            });
        }
    }

    return solarSystemMesh; // Return the structured object for each planet/sun
});

Let's break down the code:

✅ Initialize TextureLoader & SphereGeometry:

const textureLoader = new TextureLoader()
const sphereGeometry = new SphereGeometry(1, 32, 32)

The TextureLoader is a built-in Three.js utility that lets us load images (like our planet surface maps) to use as textures on our 3D objects.
SphereGeometry(1, 32, 32) creates the basic sphere shape.
- 1: This is the default radius of the sphere. We'll scale it later.
- 32, 32: These values define the horizontal and vertical segment counts. More segments mean a smoother sphere, but also more polygons and potentially lower performance. 32x32 is a good balance for planets.

✅ Map Over Data to Create Planets and Moons:

solarSystemData.map((ele) => { /* ... */ })

We use the map array method to iterate through each entry in our solarSystemData. For every ele (element, representing a planet or the Sun), we'll construct its corresponding Three.js 3D object and store its relevant animation properties.

✅ Choose the Right Material:

if (ele.name === 'Sun') {
    baseMaterial = new MeshBasicMaterial({ map: textureLoader.load(ele.bg) })
} else {
    baseMaterial = new MeshStandardMaterial({ map: textureLoader.load(ele.bg) })
}

MeshBasicMaterial: Used for the Sun. This material is not affected by lights; it's always illuminated at its full color. Perfect for a self-luminous star! We load the bg (background/texture) image directly onto it.
MeshStandardMaterial: Used for all planets and moons. This is a PBR (Physically Based Rendering) material, meaning it interacts realistically with light sources in your scene. This will allow our planets to have shadows and highlights, making them look much more realistic. Again, we apply the bg image as its texture map.

✅ Create the Mesh and Position It:

const baseMesh = new Mesh(sphereGeometry, baseMaterial)
baseMesh.scale.setScalar(ele.radius)
baseMesh.position.x = ele.distance
solarSystemMesh.mesh = baseMesh

A Mesh in Three.js is the actual 3D object visible in your scene. It combines a Geometry (the shape, like our sphereGeometry) with a Material (how it looks, like our baseMaterial).
baseMesh.scale.setScalar(ele.radius): We scale the default unit sphere (radius: 1) to the radius specified in our solarSystemData, giving each planet its correct size.
baseMesh.position.x = ele.distance: Initially, we place each planet along the X-axis at its specified distance from the origin (which will be the Sun's position). This starting position is crucial for our later animation.
solarSystemMesh.mesh = baseMesh: We store this newly created Three.js mesh in our solarSystemMesh object, along with other data we'll need for animation.

✅ Handle Moons (Nesting Objects):

if (ele.moons?.length) {
    for (let moon of ele.moons) {
        // ... create moon mesh ...
        solarSystemMesh.mesh.add(followerMesh)
        // ... store moon data ...
    }
}

This is a powerful Three.js concept: object hierarchy.

If a planet has moons (checked by ele.moons?.length), we loop through each one.
For each moon, we create a small SphereGeometry and a MeshStandardMaterial (using its color property).
We scale and position the moon relative to its parent planet (not the global origin).
solarSystemMesh.mesh.add(followerMesh): This is the critical part! By adding the moon's mesh as a child of the planet's mesh, the moon will automatically inherit the planet's position and rotation. This means when the planet moves, its moons move with it, simplifying our animation logic significantly.
We then store the moon's mesh and its unique animation properties in the solarSystemMesh.moons array.

Animate Elements

Now for the exciting part – bringing our static planets and moons to life!

We'll animate them to orbit around the Sun and for moons to gracefully circle their parent planets. This is where the speed and distance properties from our solarSystemData truly come into play.

We'll achieve this with a dedicated animateSolarEle helper function:

const animateSolarEle = (ele) => {
    // Animate the main body (planet or sun)
    ele.mesh.rotation.y += ele.speed // Increment the Y-axis rotation for orbital speed
    // Calculate new X and Z positions for circular orbit
    ele.mesh.position.x = Math.sin(ele.mesh.rotation.y) * ele.distance
    ele.mesh.position.z = Math.cos(ele.mesh.rotation.y) * ele.distance

    // Animate any moons this body might have
    if (ele.moons?.length) { // Check if there are moons
        ele.moons.forEach((moon) => {
            moon.mesh.rotation.y += moon.speed // Increment moon's Y-axis rotation for its orbital speed
            // Calculate new X and Z positions for moon's orbit around its parent
            moon.mesh.position.x = Math.sin(moon.mesh.rotation.y) * moon.distance
            moon.mesh.position.z = Math.cos(moon.mesh.rotation.y) * moon.distance
        })
    }
}

Let's break down how this function makes our solar system move:

✅ Rotate and Orbit the Planet

ele.mesh.rotation.y += ele.speed
ele.mesh.position.x = Math.sin(ele.mesh.rotation.y) * ele.distance
ele.mesh.position.z = Math.cos(ele.mesh.rotation.y) * ele.distance

ele.mesh.rotation.y += ele.speed: This line is the heart of the orbital movement. We're simply incrementing the y rotation of the planet's mesh by its speed value. While rotation.y directly controls the mesh's orientation (spinning), we're cleverly repurposing this value as an angle for our orbital calculations. Think of it as tracking the angle around its parent.
Math.sin() and Math.cos(): These trigonometric functions are ideal for generating circular orbital paths. As the rotation.y value (our "angle") continuously increases, Math.sin() will output values that go up and down, and Math.cos() will output values that go left and right, tracing a circle.
ele.distance: By multiplying the sin and cos results by the planet's distance from the Sun, we scale the circle to the correct orbital radius.

✅ Animate the Moons

if (ele.moons?.length) {
    ele.moons.forEach((moon) => {
        moon.mesh.rotation.y += moon.speed
        moon.mesh.position.x = Math.sin(moon.mesh.rotation.y) * moon.distance
        moon.mesh.position.z = Math.cos(moon.mesh.rotation.y) * moon.distance
    })
}

This part applies the exact same orbital logic to each moon.

The crucial difference is that because we added the moon meshes as children of their parent planet's mesh in the previous step, their movements are now relative!

Stage and Render

We're almost there! With all our solar system elements created and our animation logic defined, the final step is to put everything into the Three.js scene and set up the continuous animation.

✅ Add Elements to the Scene

Before anything can appear on screen, each of our carefully crafted planet and moon meshes needs to be added to the Three.js scene.

solarSystemElements.forEach(ele => scene.add(ele.mesh))

✅ Create the Render Loop

Finally, let's assemble our render loop. This function will be called repeatedly, allowing us to update the positions of our planets and moons, and then redraw the scene.

const rendering = () => {
    // Apply animations to eligible solar system elements
    solarSystemElements.forEach(ele => {
        if (ele.animate) { // Check if this element is set to animate
            animateSolarEle(ele) // Call our animation function
        }
    })

    // Render the scene from the camera's perspective
    renderer.render(scene, camera)

    // Update orbit controls (important for smooth damping)
    controls.update()

    // Request the next animation frame to keep the loop going
    window.requestAnimationFrame(rendering)
};

// Start the animation loop!
rendering()

Final Code and Demo

We've just built a complete 3D solar system using Three.js. We've covered all the fundamental concepts necessary to start creating awesome interactive 3D web experiences.

Full Code
Demo
☕ Buy Me Coffee

Bring Your Scroll to Life: A Beginner’s Guide to Scroll-Based Animations with GSAP

Andrew Saeed — Sat, 08 Feb 2025 18:25:18 +0000

Creating smooth, engaging animations that trigger as users scroll down your page can transform a plain website into a dynamic, interactive experience.

In this post, we’ll break down how to use HTML, CSS, and JavaScript—with the help of GSAP and its ScrollTrigger plugin—to create scroll-based animations.

Content

Setting Up the Stage
Diving Into the Code
Bringing It All Together with Full Code

Allow me to show you 🙏

📌 Setting Up the Stage

I'm using a component-based framework (like Astro) along with Tailwind CSS classes and GSAP to build our animation experience. Here’s a quick overview of our file structure:

<Base>
<!-- All HTML code within base layout component -->
</Base>
<style>
/* Init CSS style */
</style>
<script>
// Where all the magic
</script>

HTML Markup:
👉 We have a base layout with a fixed background #scroll-box-bg, two SVG elements with paths for drawing animations, and five separate sections. Each section contains an <h1> element.

CSS Styling:
👉 We apply basic transformations to the <h1> elements using classes like rtlAnimation (right-to-left) and ltrAnimation (left-to-right). These classes initially offset the text, so that later in the animations, they slide into place.

JavaScript Animations:
👉 With GSAP and ScrollTrigger, we animate the SVG paths and update #scroll-box-bg backgrounds and other sections heading positions as the user scrolls.

📌 Diving Into the Code

Let’s break down the key parts of the code.

Styling the Headings:
👉 The classes rtlAnimation and ltrAnimation use a simple CSS transform to offset the headings:

section {
    h1 {
        &.rtlAnimation {
            transform: translateX(10%);
        }
        &.ltrAnimation {
            transform: translateX(-10%);
        }
    }
}

The headings are initially shifted to either the right 10% or left –10%. Later, as the scroll triggers fire, these elements animate back to their natural position translateX: '0%'.

Animating SVG Paths:
👉 Next, we animate two SVG paths to give the effect of “drawing” on the screen as you scroll:

const firstPath = document.querySelector('path#first-path')!
firstPath.style.strokeDasharray = `${Math.round(firstPath.getTotalLength())}`
firstPath.style.strokeDashoffset = `${Math.round(firstPath.getTotalLength())}`

const firstPathTimeLine = gsap.timeline({
    scrollTrigger: {
        trigger: '#scroll-sections',
        start: 'top top',
        end: 'bottom bottom',
        scrub: true
    }
})
firstPathTimeLine.to(firstPath, {strokeDashoffset: 0, ease: Linear.easeNone})

How It Works:

Calculate Path Length: We compute the total length of the SVG path using getTotalLength().
Set Dash Properties: The strokeDasharray and strokeDashoffset properties are set so that the entire length of the path is hidden.
Animate Drawing: A GSAP timeline with a ScrollTrigger gradually reduces the strokeDashoffset from its full length to 0 as you scroll, making it look like the path is being drawn in real time.

The same steps are repeated for the second SVG path.

Animating Section Transitions:
👉 For each of the five sections, we create a GSAP timeline that responds to scroll events:

const section1TimeLine = gsap.timeline({
    scrollTrigger: {
        trigger: '#section1',
        start: 'top center',
        end: 'bottom center',
        toggleActions: 'play pause restart reset',
        onEnter: () => { scrollBoxBg.style.backgroundColor = 'black' },
        onEnterBack: () => { scrollBoxBg.style.backgroundColor = 'black' }
    }
})
section1TimeLine.to('#section1 h1', {translateX: '0%', color: 'white', duration: 0.1, ease: 'expo'})

What Happens Here:

ScrollTrigger Settings: Each timeline is attached to a specific section (e.g., #section1). The start and end properties define when the animation should trigger (when the section is centered on the screen).
Background Color Changes: The onEnter and onEnterBack callbacks change the background color of a fixed element #scroll-box-bg to match the theme of the current section. For example, when you enter Section 1, the background turns black.
Heading Animation: The <h1> in the section animates from its offset position back to its natural position translateX: '0%' and changes color to white. This quick transition (duration of 0.1 seconds) gives an immediate visual cue that the section is active.

Each section (from 1 to 5) follows a similar pattern, with different background colors (green, blue, red, deeppink) and appropriate scroll triggers.

📌 Bringing It All Together with Full Code

By utilizing GSAP’s ScrollTrigger plugin, we can create engaging scroll-based animations with relatively simple code. Here’s a quick recap of what we did:

CSS for Initial Positioning:
👉 We applied offset transforms to our headings so they slide into place as the user scrolls.

SVG Path Animations:
👉 Using GSAP, we animated SVG stroke properties to create a drawing effect.

Scroll-Triggered Section Transitions:
👉 For each section, we used GSAP timelines with ScrollTrigger to change background colors and animate text, resulting in smooth transitions as users scroll through the page.

😄 Happy coding, and may your scroll animations always be smooth and engaging!

Full Code

Demo

☕ Buy Me Coffee

Create Shopping Cart using Alpinejs

Andrew Saeed — Mon, 02 Sep 2024 12:56:20 +0000

In this blog post, we'll delve into the process of creating a shopping cart using Alpine.js. We'll explore how to structure components, manage state with Alpine's store, and implement essential features such as fetching new products, adding and removing items, calculating total price, and handling UI interactions.

Content

Create the main Component.
Create the Store.
Summary and the source code.

Alpine.js stands out as a lightweight yet powerful tool, perfect for developers who want to add interactivity to their web pages without the overhead of a full-fledged framework, also it is great for SEO.

Allow me to show you!

Create the main Component

Let's define an Alpine.js component called shoppingCartProductsList, it will manage the state and behavior of a shopping cart product list, including loading products from an API, handling pagination, and toggling the visibility of the shopping cart:

Component Initialization

Alpine.data('shoppingCartProductsList', (): ShoppingCartProductsList => ({}))

Alpine.data() defines a new Alpine.js component named shoppingCartProductsList. It returns an object that contains the state and methods for this component.

State Variables

toggleCart: false,
loading: false,
products: [],
limit: 10,
page: 1,

toggleCart: Controls the visibility of the shopping cart (initially hidden).
loading: Indicates whether the component is currently loading data from the API.
products: An array to store the list of products fetched from the API.
limit: Specifies the number of products to fetch per page.
page: Tracks the current page number for pagination.

Initialization (init method)

async init() {
    this.loading = true
    const res = await axios.get<ProductsGetRes>('https://dummyjson.com/products?limit=10&skip=0')
    this.products = res.data.products
    this.loading = false
},

It is an asynchronous method that runs when the component is initialized. It fetches the first batch of products from the API using Axios and stores them in the products array. The loading state is set to true while the data is being fetched, and then reset to false once the data is loaded.

Pagination (paginate method)

async paginate() {
    if (this.loading) return
    this.loading = true

    this.page += 1
    const skip = (this.page - 1) * this.limit;
    const res = await axios.get<ProductsGetRes>(`https://dummyjson.com/products?limit=${this.limit}&skip=${skip}`)
    this.products = [...this.products, ...res.data.products]

    this.loading = false
},

Another asynchronous method for loading more products as the user navigates through pages by clicking the load more button. It first checks if the component is already loading to prevent multiple requests.
The page number is incremented, and the skip value is calculated to determine which products to fetch.
The newly fetched products are appended to the existing products array.

Toggle Cart (toggleCartHandler method)

toggleCartHandler() {
    this.toggleCart = !this.toggleCart
    if (this.toggleCart) {
        document.body.style.overflowY = 'hidden';
        (Alpine.store('shoppingCartTheCart') as ShoppingCartTheCart).currentView = 'cart';
    } else {
        document.body.style.overflowY = 'scroll'
    }
}

A method for toggling the visibility of the shopping cart.
When the cart is toggled on, the page's vertical scroll is disabled by setting overflowY to hidden.
It also updates the currentView property of another Alpine.js store shoppingCartTheCart to show the cart view. When toggled off, the vertical scroll is restored.

Create the Store

Let's define a store that will manage the state and actions related to the shopping cart, such as adding and removing products, calculating the total price, and handling UI interactions.

Store Initialization

const shoppingCartTheCart: ShoppingCartTheCart = {}
Alpine.store('shoppingCartTheCart', shoppingCartTheCart)

shoppingCartTheCart is a constant with the type ShoppingCartTheCart. The object holds the properties and methods necessary to manage the shopping cart. I will use it to register shoppingCartTheCart as a global store in Alpine.js.
This makes the shopping cart's state and methods accessible from any Alpine.js component within the application.

State Variables

totalPrice: 0,
totalProducts: 0,
products: [],
cartBtnToggler: document.querySelector('#cartBtnToggler')!,
currentView: 'cart',

totalPrice: Tracks the total price of all products in the cart.
totalProducts: Tracks the total number of products in the cart.
products: An array that stores the products added to the cart.
cartBtnToggler: A reference to the HTML element with the ID -
cartBtnToggler, used for handling UI interactions (e.g., animations).
currentView: A string that indicates the current view of the cart, defaulted to cart.

Initialization (init method)

init() {
    this.cartBtnToggler.addEventListener('animationend', () => {
        this.cartBtnToggler.classList.remove('animate__rubberBand')
    })
},

This method runs when the shopping cart store is initialized.
It adds an event listener to cartBtnToggler that listens for the end of an animation.
Once the animation ends, the method removes the animate__rubberBand class from the button, ensuring that the animation can be re-triggered later.

Adding a Product (addProduct method)

addProduct(newProduct: Product) {
    this.totalPrice += newProduct.price
    this.totalProducts += 1
    const productIndex = this.products.findIndex(product => product.id === newProduct.id)
    if (productIndex > -1) {
        this.products[productIndex].amount += 1
    } else {
        this.products.push({ ...newProduct, amount: 1 })
    }
    this.cartBtnToggler.classList.add('animate__rubberBand')
},

This method adds a new product to the shopping cart. It first increments the totalPrice and totalProducts to reflect the new addition.
The method checks if the product is already in the cart using findIndex:

If the product exists (i.e., productIndex > -1), it increments the amount of that product.
If the product is new, it is added to the products array with an initial amount of 1.
Finally, the method triggers the animate__rubberBand animation on the cart button to provide visual feedback.

Removing a Product (removeProduct method)

removeProduct(productToRemove: CartProduct) {
    this.totalPrice = Math.round((this.totalPrice - productToRemove.price) * 100) / 100;
    this.totalProducts -= 1
    const productToRemoveIndex = this.products.findIndex(product => product.id === productToRemove.id)
    if (productToRemove.amount === 1) {
        this.products.splice(productToRemoveIndex, 1)
    } else {
        this.products[productToRemoveIndex].amount -= 1
    }
}

This method removes a product from the shopping cart.
It first decrements the totalPrice by the price of the product being removed, rounding it to two decimal places. The totalProducts count is also decremented. The method finds the product in the products array using findIndex:

If the product's amount is 1, it is completely removed from the cart using splice.
If the product's amount is greater than 1, the amount is simply decremented by 1.

Summary and the source code

I like to use Alpine.js to build cool websites. It is very easy to create components and stores using Alpine.js, which helps a lot in quickly adding interactivity to any web page without hurting SEO.

🙏 Your feedback is much appreciated

Full Code

Demo

☕ Buy Me Coffee

Create animated columns of tiles with a background-images fade in and fade out

Andrew Saeed — Sun, 21 Jul 2024 12:42:55 +0000

In this blog post, I will show you how I have created animated columns of tiles that smoothly transition their background images. This technique not only adds depth and interest to your web page but also provides an elegant way to showcase multiple images or content pieces in a limited space.

A basic understanding of HTML, CSS, and JavaScript will be sufficient to follow along. Let's dive in and explore how to create these visually appealing, animated columns.

Allow me to show you!

Content

What are we building?
Painting Our HTML with Tailwind (Utility-first CSS framework).
Write some JavaScript to make it animate.
Summary and code-sample.

What are we building?

We are building a row of interactive columns. Each column will hold two tiles (an upper tile and a lower tile). When the user hovers over a tile, it will expand its height to take up all the space of its parent column. Then, a new background image will fade in—this could be an image of a product, for example.

Additionally, I will wrap all the columns inside a responsive slider (using Swiper) to control the number of columns displayed on different screen sizes.

Painting Our HTML with Tailwind.

To get started, we'll need some data to work with. This data will be used to create a loop and dynamically generate the needed HTML. Here's the JavaScript columns array I'll be using for this purpose:

const columns = [
    ...
    {
        tiles: [
            {
                positionClass: 'top-0',
                tileClass: 'top-tile',
                tileMaskClass: 'top-tile_mask',
                bgImageExpr: "bg-[url('/bmw.png')]",
                bgColor: 'bg-black-dark',
                logo: 'bmw-logo.svg'
            },
            {
                positionClass: 'bottom-0',
                tileClass: 'bottom-tile',
                tileMaskClass: 'bottom-tile_mask',
                bgImageExpr: "bg-[url('/chevrolet.png')]",
                bgColor: 'bg-black-light',
                logo: 'chevrolet-logo.svg'
            }
        ]
    }
    ...
]

Every tile object within columns array has the necessary props for styling:

positionClass prop has top-0 and bottom-0 tailwind classes for positioning the tile to the top or bottom.
tileClass prop has top-tile class or bottom-tile class. They are needed by JavaScript Dom selectors.
tileMaskClass prop has top-tile_mask class or bottom-tile_mask class. They are also needed by JavaScript Dom selectors.
bgImageExpr prop will set the background-image of that tile using the tailwind expr bg-[url('')].
bgColor prop provides a background-color for the tile's mask.
logo prop provides the logo svg for the tile's mask.

Now we can map the columns array to HTML:

<div class="swiper w-full h-[27.5rem] max-w-[13.75rem] md:max-w-[41.25rem] lg:max-w-[55rem] xlg:max-w-[68.75rem]">

    <div class="swiper-wrapper">

        { columns.map( column => {

            return <div class="swiper-slide">
                <div class="single-column relative w-[13.75rem] h-[27.5rem] overflow-hidden">

                    { column.tiles.map( tile => {

                        return <div class:list={[
                            tile.tileClass, 
                            `w-full h-1/2 absolute ${tile.positionClass} left-0`, 
                            `${tile.bgImageExpr}`,  
                            "bg-center border border-black-light transition-[height] duration-300 ease-out"
                        ]}>
                            <div class:list={[
                                tile.tileMaskClass, 
                                "w-full h-full flex items-center justify-center", 
                                tile.bgColor, 
                                "bg-[length:7.5rem] bg-center bg-no-repeat transition duration-300 ease-out"
                            ]} style={`background-image: url('/${tile.logo}');`}>
                            </div>
                        </div>
                    }) }
                </div>
            </div>
        }) }
    </div>
</div>

Write some JavaScript to make it animate.

When the user interacts with the tiles we want to modify their appearance. To achieve that we will attach event listeners to elements .top-tile_mask and .bottom-tile_mask.

In Case of `.top-tile_mask` element:

On mouseenter, I will set the opacity of the top tile's mask to 0 (making it invisible), change the z-index of its parent (.top-tile element) to 10, and also set that parent's height to 100%.
On mouseout, I will set the opacity of the mask back to 1 (making it visible again) and reset its parent's height to 220px.

In Case of `.bottom-tile_mask` element:

On mouseenter, I will set the opacity of the bottom tile's mask to 0, unset the z-index of the .top-tile element, and set the .bottom-tile_mask parent's height to 100%.
On mouseout, I will set the opacity of the bottom tile's mask back to 1 and reset its parent's height to 220px.

Here's the JavaScript code that implements this functionality:

this.$el.querySelectorAll<HTMLElement>('.single-column').forEach( column => {

    const topTileMask = column.querySelector<HTMLElement>('.top-tile_mask')!
    const bottomTileMask = column.querySelector<HTMLElement>('.bottom-tile_mask')!

    if(topTileMask && topTileMask.parentNode) {
        topTileMask.addEventListener('mouseenter', () => {
            topTileMask.style.opacity = '0';
            (topTileMask.parentNode as HTMLElement).style.zIndex = '10';
            (topTileMask.parentNode as HTMLElement).style.height = '100%';
        })

        topTileMask.addEventListener('mouseout', () => {
            topTileMask.style.opacity = '1';
            (topTileMask.parentNode as HTMLElement).style.height = '220px';
        })
    }

    if(bottomTileMask && bottomTileMask.parentNode) {
        bottomTileMask.addEventListener('mouseenter', () => {
            bottomTileMask.style.opacity = '0';
            (topTileMask.parentNode as HTMLElement).style.zIndex = 'unset';
            (bottomTileMask.parentNode as HTMLElement).style.height = '100%';
        })

        bottomTileMask.addEventListener('mouseout', () => {
            bottomTileMask.style.opacity = '1';
            (bottomTileMask.parentNode as HTMLElement).style.height = '220px';
        })
    }
})

Note: this.$el is there because I'm using Alpinejs to wrap all the code inside a component. $el is a ref to the root element.

Summary

With our HTML structure and JavaScript in place, the animated columns are now fully functional. When users interact with the tiles, the animations will trigger, smoothly transitioning the background images and adjusting the tile sizes. The right styles will be dynamically applied to the elements, creating the visually appealing effect we set out to achieve.

🙏 Your feedback is much appreciated

Full Code

Demo

☕ Buy Me Coffee

DEV Community: Andrew Saeed

Three.js Tutorial for Beginners: Create a 3D Solar System Step by Step

Content

Introduction

Setup

📌 HTML

📌 CSS

📌 JavaScript

Add Some Data

Solar 3D Elements

Animate Elements

Stage and Render

Final Code and Demo

Bring Your Scroll to Life: A Beginner’s Guide to Scroll-Based Animations with GSAP

Content

📌 Setting Up the Stage

📌 Diving Into the Code

📌 Bringing It All Together with Full Code

Create Shopping Cart using Alpinejs

Content

Create the main Component

Component Initialization

State Variables

Initialization (init method)

Pagination (paginate method)

Toggle Cart (toggleCartHandler method)

Create the Store

Store Initialization

State Variables

Initialization (init method)

Adding a Product (addProduct method)

Removing a Product (removeProduct method)

Summary and the source code

Create animated columns of tiles with a background-images fade in and fade out

Content

What are we building?

Painting Our HTML with Tailwind.

Write some JavaScript to make it animate.

In Case of .top-tile_mask element:

In Case of .bottom-tile_mask element:

Summary

In Case of `.top-tile_mask` element:

In Case of `.bottom-tile_mask` element: