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

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
david-j-m
Hi I have a gallery site which displays paintings according to selected category (oils, water-color, etc.) “on:click” event. When this e...
/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
tomcatttttt
I’m trying to take the API from the site to get a seamless online game through the HTML5 API. It works in all browsers except Google Chro...
New
prego4444
how can i make a border like this to be exactly on the midle of the edge? i could only found border in inside and outside but nothing on ...
New
Fl4m3Ph03n1x
Background I have a Phoenix application, where all pages (expect the login page) have a menu at the top. This menu will therefore only a...
New
pjamesrud
I am creating an app that allows user to enter values and depending on the value a number of textviews are changed programmatically from ...
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
Benjamin-Philip
I’m curious about designing some websites and applications for personal (and potentially public via open sourcing) use. I’m an experience...
New

Other popular topics Top

PragmaticBookshelf
Ruby, Io, Prolog, Scala, Erlang, Clojure, Haskell. With Seven Languages in Seven Weeks, by Bruce A. Tate, you’ll go beyond the syntax—and...
New
dasdom
No chair. I have a standing desk. This post was split into a dedicated thread from our thread about chairs :slight_smile:
New
PragmaticBookshelf
Design and develop sophisticated 2D games that are as much fun to make as they are to play. From particle effects and pathfinding to soci...
New
New
AstonJ
Curious to know which languages and frameworks you’re all thinking about learning next :upside_down_face: Perhaps if there’s enough peop...
New
AstonJ
poll poll Be sure to check out @Dusty’s article posted here: An Introduction to Alternative Keyboard Layouts It’s one of the best write-...
New
PragmaticBookshelf
Programming Ruby is the most complete book on Ruby, covering both the language itself and the standard library as well as commonly used t...
New
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
PragmaticBookshelf
Explore the power of Ash Framework by modeling and building the domain for a real-world web application. Rebecca Le @sevenseacat and ...
New