diff --git a/dex.css b/dex.css
new file mode 100644
index 0000000..f5c4973
--- /dev/null
+++ b/dex.css
@@ -0,0 +1,642 @@
+@font-face {
+ font-family: kor;
+ src: url(./fonts/korataki-rg-3cf0d889.ttf);
+}
+@font-face {
+ font-family: gil;
+ src: url(./fonts/Gilroy-Medium.ttf);
+}
+*{
+ margin:0;
+ padding: 0;
+ box-sizing: border-box;
+}
+html,body{
+ height: 100%;
+ width: 100%;
+}
+#main{
+ background-color: hsl(210, 10%, 23%);
+
+}
+/* #half1{
+ height: 50%;
+ width: 100%;
+ position: absolute;
+ bottom: 0;
+ background-image: url(./NothingPhoneImages/box2.png);
+ background-size: cover;
+ background-position: center;
+ z-index: 99;
+}
+#half2{
+ height: 50%;
+ width: 100%;
+ position: absolute;
+ background-image: url(./NothingPhoneImages/box1.png);
+ background-size: cover;
+ background-position: center;
+ z-index: 99;
+} */
+#home-page{
+ height: 100vh;
+ width: 100%;
+ position: relative;
+ overflow: hidden;
+
+}
+#phone1{
+ position: absolute;
+ background-image: url(./NothingPhoneImages/BA_ABR_310_1001.png);
+ background-size: cover;
+ background-position: center;
+ height: 470px;
+ width: 450px;
+ top: 110px;
+ rotate: -25deg;
+ right: 120px;
+}
+#phone2{
+ position: absolute;
+ background-image: url(./NothingPhoneImages/BA_ABR_300_1001.png);
+ background-size: cover;
+ background-position: center;
+ height: 470px;
+ width: 450px;
+ top: 130px;
+ rotate: -25deg;
+ right: 50px;
+}
+#pag{
+ height: 100vh;
+ width: 100%;
+ position: relative;
+
+
+}
+#page{
+ height: 100vh;
+ width: 100%;
+ position: relative;
+
+}
+#page #imgdiv{
+ height: 100%;
+ width: 30%;
+ position: relative;
+ background-image: url(./NothingPhoneImages/BA_ABR_310_1001.png);
+ background-position: center;
+ background-size: cover;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 3;
+
+}
+#page h2{
+ -webkit-text-fill-color: transparent;
+ -webkit-text-stroke-width:0.8px;
+ -webkit-text-stroke-color:#999D9C;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ font-size: 7vh;
+ font-weight: 900;
+ opacity: 0;
+
+}
+#page #splash1{
+ height: 100%;
+ width: 30%;
+ background-image: url(./NothingPhoneImages/splash2.png);
+ position: absolute;
+ background-size: cover;
+ background-position: center;
+ top: 5%;
+ left: -50%;
+ z-index:3;
+ opacity: 0;
+
+
+}
+#page #splash2{
+ height: 100%;
+ width: 30%;
+ background-image: url(./NothingPhoneImages/splash1.png);
+ position: absolute;
+ background-size: cover;
+ background-position: center;
+ top: 50%;
+ right: -50%;
+ z-index:3;
+ transform: translate(-50%,-50%);
+ opacity: 0;
+}
+#page1{
+ height: 100vh;
+ width: 100%;
+ overflow: hidden;
+ background-color: hsl(210, 10%, 23%);
+}
+#page1 #imgdiv{
+ height: 100%;
+ width: 30%;
+ position: relative;
+ background-image: url(./NothingPhoneImages/BA_ABR_310_1001.png);
+ background-position: center;
+ background-size: cover;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+
+}
+#page00{
+ height: 100vh;
+ width: 100%;
+ overflow: hidden;
+ background-color: hsl(210, 10%, 23%);
+}
+#page00 #imgdiv00{
+ height: 100%;
+ width: 30%;
+ position: relative;
+ background-image: url(./NothingPhoneImages/BA_ABR_310_1031.png);
+ background-position: center;
+ background-size: cover;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+
+}
+#page00 .Group3::before{
+ content: "Front Camera";
+ position: absolute;
+ top: -30px;
+ left: 25px;
+ font-family: kor;
+ color: #999D9C;
+ font-size: 2.7vh;
+ width: 100%;
+ letter-spacing: 1.5px;
+}
+#page00 h1{
+ color: #999D9C;
+ text-align: center;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%);
+ font-family: kor;
+ font-size: 7vh;
+ font-weight: 100;
+ opacity: 0;
+}
+#page00 h2{
+ -webkit-text-fill-color: transparent;
+ -webkit-text-stroke-width: 0.1px;
+ -webkit-text-stroke-color:#999D9C;
+ text-align: center;
+ position: absolute;
+ top: 40%;
+ right: -10%;
+ rotate: 90deg;
+ font-family: kor;
+ font-size: 18vh;
+ font-weight: 900;
+ opacity: 0;
+
+}
+.Group50 p{
+ position: absolute;
+ color: white;
+ font-size: 2.7vh;
+ width: 100%;
+ letter-spacing: 1.5px;
+ text-align: center;
+ margin-top: 10px;
+ font-family: gil;
+}
+#page2{
+ height: 100vh;
+ width: 100%;
+ overflow: hidden;
+ background-color: hsl(210, 10%, 23%);
+ position: relative;
+}
+#page2 #imgdiv2{
+ height: 100%;
+ width: 30%;
+ position: relative;
+ background-image: url(./NothingPhoneImages/BA_ABR_310_1031.png);
+ background-position: center;
+ background-size: cover;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 3;
+
+}
+#page2 #imgdiv3{
+ height: 71.5%;
+ width: 15%;
+ position: absolute;
+ background-image: url(./NothingPhoneImages/nothing-phone-wallpaper-img-2-transformed.jpeg);
+ background-position: center;
+ background-size: cover;
+ top: 14.5%;
+ left: 42.5%;
+
+ border-radius: 25px;
+ opacity: 1;
+ z-index: 99;
+ opacity:1;
+}
+#page1 h1{
+ color: #999D9C;
+ text-align: center;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%);
+ font-family: kor;
+ font-size: 7vh;
+ font-weight: 100;
+ opacity: 0;
+}
+#page1 h2{
+ -webkit-text-fill-color: transparent;
+ -webkit-text-stroke-width: 0.1px;
+ -webkit-text-stroke-color:#999D9C;
+ text-align: center;
+ position: absolute;
+ top: 40%;
+ right: -10%;
+ rotate: 90deg;
+ font-family: kor;
+ font-size: 18vh;
+ font-weight: 900;
+ opacity: 0;
+
+}
+.Group4::after{
+ content: "Ultra Wide";
+ position: absolute;
+ bottom: -30px;
+ left: 25px;
+ font-family: kor;
+ color: #999D9C;
+ font-size: 2.7vh;
+ width: 100%;
+ letter-spacing: 1.5px;
+}
+.Group3::before{
+ content: "Main Camera";
+ position: absolute;
+ top: -30px;
+ left: 25px;
+ font-family: kor;
+ color: #999D9C;
+ font-size: 2.7vh;
+ width: 100%;
+ letter-spacing: 1.5px;
+}
+.Group3 p{
+ position: absolute;
+ color: white;
+ font-size: 2.7vh;
+ width: 100%;
+ letter-spacing: 1.5px;
+ text-align: center;
+ margin-top: 10px;
+ font-family: gil;
+}
+.Group4 p{
+ position: absolute;
+ color: white;
+ font-size: 2.7vh;
+ width: 100%;
+ letter-spacing: 1.5px;
+ text-align: center;
+ margin-top: 10px;
+ font-family: gil;
+}
+#page2 h1{
+ -webkit-text-fill-color: transparent;
+ background: linear-gradient(to right, #4d4d4d 0, rgb(255, 255, 255) 10%, #4d4d4d 20%);
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ font-size: 30vh;
+ font-weight: 100;
+ -webkit-background-clip: text;
+ animation: shine 3s infinite linear;
+ animation-fill-mode: forwards;
+ background-position: 0;
+ opacity: 0.3;
+}
+@keyframes shine{
+ 0%{
+ background-position: 0;
+ }
+ 60%{
+ background-position: 500px;
+ }
+ 100%{
+ background-position: 1000px;
+ }
+}
+#page2 h3{
+ color: #999D9C;
+ text-align: center;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%);
+ font-family: kor;
+ font-size: 7vh;
+ font-weight: 100;
+ opacity: 0;
+ width: 100%;
+}
+#page2 h4{
+ color: #999D9C;
+ -webkit-text-fill-color: transparent;
+ -webkit-text-stroke: #999D9C;
+ -webkit-text-stroke-width: 2px;
+ text-align: center;
+ position: absolute;
+ top: 75%;
+ left: 50%;
+ transform: translate(-50%);
+ font-family: kor;
+ font-size: 20vh;
+ font-weight: 100;
+ opacity: 1;
+
+}
+#page2 p{
+ color: #999D9C;
+ text-align: center;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%);
+ font-family: kor;
+ font-size: 3vh;
+ font-weight: 100;
+ opacity:0;
+ width: 100%;
+
+}
+#page2 span{
+ color: white;
+}
+#page3{
+ height: 100vh;
+ width: 100%;
+ overflow: hidden;
+ background-color: hsl(210, 10%, 23%);
+ position: relative;
+}
+#page3 #imgdiv4{
+ height: 100%;
+ width: 40%;
+ position: absolute;
+ background-image: url(./NothingPhoneImages/BA_ABR_310_1031.png);
+ background-position: center;
+ background-size: cover;
+ left: 53%;
+ top: -37%;
+ transform: translate(-50%,-50%);
+ z-index: 2;
+ rotate: -90deg;
+
+}
+#page3 #imgdiv5{
+ height: 62%;
+ width: 43%;
+ position: absolute;
+ background-image: url(./NothingPhoneImages/enter2-hand.png);
+ background-position: center;
+ background-size: cover;
+ left: 50%;
+ top: 100%;
+ transform: translate(-50%,-50%);
+ z-index: 3;
+
+ opacity: 0;
+}
+#page3 h1{
+ -webkit-text-fill-color: transparent;
+ background: linear-gradient(to right, #4d4d4d 0, rgb(255, 255, 255) 10%, #4d4d4d 20%);
+ position: absolute;
+ top: 50%;
+ left: 51%;
+
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ font-size:50vh;
+ font-weight: 100;
+ -webkit-background-clip: text;
+ animation: shine 3s infinite linear;
+ animation-fill-mode: forwards;
+ background-position: 0;
+ opacity: 0.3;
+ width: 100%;
+ white-space: nowrap;
+}
+#page3 h3{
+ color: #999D9C;
+ text-align: center;
+ position: relative;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%);
+ font-family: kor;
+ font-size: 7vh;
+ font-weight: 100;
+ opacity: 0;
+ width: 100%;
+
+}
+#page3 p{
+ color: #999D9C;
+ text-align: center;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%);
+ font-family: kor;
+ font-size: 3vh;
+ font-weight: 100;
+ opacity:0;
+ width: 100%;
+
+}
+#page3 span{
+ color: white;
+}
+#page3 video{
+ position: absolute;
+ z-index: 2;
+ border-radius: 25px;
+ height: 240px;
+ top: 56.5%;
+ left: 50%;
+ transform: translate(-50%,-50%);
+ width: 529px;
+ object-fit: cover;
+
+}
+#page4{
+ height: 100vh;
+ width: 100%;
+ overflow: hidden;
+ background-color: hsl(210, 10%, 23%);
+ position: relative;
+}
+#page4 #imgdiv6{
+ height: 100%;
+ width: 50%;
+ position: absolute;
+ background-image: url(./NothingPhoneImages/new.png);
+ background-position: center;
+ background-size: cover;
+ left: -30%;
+ top: 40%;
+ transform: translate(-50%,-50%);
+ z-index: 2;
+
+
+}
+#page4 #imgdiv7{
+ height: 100%;
+ width: 50%;
+ position: absolute;
+ background-image: url(./NothingPhoneImages/new2.png);
+ background-position: center;
+ background-size: cover;
+ right:-80%;
+ top: 70%;
+ transform: translate(-50%,-50%);
+ z-index: 2;
+
+}
+#page4 #txt1{
+ position: absolute;
+ top: 25%;
+ left: 0%;
+ letter-spacing: 1.5px;
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ color: #999D9C;
+ font-size: 6vh;
+ font-weight: 100;
+ background-position: 0;
+ opacity: 0;
+ width: 100%;
+ white-space: nowrap;
+}
+#page4 #txt2{
+ position: absolute;
+ top: 83%;
+ left: 100%;
+ letter-spacing: 1.5px;
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ color: #999D9C;
+ font-size: 6vh;
+ font-weight: 100;
+ background-position: 0;
+ opacity: 0;
+ width: 100%;
+ white-space: nowrap;
+}
+#page5{
+ height: 100vh;
+ width: 100%;
+ overflow: hidden;
+ background-color: hsl(210, 10%, 23%);
+ position: relative;
+}
+#page5 #imgdiv8{
+ height: 100%;
+ width: 50%;
+ position: absolute;
+ background-image: url(./NothingPhoneImages/new3.png);
+ background-position: center;
+ background-size: cover;
+ left: -30%;
+ top: 60%;
+ transform: translate(-50%,-50%);
+ z-index: 2;
+
+
+}
+#page5 #imgdiv9{
+ height: 100%;
+ width: 50%;
+ position: absolute;
+ background-image: url(./NothingPhoneImages/new4.png);
+ background-position: center;
+ background-size: cover;
+ right:-80%;
+ top: 75%;
+ transform: translate(-50%,-50%);
+ z-index: 2;
+
+}
+#page5 p{
+ position: absolute;
+ top: 17%;
+ left: 65%;
+ letter-spacing: 1.5px;
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ color: #999D9C;
+ font-size: 6vh;
+ font-weight: 100;
+ background-position: 0;
+ opacity: 0;
+ width: 100%;
+ white-space: nowrap;
+}
+#page5 #up{
+ position: absolute;
+ top: 17%;
+ left: 65%;
+ letter-spacing: 1.5px;
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ color: #999D9C;
+ font-size: 6vh;
+ font-weight: 100;
+ background-position: 0;
+ opacity: 0;
+ width: 100%;
+ white-space: nowrap;
+ -webkit-text-fill-color: transparent;
+ -webkit-text-stroke-color: #999D9C;
+ -webkit-text-stroke-width: 1.5px;
+}
+#page5 #down{
+ position: absolute;
+ top: 17%;
+ left: 65%;
+ letter-spacing: 1.5px;
+ transform: translate(-50%,-50%);
+ font-family: kor;
+ font-size: 6vh;
+ font-weight: 100;
+ background-position: 0;
+ opacity: 0;
+ width: 100%;
+ white-space: nowrap;
+ -webkit-text-fill-color: transparent;
+ -webkit-text-stroke-color: #999D9C;
+ -webkit-text-stroke-width: 1.5px;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..832369c
--- /dev/null
+++ b/index.html
@@ -0,0 +1,243 @@
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
NOTHING
+
+
+
+
+
+
+
+
+
+
+
Support
+
+
+
+
+
+
+
+
+
+
Community
+
+
+
+
NOTHING PHONE (1)
PURE INSTINCT
+
+
+
Snapdragon 778G+ | 50 MP Dual Camera
+
+
+
Features
+
+
+
+
+
+
+
Design
+
Design that goes beyond the surface.
+
+
+
+
+
+
+
+
Camera
+
50MP dual camera with Sony IMX sensor
+
+
+
+
+
+
+
+
Display
+
6.55 AMOLED HDR10+ Display.
+
+
+
+
+
+
+
+
Sustainability
+
Made with 100% recycled aluminium.
+
+
+
+
+
+
+
+
Battery
+
Fuel everything you need. Enjoy as much as you want.
+
+
+
+
+
+
+
+
Glyph Interface
+
A new way to communicate. Unique light patterns
+
+
+
+
+
+
+
+
Chipset
+
Snapdragon 778G+ accelerated by 5G
+
+
+
+
+
+
+
+
Performance
+
Essential power for speed and gaming
+
+
+
+
+
+
+
+
+
Shoot Every Detail
Feel Every Emotion
+
50MP
+
+
+
+
+
+
+
+
+
50 MP
Sony IMX766 sensor
+
+
+
+
+
+
+
+
+
+
+
50 MP
Samsung JN1 sensor
+
+
+
+
+
+
Include yourself with every moment
+
16MP
+
+
+
+
+
+
+
+
+
16 MP
Sony IMX471 sensor
+
+
+
+
+
+
+
HDR10+
+
Outshine the Ordinary
10 Bit AMOLED Display
+
1200nits Peak Brightness
+
120HZ
+
+
+
+
Experience the Ultimate
Performance with Snapdragon
778G+ chipset
+
596815 Antutu benchmark score
+
+
+
+
+
+
+
6 nm
+
+
+
+
+
+
The symmetrical bezels and aluminium frame
+
adds elegance, lightness and durability
+
+
+
+
Shining White and Shining Black
+
Shining White and Shining Black
+
Shining White and Shining Black
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..35d1b84
--- /dev/null
+++ b/script.js
@@ -0,0 +1,542 @@
+function locomotive(){
+ gsap.registerPlugin(ScrollTrigger);
+
+// Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll
+
+const locoScroll = new LocomotiveScroll({
+ el: document.querySelector("#main"),
+ smooth: true,
+
+});
+// each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)
+locoScroll.on("scroll", ScrollTrigger.update);
+
+// tell ScrollTrigger to use these proxy methods for the "#main" element since Locomotive Scroll is hijacking things
+ScrollTrigger.scrollerProxy("#main", {
+ scrollTop(value) {
+ return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
+ }, // we don't have to define a scrollLeft because we're only scrolling vertically.
+ getBoundingClientRect() {
+ return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight};
+ },
+ // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
+ pinType: document.querySelector("#main").style.transform ? "transform" : "fixed"
+});
+// each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll.
+ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
+
+// after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
+ScrollTrigger.refresh();
+
+}
+locomotive()
+var t1=gsap.timeline();
+const group3=document.getElementsByClassName("Group3");
+const group4=document.getElementsByClassName("Group4");
+const group50=document.getElementsByClassName("Group50");
+const group9=document.getElementsByClassName("Group9");
+const group10=document.getElementsByClassName("Group10");
+const group11=document.getElementsByClassName("Group11");
+const group12=document.getElementsByClassName("Group12");
+const group13=document.getElementsByClassName("Group13");
+const group14=document.getElementsByClassName("Group14");
+const group15=document.getElementsByClassName("Group15");
+const group16=document.getElementsByClassName("Group16");
+const nothing=document.getElementsByClassName("nothing");
+const group2=document.getElementsByClassName("Group2");
+const group20=document.getElementsByClassName("Group20");
+const group21=document.getElementsByClassName("Group21");
+const phone1=document.getElementById("phone1");
+const phone2=document.getElementById("phone2");
+const pure=document.getElementsByClassName("pure");
+const home=document.getElementById("home-page");
+const snap=document.getElementsByClassName("snap");
+
+// t1.to("#half1",{
+// duration:1,
+// stagger:2,
+// y:500,
+// })
+// t1.to("#half2",{
+
+// duration:1,
+// stagger:2,
+// y:-500,
+// })
+// t1.from(nothing,{
+// scale:5,
+// duration:1,
+// x:550,
+// y:300,
+
+
+// })
+t1.from([group2,group20,group21],{
+ y: -100,
+ opacity:0,
+ duration:0.5,
+ stagger:0.25,
+})
+t1.from([phone1,phone2],{
+ opacity:0,
+ duration:0.5,
+ stagger:0.5,
+ y:200,
+})
+t1.from(pure,{
+ opacity:0,
+ duration:0.5,
+ stagger:0.5,
+ y:50,
+})
+t1.from(snap,{
+ opacity:0,
+ duration:0.5,
+ stagger:0.5,
+ y:10,
+})
+
+t1.to([group9,group10,group11,group12,group13,group14,group15, group16],{
+ opacity:1,
+ stagger:0.25,
+ duration:2,
+ scrollTrigger:{
+ trigger:"#pag",
+ scroller:"#main",
+ scrub:2,
+ pin:true,
+ start:"top top",
+ end:"bottom 20%",
+ }
+});
+
+t1.to("#page",{
+
+ scrollTrigger:{
+ trigger:"#page",
+ scroller:"#main",
+ pin:true,
+
+
+ }
+
+});
+
+
+t1.to("#page h2",{
+ scale:7,
+ opacity:1,
+ scrollTrigger:{
+ trigger:"#page h2",
+ scroller:"#main",
+ scrub:2,
+
+ }
+
+});
+t1.to("#page #splash1",{
+ x:920,
+ duration:3,
+ opacity:1,
+ scrollTrigger:{
+ trigger:"#page #splash1",
+ scroller:"#main",
+ scrub:2,
+
+ }
+});
+t1.to("#page #splash2",{
+ x:-920,
+ opacity:1,
+ duration:3,
+ scrollTrigger:{
+ trigger:"#page #splash2",
+ scroller:"#main",
+ scrub:2,
+
+ }
+});
+t1.to("#page1 #imgdiv",{
+ scale:3,
+ stagger:0.25,
+ duration:3,
+
+ y:600,
+ scrollTrigger:{
+ trigger:"#page1",
+ scroller:"#main",
+ pin:true,
+ scrub:2,
+
+ }
+
+});
+t1.to("#page1 h1",{
+ opacity:1,
+ top:"5%",
+ stagger:0.25,
+ duration:2,
+ scrollTrigger:{
+ trigger:"#page1 h1",
+ scroller:"#main",
+
+ start:"top 50%",
+ end:"top 10%",
+ scrub:2,
+
+
+ }
+
+});
+t1.to("#page1 h2",{
+ opacity:1,
+ stagger:0.25,
+ duration:3,
+ scrollTrigger:{
+ trigger:"#page1 h2",
+ scroller:"#main",
+
+ start:"top 30%",
+ end:"top 10%",
+ scrub:2,
+
+ }
+
+});
+t1.to(group3,{
+ opacity:1,
+ stagger:0.25,
+ duration:3,
+ scrollTrigger:{
+ trigger:group3,
+ scroller:"#main",
+ start:"top 30%",
+ end:"top 10%",
+ scrub:2,
+
+ }
+
+});
+t1.to(group4,{
+ opacity:1,
+ stagger:0.25,
+ duration:3,
+ scrollTrigger:{
+ trigger:group4,
+ scroller:"#main",
+
+ start:"top 20%",
+ end:"top 5%",
+ scrub:2,
+
+ }
+
+});
+t1.to("#page00 #imgdiv00",{
+ scale:3,
+ stagger:0.25,
+ duration:3,
+ y:600,
+ scrollTrigger:{
+ trigger:"#page00",
+ scroller:"#main",
+ pin:true,
+ scrub:2,
+
+ }
+
+});
+t1.to(group50,{
+ opacity:1,
+ stagger:0.25,
+ duration:3,
+ scrollTrigger:{
+ trigger:group50,
+ scroller:"#main",
+
+ start:"top 20%",
+ end:"top 5%",
+ scrub:2,
+
+ }
+
+});
+t1.to("#page00 h2",{
+ opacity:1,
+ stagger:0.25,
+ duration:3,
+ scrollTrigger:{
+ trigger:"#page00 h2",
+ scroller:"#main",
+
+ start:"top 30%",
+ end:"top 10%",
+ scrub:2,
+
+ }
+
+});
+t1.to("#page00 h1",{
+ opacity:1,
+ top:"5%",
+ stagger:0.25,
+ duration:2,
+ scrollTrigger:{
+ trigger:"#page00 h1",
+ scroller:"#main",
+
+ start:"top 50%",
+ end:"top 10%",
+ scrub:2,
+
+
+ }
+
+});
+t1.to("#page2 #imgdiv2",{
+ scale:1.4,
+ rotation: -90,
+
+
+ duration:3,
+
+ scrollTrigger:{
+ trigger:"#page2",
+ scroller:"#main",
+ pin:true,
+ scrub:2,
+
+ }
+
+});
+
+t1.to("#page2 h3",{
+ opacity:1,
+ top:"0%",
+ stagger:0.25,
+ duration:2,
+ scrollTrigger:{
+ trigger:"#page2 h3",
+ scroller:"#main",
+
+ start:"top 50%",
+ end:"top 10%",
+ scrub:2,
+
+
+ }
+
+});
+t1.to("#page2 p",{
+ opacity:1,
+ top:"20%",
+ stagger:0.25,
+ duration:2,
+ scrollTrigger:{
+ trigger:"#page2 p",
+ scroller:"#main",
+
+ start:"top 50%",
+ end:"top 10%",
+ scrub:2,
+
+
+ }
+});
+t1.to("#page2 #imgdiv3",{
+ scale:4,
+
+ duration:3,
+ rotation:-90,
+ opacity:0,
+ scrollTrigger:{
+ trigger:"#page2 #imgdiv3",
+ scroller:"#main",
+ scrub:2,
+ start:"top 15%",
+ }
+
+});
+t1.from("#page2 h4",{
+ y:-100,
+ scale:3.5,
+ stagger:3,
+ duration:3,
+ opacity:0,
+ scrollTrigger:{
+ trigger:"#page2 h4",
+ scroller:"#main",
+ scrub:2,
+ }
+});
+t1.to("#page3 h3",{
+ opacity:1,
+ top:"0%",
+ stagger:0.25,
+ duration:2,
+ scrollTrigger:{
+ trigger:"#page3 h3",
+ scroller:"#main",
+ start:"top 50%",
+ end:"top 10%",
+ scrub:2,
+
+ }
+
+});
+t1.to("#page3",{
+ scrollTrigger:{
+ trigger:"#page3",
+ scroller:"#main",
+ pin:true,
+
+ }
+
+});
+t1.to("#page3 #imgdiv5",{
+ y:-162,
+ stagger:0.25,
+ duration:1,
+ opacity:1,
+ scrollTrigger:{
+ trigger:"#page3 #imgdiv5",
+ scroller:"#main",
+
+ scrub:2,
+
+ }
+});
+t1.to("#page3 p",{
+ opacity:1,
+ top:"30%",
+ stagger:0.25,
+ duration:2,
+ scrollTrigger:{
+ trigger:"#page3 p",
+ scroller:"#main",
+
+ start:"top 50%",
+ end:"top 10%",
+ scrub:2,
+
+
+ }
+});
+
+
+t1.to("#page4",{
+ scrollTrigger:{
+ trigger:"#page4",
+ scroller:"#main",
+ pin:true,
+
+ }
+
+});
+t1.to("#page4 #imgdiv6",{
+ x:700,
+ duration:4,
+ scrollTrigger:{
+ trigger:"#page4 #imgdiv6",
+ scroller:"#main",
+
+ scrub:2,
+
+ }
+});
+t1.to("#page4 #imgdiv7",{
+ x:-700,
+ duration:4,
+ scrollTrigger:{
+ trigger:"#page4 #imgdiv7",
+ scroller:"#main",
+
+ scrub:2,
+
+ }
+});
+t1.to("#page4 #txt1",{
+ x:700,
+ duration:4,
+ opacity:1,
+ scrollTrigger:{
+ trigger:"#page4 #txt1",
+ scroller:"#main",
+
+ scrub:2,
+
+ }
+});
+t1.to("#page4 #txt2",{
+ x:-430,
+ duration:4,
+ opacity:1,
+ scrollTrigger:{
+ trigger:"#page4 #txt2",
+ scroller:"#main",
+
+ scrub:2,
+
+ }
+});
+t1.to("#page5",{
+ scrollTrigger:{
+ trigger:"#page5",
+ scroller:"#main",
+ pin:true,
+
+ }
+
+});
+t1.to("#page5 #imgdiv8",{
+ x:700,
+ duration:4,
+ scrollTrigger:{
+ trigger:"#page5 #imgdiv8",
+ scroller:"#main",
+ scrub:2,
+
+ }
+});
+t1.to("#page5 #imgdiv9",{
+ x:-700,
+ duration:4,
+ scrollTrigger:{
+ trigger:"#page5 #imgdiv9",
+ scroller:"#main",
+ scrub:2,
+ }
+});
+t1.to("#page5 p",{
+ scale:1.2,
+ opacity:1,
+ duration:4,
+ scrollTrigger:{
+ trigger:"#page5 p",
+ scroller:"#main",
+ scrub:2,
+ }
+});
+t1.to("#page5 #up",{
+ y:60,
+ duration:4,
+ opacity:1,
+ scrollTrigger:{
+ trigger:"#page5 #up",
+ scroller:"#main",
+ scrub:2,
+ }
+});
+t1.to("#page5 #down",{
+ y:-60,
+ opacity:1,
+ duration:4,
+ scrollTrigger:{
+ trigger:"#page5 #up",
+ scroller:"#main",
+ scrub:2,
+ }
+});
+
+
+