-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
76 lines (71 loc) · 3.75 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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
</head>
<body class="bg-neutral-600 dark:bg-zinc-900">
<div class="container mx-auto grid h-dvh sticky top-0 z-0 text-center content-center">
<!-- <lottie-player id="introLottie" src="https://raw.githubusercontent.com/designerabhishek/ShowReel/main/assets/Welcome-Text.json" background="transparent" speed="0.5" style="width: 100%; height: auto;" loop autoplay></lottie-player> -->
<h1 id="split" class="text-6xl m-0 leading-none pt-6 border ">Get, Set, Scroll</h1>
</div>
<div id="animated" class="container mx-auto grid ">
<lottie-player id="firstLottie" src="https://raw.githubusercontent.com/designerabhishek/ShowReel/main/assets/Happy-Faces-%E2%80%93-Landing-page.json" background="transparent" speed="1" style="width: 100%; height: auto;" loop autoplay></lottie-player>
</div>
<div class="container mx-auto grid sm:h-dvh justify-center content-start z-10 mix-blend-lighten relative bg-red-600 p-11">
<h2 class="font-mono text-slate-900 dark:text-slate-50 max-w-screen-sm text-balance text-center text-3xl relative">Scroll animation achieved through lottie interactivity</h2>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<script src=""></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/TextPlugin.min.js"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<script src="/[YOUR_DIRECTORY]/SplitText.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
gsap.registerPlugin(ScrollTrigger, SplitText);
// Ensure SplitText is included in your project if you're using it
let mySplitText = new SplitText('#split', {type: 'chars'});
let chars = mySplitText.chars;
gsap.from(chars, {
yPercent: 139,
stagger: 0.02,
ease: 'back.out',
duration: 1,
scrollTrigger: {
trigger: '#split',
start: "top 80%",
markers: true
}
});
});
</script>
<script>
LottieInteractivity.create({
player: '#firstLottie',
mode: 'scroll',
container: '#animated',
actions: [
{
visibility: [0, 1.0],
type: 'seek',
frames: [-29, 320],
},
]
});
</script>
</body>
</html>