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
New
Sally_san
So I’ve got a client that wants to build a site like this: Specifically 3 things from the website: The fullscreen sections that chang...
New
Zuber
How to make a website like webnovel and wattpadd where subscribers and logged in user post stories like their own Novel in a website and ...
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
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
Fl4m3Ph03n1x
Background I have a fresh umbrella app and I am trying to create a Phoenix app inside it. However, even though I can create the Phoenix a...
New
Fl4m3Ph03n1x
Background I have a a fresh umbrella project with a Phoenix app inside. To create the app I used the following commands: mix new test_a...
New
Arpeggio
I have the following HTML structure, which is dynamically rendered from a Sightly (HTL) page in a new AEM component we’re building, so I ...
New
ounce591
I am currently designing the navbar of a workout tracking app written using React Native. The navbar has three buttons: Splits/Plans ...
New

Other popular topics Top

Devtalk
Reading something? Working on something? Planning something? Changing jobs even!? If you’re up for sharing, please let us know what you’...
1052 22283 402
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
There’s a whole world of custom keycaps out there that I didn’t know existed! Check out all of our Keycaps threads here: https://forum....
New
AstonJ
This looks like a stunning keycap set :orange_heart: A LEGENDARY KEYBOARD LIVES ON When you bought an Apple Macintosh computer in the e...
New
dimitarvp
Small essay with thoughts on macOS vs. Linux: I know @Exadra37 is just waiting around the corner to scream at me “I TOLD YOU SO!!!” but I...
New
PragmaticBookshelf
Tailwind CSS is an exciting new CSS framework that allows you to design your site by composing simple utility classes to create complex e...
New
Exadra37
I am asking for any distro that only has the bare-bones to be able to get a shell in the server and then just install the packages as we ...
New
mafinar
This is going to be a long an frequently posted thread. While talking to a friend of mine who has taken data structure and algorithm cou...
New
AstonJ
Was just curious to see if any were around, found this one: I got 51/100: Not sure if it was meant to buy I am sure at times the b...
New
New