WiseDan

WiseDan

Gsap.js - how to load content in my home page when user scrolling?

hi everybody , am new in gsap.js
so i wanted load content in my home page when user scrolling , but
since am reading the documentation , when i include the cdn link , nothing is happen in the page like ( gsap.to(“.box”, { x:200, backgroundColor: “blue” })
please help with great example using gsap.js with cdn in your projet and have all done in the browser !!

Most Liked

gulshan212

gulshan212

Well, you can just copy the below code for getting what you are looking for.

<!DOCTYPE html>
<html>
<head>
    <title>GSAP Scroll Animation Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
    <style>
        body {
            height: 200vh; /* To make the page scrollable */
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div class="box"></div>

    <script>
       
<script>
    // Wait for the DOM to be ready
    document.addEventListener("DOMContentLoaded", function() {
        // GSAP animation
        gsap.to(".box", {
            x: 200,
            backgroundColor: "blue",
            duration: 1, // Animation duration in seconds
            scrollTrigger: {
                trigger: ".box", // Element that triggers the animation
                start: "top center", // Animation starts when this point of the element is at the top center of the viewport
                end: "bottom center", // Animation ends when this point of the element is at the bottom center of the viewport
                scrub: true, // Smoothly scrubs the animation as you scroll
            },
        });
    });
</script>

    </script>
</body>
</html>

Thanks

Where Next?

Popular Frontend topics Top

dyowee
Why or when should one choose Tailwind over Bootstrap? :slight_smile:
New
The_Exile
I am new to programming. I started reading Eloquent Javascript 3rd Edition, as the book comes highly recommended as a good place for beg...
/js
New
axelson
In Elixir I love to use the library GitHub - sasa1977/boundary: Manage and restrain cross-module dependencies in Elixir projects to enfor...
New
beberardinelli
Hi! I just started coding a few months ago and I am trying to get all the help I can get. My friend showed me this debugging tool called...
New
palak231
Hi this is Palak Sharma I am new here and I found this community while researching about JavaScript over the internet. Well I have comp...
/js
New
pavanforza
I have a requirement to extract data from firebase which is used to build serverless applications. Can we connect Firebase no-sql databa...
New
sona11
I was working on a project that required me to update data in a SQL database. I initiated a transaction and modified the data with a seri...
New
WiseDan
hi everybody , am new in gsap.js so i wanted load content in my home page when user scrolling , but since am reading the documentation ...
New
Clintonsuck
Hello, I am new and trying to build my first app. So far, everything was going okay, but now I’m stuck and don’t know how to proceed. May...
New
SteelFork2819
hi does anyone know how to render a cloud-stored 3D file and move a camera around in it using native html5 functions? i really don’t know...
New

Other popular topics Top

New
Exadra37
Please tell us what is your preferred monitor setup for programming(not gaming) and why you have chosen it. Does your monitor have eye p...
New
AstonJ
You might be thinking we should just ask who’s not using VSCode :joy: however there are some new additions in the space that might give V...
New
AstonJ
Do the test and post your score :nerd_face: :keyboard: If possible, please add info such as the keyboard you’re using, the layout (Qw...
New
AstonJ
In case anyone else is wondering why Ruby 3 doesn’t show when you do asdf list-all ruby :man_facepalming: do this first: asdf plugin-upd...
New
New
DevotionGeo
I have always used antique keyboards like Cherry MX 1800 or Cherry MX 8100 and almost always have modified the switches in some way, like...
New
First poster: AstonJ
Jan | Rethink the Computer. Jan turns your computer into an AI machine by running LLMs locally on your computer. It’s a privacy-focus, l...
New
PragmaticBookshelf
Develop, deploy, and debug BEAM applications using BEAMOps: a new paradigm that focuses on scalability, fault tolerance, and owning each ...
New
AnfaengerAlex
Hello, I’m a beginner in Android development and I’m facing an issue with my project setup. In my build.gradle.kts file, I have the foll...
New