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
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
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
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
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
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
sona11
What is the difference between tuple relational calculus (TRC) and domain relational calculus (DRC)? What distinguishes them from relatio...
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
JessicaW33
Hello everyone, I’m working on optimizing the performance of React Native applications and would like to gather insights and suggestions...
New
PickyBiker
I have done small amounts of programming for IOS and for Android, but now I need to create something that works with both. What are the ...
New

Other popular topics Top

ohm
Which, if any, games do you play? On what platform? I just bought (and completed) Minecraft Dungeons for my Nintendo Switch. Other than ...
New
Rainer
My first contact with Erlang was about 2 years ago when I used RabbitMQ, which is written in Erlang, for my job. This made me curious and...
New
AstonJ
I’ve been hearing quite a lot of comments relating to the sound of a keyboard, with one of the most desirable of these called ‘thock’, he...
New
AstonJ
Thanks to @foxtrottwist’s and @Tomas’s posts in this thread: Poll: Which code editor do you use? I bought Onivim! :nerd_face: https://on...
New
PragmaticBookshelf
Author Spotlight Jamis Buck @jamis This month, we have the pleasure of spotlighting author Jamis Buck, who has written Mazes for Prog...
New
PragmaticBookshelf
Author Spotlight: VM Brasseur @vmbrasseur We have a treat for you today! We turn the spotlight onto Open Source as we sit down with V...
New
sir.laksmana_wenk
I’m able to do the “artistic” part of game-development; character designing/modeling, music, environment modeling, etc. However, I don’t...
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
mindriot
Ok, well here are some thoughts and opinions on some of the ergonomic keyboards I have, I guess like mini review of each that I use enoug...
New
PragmaticBookshelf
Use advanced functional programming principles, practical Domain-Driven Design techniques, and production-ready Elixir code to build scal...
New