Frontend>Questions

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

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 !!

1 comment
#gsapjs
2 1161 1

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

1
Post #2

Where Next?

View thread on forum
gsapjs
Home Frontend>Questions
#gsapjs
2 1161 1
Last post

Popular Frontend topics Top

jss
Frontend>Questions

What does svelte offer that React or Vue doesn’t?
What does svelte offer that React or Vue doesn’t?
/react/svelte/vuejs
12 1507 3
New
pillaiindu
Frontend>Questions

Can Svelte be used as an alternative to Stimulus and Alpine?
I mean, when you render all the HTML at the server side and the data is sent through HTTP requests, except only if some tiny things are d...
/svelte#frontend#stimulus#alpine
5 1613 0
New
david-j-m
Frontend>Questions

Svelte reset sidebar scroll to top when content changes
Hi, have a svelte spa gallery site - repl here. Have a couple of category buttons - Oil on Canvas and WaterColor… Sidebar contains all im...
#reset-sidebar-content
1 1036 0
New
palak231
Frontend>Questions

Is JavaScript IDE really helpful for Web Design
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
4 1270 2
New
sona11
Frontend>Questions

What are TRC and DRC in relation to DBMS?
What is the difference between tuple relational calculus (TRC) and domain relational calculus (DRC)? What distinguishes them from relatio...
#database
0 1010 0
New
sona11
Frontend>Questions

In Java, convert a string array to a jagged array
I have a 1D array of numbers and need help splitting them into groups using a jagged array so that I can perform a series of computations...
/java
5 1119 2
New
Fl4m3Ph03n1x
Frontend>Questions

Fresh new 1.7 Phoenix app inside umbrella fails build
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...
/elixir/phoenix/tailwind
2 1249 1
New
Fl4m3Ph03n1x
Frontend>Questions

Changing endpoint.ex to “use Desktop.Endpoint” breaks Desktop app
Background I have created a fresh Phoenix app using mix phx.new.web web_interface --no-dashboard --no-ecto --no-gettext --no-mailer insid...
/elixir/phoenix#desktop
2 1004 1
New
wilsoc31
Frontend>Questions

Complie in iOS for i15 but not ipod
First time building an app. It will run for Android and also for iPhone 15 but will not for iPod. Not sure why or where to even begin. ...
#ios#apps
0 537 0
New
ounce591
Frontend>Questions

Which FontAwesome5 icons would you use here?
I am currently designing the navbar of a workout tracking app written using React Native. The navbar has three buttons: Splits/Plans ...
/react/react-native
8 297 4
New

Other popular topics Top

Devtalk
General Dev>Dev Chat

What dev-related stuff have you been up to?
Reading something? Working on something? Planning something? Changing jobs even!? If you’re up for sharing, please let us know what you’...
#community
1052 22283 402
New
AstonJ
General Dev>Hardware

Which keyboard do you have?
If it’s a mechanical keyboard, which switches do you have? Would you recommend it? Why? What will your next keyboard be? Pics always w...
#hardware/keyboards#sticky#mechanical-keyboards
144 9115 50
New
PragmaticBookshelf
Backend>Learning Resources

Testing Elixir
Write Elixir tests that you can be proud of. Dive into Elixir’s test philosophy and gain mastery over the terminology and concepts that u...
pragprog.com
#pragprog/elixir#published-book/book-testing-elixir
33 5004 8
New
DevotionGeo
General Dev>Code Editors

Dendron: a personal knowledge management tool on top of VSCode
/vscode#visual-studio-code
30 8077 9
New
AstonJ
General Dev>Dev Chat

How fast do you type? Check your WPM here!
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...
typing-speed-test.aoeu.eu
/keyboards
82 7682 31
New
PragmaticBookshelf
Backend>Learning Resources

Programming Ruby 3.2 (5th Edition)
Programming Ruby is the most complete book on Ruby, covering both the language itself and the standard library as well as commonly used t...
twitter.com
#pragprog/ruby/rails#published-book/book-programming-ruby-3-2-5th-edition
28 8550 13
New
DevotionGeo
General Dev>Questions

Do you prefer regular mechanical keyboards or low profile mechanical keyboards and why?
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...
/keyboards#mechanical-keyboards
27 3877 9
New
hilfordjames
Windows>Chat

Taskbar Overflow Menu (NOT System Tray Overflow)
There appears to have been an update that has changed the terminology for what has previously been known as the Taskbar Overflow - this h...
#taskbar-overflow-win-11
3 3715 2
New
PragmaticBookshelf
Community>In The Spotlight

Spotlight: Peter Ullrich (Author) Interview and AMA!
Author Spotlight: Peter Ullrich @PJUllrich Data is at the core of every business, but it is useless if nobody can access and analyze ...
/elixir/phoenix/book-building-table-views-with-phoenix-liveview
72 4765 21
New
First poster: bot
General Dev>In The News

Zig now has built-in HTTP server and client in std
zig/http.zig at 7cf2cbb33ef34c1d211135f56d30fe23b6cacd42 · ziglang/zig. General-purpose programming language and toolchain for maintaini...
github.com
/zig#http
0 5624 0
New
Back to top

Sponsor Spotlight

Erlang Solutions

We build trusted fault-tolerant systems that scale to billions of users.

Frontend>Questions

Frontend Questions ❯

Latest on Devtalk

Devtalk ❯

We ❤️ helpful members!

We reward our most helpful members via our MOTM scheme - by giving away a whopping 25 books per year!

Member of the Month

Devtalk Sponsors

Pragmatic Bookshelf

Practical resources that improve the lives of professional developers.

Erlang Solutions

We build trusted fault-tolerant systems that scale to billions of users.

Honeybadger

Real-time error tracking, performance insights, and observability for devs.

EEF

Supporting innovation across the BEAM ecosystem.

coders51

We build reliable cloud platforms for business-critical systems.

Manning Publications

Develop your skills with books, videos, and courses.

AppSignal

Catch errors, track performance, monitor hosts and more.

WyeWorks

Enabling companies to succeed by building software people love.

Pragmatic Studio

Courses that move you from confusion to "Aha, now I get it!"

Linux New Media

Publishing Linux Magazine, ADMIN, and MakerSpace for 25+ years.

View all our sponsors ❯

Categories:

Sub Categories:

Popular Portals

Devtalk Sponsors

Pragmatic Bookshelf

Practical resources that improve the lives of professional developers.

Erlang Solutions

We build trusted fault-tolerant systems that scale to billions of users.

Honeybadger

Real-time error tracking, performance insights, and observability for devs.

EEF

Supporting innovation across the BEAM ecosystem.

coders51

We build reliable cloud platforms for business-critical systems.

Manning Publications

Develop your skills with books, videos, and courses.

AppSignal

Catch errors, track performance, monitor hosts and more.

WyeWorks

Enabling companies to succeed by building software people love.

Pragmatic Studio

Courses that move you from confusion to "Aha, now I get it!"

Linux New Media

Publishing Linux Magazine, ADMIN, and MakerSpace for 25+ years.

View all our sponsors ❯

We're in Beta

About us Mission Statement See our Roadmap