-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
40 lines (35 loc) · 1.48 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GSAP Reveal Image On Scroll</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="top-section">
GSAP Reveal Image On Scroll
</div>
<div class="img-container"></div>
<div class="bottom-section">
<h3>Scrolltrigger to top</h3>
<p>
ScrollTrigger is a GSAP plugin. This plugin is highly compatible and optimized with GSAP
because it was created by GSAP. The ScrollTrigger plugin works similarly to GSAP in that
it allows you to create animations.
</p>
<p>
but the difference is that the animation will only play
when the user scrolls the page or when the target element enters the viewport.
This plugin should not be compared to the intersection observer because their working
mechanisms are completely different. If you want your app to run faster, simply use ScrollTrigger
instead of intersection observer.
</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js"></script>
<script src="app.js"></script>
</body>
</html>