Horizontal Scroll

[michaelblank]

Hello Guys,

 

i am new with gsap and want to implement horizontal scroll to my card section. Sadly i dont know how do it even after watching multiple videos...

Here is my Code maybe some of you can help me

 

body {

  background-color: #111;

  font-family: "Signika Negative", sans-serif, Arial;

  margin: 0;

  padding: 0;

  height: 100vh; /* Increase height for more vertical scroll space */

  box-sizing: border-box;

  overflow-x: hidden; /* Disable horizontal scroll on the body */

}

 

.h1 {

  font-size: 15vh;

  font-weight: bold;

  margin-left: 5%;

  opacity: 0;

}

 

.h1-custom {

  font-size: 15vh;

  font-weight: bold;

  margin-left: 5%;

  margin-top: -88px;

  opacity: 0;

}

 

.h3 {

  font-size: 12vh;

  font-weight: bold;

  color: whitesmoke;

  margin-top: 80vh;

  text-align: center;

  opacity: 0;

}

 

.cards-container {

  display: flex;

  justify-content: space-around;

  align-items: center;

  margin: 20px;

}

 

.card {

  background-color: #02360f;

  color: #fff;

  padding: 20px;

  margin: 10px;

  text-align: center;

  border-radius: 10px;

  width: 30%;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}

 

.card img {

  width: 100%;

  border-radius: 10px;

}

 

.card-caption {

  margin-top: 10px;

  font-size: 22px;

}

.video-container {

  width: 100%;

  display: flex;

  justify-content: center;

  margin-top: 20vh; /* Adjust as needed to position the video lower */

  position: relative;

}

 

video {

  width: 100%;

  height: 100vh; /* Adjust the height as needed */

  object-fit: cover; /* Ensures the video covers the entire container */

}

 

 

'use client'

 

import React, { useEffect } from 'react';

import gsap from 'gsap';

import { ScrollTrigger } from 'gsap/all';

import { useGSAP } from '@gsap/react';

import '@/app/components/mainpage/main.css';

 

gsap.registerPlugin(ScrollTrigger);

 

const Main = () => {

    useGSAP(() => {

        // Animation for #text1

        gsap.to("#text1", {

            opacity: 1,

            delay: 0.4,

            x: 0,

            scrollTrigger: {

                trigger: '#text1',

                toggleActions: 'restart pause restart pause',

            }

        });

 

        // Animation for #text2

        gsap.to("#text2", {

            opacity: 1,

            x: 0,

            delay: 0.8,

            scrollTrigger: {

                trigger: '#text2',

                toggleActions: 'restart pause restart pause',

            }

        });

 

        gsap.to("#text3", {

            opacity: 1,

            x: 0,

            delay: 0.8,

            scrollTrigger: {

                trigger: '#text2',

                start: '200vh',

                end: '+=600vh',

                scrub: true,

                markers: true,

            }

        });

 

        // Background color change

        gsap.to('body', {

            backgroundColor: '#548b54', // Dark green target color

            scrollTrigger: {

                trigger: '#text2', // Trigger is #text2

                start: 'top top',   // Start animation when the trigger hits the top of the viewport

                end: '+=800vh',     // Animation duration is 800vh

                markers: true,

                scrub: true,        // Smooth animation on scroll

            }

        });

 

        // ScrollTrigger for the video

        gsap.to("#video", {

            y: '80vh', // Move down by 80vh

            scrollTrigger: {

                trigger: '#video',

                start: 'top top', // Start when the top of the video hits the bottom of the viewport

                end: 'bottom+=80vh', // End when the bottom of the video has moved 80vh beyond the start

                scrub: true,

                markers: true

            }

        });

 

        // Change background color to white after the video

        gsap.to('body', {

            backgroundColor: '#ffffff', // Target color white

            scrollTrigger: {

                trigger: '#video', // Trigger is #video

                start: 'bottom bottom', // Start animation when the end of the video hits the bottom of the viewport

                end: '+=200vh', // Animation duration is 200vh

                markers: true,

                scrub: true, // Smooth animation on scroll

            }

        });

    }, []);

 

    return (

        <div>

            <div>

                <h1 id='text1' className='h1'>Good Energy.</h1>

                <h1 id='text2' className='h1-custom'>Radical Power.</h1>

            </div>

            <div>

                <h3 id='text3' className='h3'>Unsere Referenzen</h3>

            </div>

            <div className='cards-container'>

                <div className='cards-wrapper'>

                    <div className='card'>

                        <img src='/images/1.jpg' alt='Solar 1' />

                        <div className='card-caption'>Rehling</div>

                    </div>

                    <div className='card'>

                        <img src='/images/1.jpg' alt='Solar 2' />

                        <div className='card-caption'>Heidenheim</div>

                    </div>

                    <div className='card'>

                        <img src='/images/1.jpg' alt='Solar 3' />

                        <div className='card-caption'>Turati</div>

                    </div>

                </div>

            </div>

            <div id='video' className='video-container'>

                <video src='/videos/testVid.MP4' autoPlay />

            </div>

        </div>

    );

}

 

export default Main;

[Cassie]

Hi there!

 

Here's a simple demo. Give it a go. If you get stuck, pop back with a minimal demo showing what you've tried and where you've got stuck.

See the Pen YzygYvM by GreenSock (@GreenSock) on CodePen

 

This video goes into a lot of detail step by step on horizontal scrolling, and even how to trigger animations inside a horizontally scrolling section

 

[Rodrigo]

Hi,

 

Here is a Next demo that has horizontal scrolling so you can have a look at how it works:

https://stackblitz.com/edit/stackblitz-starters-zsu4zc?file=app%2Fpage.tsx

 

Hopefully this helps.

Happy Tweening!