├── README.md
├── ppmori.ttf
├── ppmori-regular.woff2
├── script.js
├── style.css
└── index.html


/README.md:
--------------------------------------------------------------------------------
1 | Note: Use this source code when you get some issues or doubts.
2 | 


--------------------------------------------------------------------------------
/ppmori.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/saarthack/duo-studio/HEAD/ppmori.ttf


--------------------------------------------------------------------------------
/ppmori-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/saarthack/duo-studio/HEAD/ppmori-regular.woff2


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
  1 | function init() {
  2 |     gsap.registerPlugin(ScrollTrigger);
  3 | 
  4 |     const locoScroll = new LocomotiveScroll({
  5 |         el: document.querySelector(".main"),
  6 |         smooth: true
  7 |     });
  8 |     locoScroll.on("scroll", ScrollTrigger.update);
  9 | 
 10 |     ScrollTrigger.scrollerProxy(".main", {
 11 |         scrollTop(value) {
 12 |             return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
 13 |         }, // we don't have to define a scrollLeft because we're only scrolling vertically.
 14 |         getBoundingClientRect() {
 15 |             return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight };
 16 |         },
 17 |         pinType: document.querySelector(".main").style.transform ? "transform" : "fixed"
 18 |     });
 19 | 
 20 | 
 21 |     ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
 22 | 
 23 |     ScrollTrigger.refresh();
 24 | 
 25 | }
 26 | 
 27 | init()
 28 | 
 29 | var crsr = document.querySelector(".cursor")
 30 | var main = document.querySelector(".main")
 31 | document.addEventListener("mousemove",function(dets){
 32 |     crsr.style.left = dets.x + 20+"px"
 33 |     crsr.style.top = dets.y + 20+"px"
 34 | })
 35 | 
 36 | gsap.from(".page1 h1,.page1 h2", {
 37 |     y: 10,
 38 |     rotate: 10,
 39 |     opacity: 0,
 40 |     delay: 0.3,
 41 |     duration: 0.7
 42 | })
 43 | var tl = gsap.timeline({
 44 |     scrollTrigger: {
 45 |         trigger: ".page1 h1",
 46 |         scroller: ".main",
 47 |         // markers:true,
 48 |         start: "top 27%",
 49 |         end: "top 0",
 50 |         scrub: 3
 51 |     }
 52 | })
 53 | tl.to(".page1 h1", {
 54 |     x: -100,
 55 | }, "anim")
 56 | tl.to(".page1 h2", {
 57 |     x: 100
 58 | }, "anim")
 59 | tl.to(".page1 video", {
 60 |     width: "90%"
 61 | }, "anim")
 62 | 
 63 | var tl2 = gsap.timeline({
 64 |     scrollTrigger: {
 65 |         trigger: ".page1 h1",
 66 |         scroller: ".main",
 67 |         // markers:true,
 68 |         start: "top -115%",
 69 |         end: "top -120%",
 70 |         scrub: 3
 71 |     }
 72 | })
 73 | tl2.to(".main", {
 74 |     backgroundColor: "#fff",
 75 | })
 76 | 
 77 | var tl3 = gsap.timeline({
 78 |     scrollTrigger: {
 79 |         trigger: ".page1 h1",
 80 |         scroller: ".main",
 81 |         // markers:true,
 82 |         start: "top -280%",
 83 |         end: "top -300%",
 84 |         scrub: 3
 85 |     }
 86 | })
 87 | 
 88 | tl3.to(".main",{
 89 |     backgroundColor:"#0F0D0D"
 90 | })
 91 | 
 92 | 
 93 | var boxes = document.querySelectorAll(".box")
 94 | boxes.forEach(function(elem){
 95 |     elem.addEventListener("mouseenter",function(){
 96 |         var att = elem.getAttribute("data-image")
 97 |         crsr.style.width = "470px"
 98 |         crsr.style.height = "370px"
 99 |         crsr.style.borderRadius = "0"
100 |         crsr.style.backgroundImage = `url(${att})`
101 |     })
102 |     elem.addEventListener("mouseleave",function(){
103 |         elem.style.backgroundColor = "transparent"
104 |         crsr.style.width = "20px"
105 |         crsr.style.height = "20px"
106 |         crsr.style.borderRadius = "50%"
107 |         crsr.style.backgroundImage = `none`
108 |     })
109 | })
110 | 
111 | var h4 = document.querySelectorAll("#nav h4")
112 | var purple = document.querySelector("#purple")
113 | h4.forEach(function(elem){
114 |     elem.addEventListener("mouseenter",function(){
115 |         purple.style.display = "block"   
116 |         purple.style.opacity = "1"
117 |     })
118 |     elem.addEventListener("mouseleave",function(){
119 |         purple.style.display = "none"   
120 |         purple.style.opacity = "0"
121 |     })
122 | })


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | @font-face {
  2 |     font-family: PP mori;
  3 |     src: url(./ppmori.ttf);
  4 | }
  5 | 
  6 | * {
  7 |     margin: 0;
  8 |     padding: 0;
  9 |     box-sizing: border-box;
 10 |     font-family: PP mori;
 11 |     color: #fff;
 12 | }
 13 | 
 14 | html, body {
 15 |     height: 100%;
 16 |     width: 100%;
 17 | }
 18 | #purple{
 19 |     height: 100vh;
 20 |     width: 100vw;
 21 |     top: 0;
 22 |     position: fixed;
 23 |     z-index: 100;
 24 |     background-color: #EDBFFF;
 25 |     opacity: 0;
 26 |     display: none;
 27 |     transition: opacity ease 1s;
 28 |     
 29 | }
 30 | .cursor{
 31 |     height: 20px;
 32 |     width: 20px;
 33 |     border-radius: 50%;
 34 |     position: fixed;
 35 |     background-color: #EDBFFF;
 36 |     z-index: 8;
 37 |     transition: background-image ease 0.5s;
 38 |     background-position: center;
 39 |     background-size:cover ;
 40 |     mix-blend-mode: difference;
 41 | }
 42 | .main{
 43 |     background-color: #0F0D0D;
 44 |     cursor: none;
 45 | }
 46 | 
 47 | .page1{
 48 |     min-height: 100vh;
 49 |     width: 100%;
 50 |     position: relative;
 51 |     z-index: 9;
 52 |     padding-top: 12vw;
 53 | }
 54 | 
 55 | 
 56 | #nav{
 57 |     height: 55px;
 58 |     width: 100%;
 59 |     /* background-color: red; */
 60 |     display: flex;
 61 |     align-items: center;
 62 |     justify-content: space-between;
 63 |     padding: 0 30px;
 64 |     position: fixed;
 65 |     mix-blend-mode: difference;
 66 |     z-index:102;
 67 | }
 68 | #nav img{
 69 |     height: 27px;
 70 | }
 71 | #nav-part2{
 72 |     display: flex;
 73 |     align-items: center;
 74 |     justify-content: center;
 75 |     gap: 20px;
 76 | }
 77 | 
 78 | #nav #circle{
 79 |     height: 18px;
 80 |     width: 18px;
 81 |     border-radius: 50%;
 82 |     background-color: #fff;
 83 | }
 84 | #nav h4{
 85 |     font-size: 16px;
 86 |     font-weight: 500;
 87 |     text-transform: uppercase;
 88 | }
 89 | #nav h4:nth-child(1){
 90 |     border-bottom: 1.5px solid #fff;
 91 | }
 92 | 
 93 | .page1 h1{
 94 |     font-size: 8vw;
 95 |     font-weight: 300;
 96 |     font-family: PP mori;
 97 | 
 98 |     margin-left: 6vw;
 99 |     transform-origin: left;
100 | }
101 | .page1 h2{
102 |     font-size: 8vw;
103 |     font-weight: 300;
104 |     transform-origin: left;
105 | 
106 |     margin-left: 26vw;
107 | }
108 | 
109 | .page1 video{
110 |     width: 60%;
111 |     margin-top: 10vw;
112 |     position: relative;
113 |     left: 50%;
114 |     transform: translate(-50%,0);
115 | }
116 | 
117 | .page2{
118 |     min-height: 80vh;
119 |     width: 100%;
120 |     padding: 100px 5vw;
121 |     border-bottom: 2px solid #6c6c6c;
122 |     position: relative;
123 |     z-index: 9;
124 | }
125 | 
126 | .page2 h1{
127 |     font-size:7vw;
128 |     font-weight: 500;
129 |     color: #111;
130 | 
131 | }
132 | .page2-container{
133 |     height: 60vh;
134 |     width: 100%;
135 |     /* background-color: red; */
136 |     display: flex;
137 |     align-items: center;
138 |     justify-content: space-between;
139 |     /* padding: 0 5vw; */
140 | }
141 | .page2-left{
142 |     /* background-color: blue; */
143 |     width: 40%;
144 | }
145 | .page2-right{
146 |     /* background-color: blue; */
147 |     width: 24%;
148 | }
149 | .page2-left h2{
150 |     font-size: 4vw;
151 |     font-weight: 300;
152 |     color: #111;
153 |     line-height: 4vw;
154 | }
155 | .page2-right p{
156 |     font-size: 28px;
157 |     color: #111;
158 | }
159 | .page2-right button{
160 |     width: 100%;
161 |     border-radius: 50px;
162 |     border: none;
163 |     padding: 4px 0;
164 |     background-color: #EDBFFF;
165 |     color: #111;
166 |     margin-top: 20px;
167 | }
168 | 
169 | .page3{
170 |     min-height: 100vh;
171 |     width: 100%;
172 |     padding-top: 100px;
173 |     position: relative;
174 |     z-index: 9;
175 | }
176 | 
177 | .page3 h1{
178 |     font-size: 6.8vw;
179 |     font-weight: 300;
180 |     color: #111;
181 |     margin-left: 100px;
182 | }
183 | .page3-part1{
184 |     display: flex;
185 |     align-items: flex-start;
186 |     justify-content: space-between;
187 | 
188 | }
189 | .page3-part1 img{
190 |     height: 400px;
191 |     margin-top: 160px;
192 | }
193 | .page3-part1 video{
194 |     height: 400px;
195 |     margin-top: 40px;
196 | }
197 | .page4{
198 |     min-height: 100vh;
199 |     width: 100%;
200 |     z-index: 9;
201 |     position: relative;
202 |     padding: 170px 100px;
203 | }
204 | .elem{
205 |     /* background-color: salmon; */
206 |     margin-bottom: 10px;
207 |     display: flex;
208 |     align-items: center;
209 |     justify-content: center;
210 |     position: relative;
211 | }
212 | .elem img{
213 |     position: absolute;
214 |     opacity: 0;
215 |     transition: all ease-out 0.5s;
216 |     transform: translateY(10%) rotate(2deg);
217 | }
218 | .elem img:nth-child(1){
219 |     left: 2%;
220 | }
221 | .elem img:nth-child(3){
222 |     right: 5%;
223 | }
224 | .text-div{
225 |     height: 16vh;
226 |     position: relative;
227 |     z-index: 9;
228 |     overflow: hidden;
229 | }
230 | .elem h1{
231 |     font-size: 7.5vw;
232 |     font-weight: 600;
233 |     transition: all ease-out 0.5s;
234 | }
235 | 
236 | .elem:hover h1{
237 |     transform: translateY(-100%);
238 |     color: #EDBFFF;
239 | }
240 | .elem:hover img{
241 |     opacity: 1;
242 |     transform: translateY(0%) rotate(0deg);
243 | 
244 | }
245 | 
246 | 
247 | .page5{
248 |     min-height: 100vh;
249 |     width: 100%;
250 |     position: relative;
251 |     z-index: 9;
252 |     padding: 140px 100px;
253 | }
254 | .page5 h2{
255 |     font-size: 4vw;
256 |     text-transform: uppercase;
257 |     font-weight: 400;
258 |     margin-bottom: 50px;
259 | }
260 | .box{
261 |     /* background-color: red; */
262 |     display: flex;
263 |     align-items: center;
264 |     justify-content: space-between;
265 |     height: 100px;
266 |     padding: 0 20px;
267 |     border-top: 2px solid #dadada;
268 | }
269 | 
270 | .box:nth-last-child(1){
271 |     border-bottom: 2px solid #dadada;
272 | 
273 | }
274 | 
275 | 
276 | footer{
277 |     height: 90vh;
278 |     width: 100%;
279 |     background-color: #EDBFFF;
280 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Duo Studio — A Creative Digital Agency in Washington DC</title>
  8 |     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css">
  9 |     <link rel="stylesheet" href="style.css">
 10 | 
 11 | </head>
 12 | 
 13 | <body>
 14 |     <div class="cursor"></div>
 15 |     <div id="nav">
 16 |         <img src="https://d33wubrfki0l68.cloudfront.net/439bf938233c24af021ffe6d206cd42f546e1143/ff4ed/assets/logo.svg"
 17 |             alt="">
 18 |         <div id="nav-part2">
 19 |             <h4>Home</h4>
 20 |             <h4>Work</h4>
 21 |             <h4>Studio</h4>
 22 |             <h4>Contact</h4>
 23 |         </div>
 24 |         <div id="nav-part3">
 25 |             <div id="circle"></div>
 26 |         </div>
 27 |     </div>
 28 |     <div id="purple">
 29 |         
 30 |     </div>
 31 |     <div class="main">
 32 |         <div class="page1">
 33 |             
 34 |             <h1>Digitally crafted</h1>
 35 |             <h2>brand experiences</h2>
 36 |             <video autoplay muted loop src="https://duo-studio.co/assets/home/Duo%20Reel--Desktop-reduced.mp4"></video>
 37 |         </div>
 38 |         <div class="page2">
 39 |             <h1>We are Duo Studio,</h1>
 40 |             <div class="page2-container">
 41 |                 <div class="page2-left">
 42 |                     <h2>A CREATIVE
 43 |                         COLLECTIVE
 44 |                         MADE TO UNLOCK
 45 |                         YOUR BRAND’S
 46 |                         POTENTIAL</h2>
 47 |                 </div>
 48 |                 <div class="page2-right">
 49 |                     <p>We weave together bold strategy and creative execution to produce thought-provoking digital
 50 |                         experiences. We take a highly personalized approach to delivering branding, web design, and
 51 |                         content marketing solutions. Born in the DC area - now serving clients worldwide.</p>
 52 |                     <button>About us</button>
 53 |                 </div>
 54 |             </div>
 55 | 
 56 |         </div>
 57 |         <div class="page3">
 58 |             <h1>Selected Works</h1>
 59 |             <div class="page3-part1">
 60 |                 <img src="https://d33wubrfki0l68.cloudfront.net/aa3d2ff66de5f16336bd94fd68c3c2ce61e29f68/d5064/assets/home/home-casestudy-mgny.webp"
 61 |                     alt="">
 62 |                 <video autoplay loop muted
 63 |                     src="https://d33wubrfki0l68.cloudfront.net/a13ea7c2ca2f38134748966280e54af4340ce821/f976d/assets/home/projects_madegood-reduced.mp4"></video>
 64 |             </div>
 65 |         </div>
 66 |         <div class="page4">
 67 |             <div class="elem">
 68 |                 <img src="https://d33wubrfki0l68.cloudfront.net/3401770635e95968e300d88f8b9479ecbc008eeb/be2e5/assets/home/home-experience-1.webp"
 69 |                     alt="">
 70 |                 <div class="text-div">
 71 |                     <h1>Strategy</h1>
 72 |                     <h1>Strategy</h1>
 73 |                 </div>
 74 |                 <img src="https://d33wubrfki0l68.cloudfront.net/188bb09da2a445d08ac5b4f706711772e50e8a17/e100a/assets/home/home-experience-2.webp"
 75 |                     alt="">
 76 |             </div>
 77 |             <div class="elem">
 78 |                 <img src="https://d33wubrfki0l68.cloudfront.net/3401770635e95968e300d88f8b9479ecbc008eeb/be2e5/assets/home/home-experience-1.webp"
 79 |                     alt="">
 80 |                 <div class="text-div">
 81 |                     <h1>Strategy</h1>
 82 |                     <h1>Strategy</h1>
 83 |                 </div>
 84 |                 <img src="https://d33wubrfki0l68.cloudfront.net/188bb09da2a445d08ac5b4f706711772e50e8a17/e100a/assets/home/home-experience-2.webp"
 85 |                     alt="">
 86 |             </div>
 87 |             <div class="elem">
 88 |                 <img src="https://d33wubrfki0l68.cloudfront.net/3401770635e95968e300d88f8b9479ecbc008eeb/be2e5/assets/home/home-experience-1.webp"
 89 |                     alt="">
 90 |                 <div class="text-div">
 91 |                     <h1>Strategy</h1>
 92 |                     <h1>Strategy</h1>
 93 |                 </div>
 94 |                 <img src="https://d33wubrfki0l68.cloudfront.net/188bb09da2a445d08ac5b4f706711772e50e8a17/e100a/assets/home/home-experience-2.webp"
 95 |                     alt="">
 96 |             </div>
 97 | 
 98 |         </div>
 99 |         <div class="page5">
100 |             <h2>Mentions Clients</h2>
101 |             <div class="box"
102 |                 data-image="https://images.unsplash.com/photo-1688362809005-e1d27bf427ac?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDd8Ym84alFLVGFFMFl8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60">
103 |                 <h3>Verizon</h3>
104 |                 <h4>2021</h4>
105 |             </div>
106 |             <div class="box"
107 |                 data-image="https://images.unsplash.com/photo-1688232543149-5602b136ba11?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDExfGJvOGpRS1RhRTBZfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60">
108 |                 <h3>Verizon</h3>
109 |                 <h4>2021</h4>
110 |             </div>
111 |             <div class="box"
112 |                 data-image="https://images.unsplash.com/photo-1688103920333-117afda88518?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDMwfGJvOGpRS1RhRTBZfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60">
113 |                 <h3>Verizon</h3>
114 |                 <h4>2021</h4>
115 |             </div>
116 |             <div class="box"
117 |                 data-image="https://images.unsplash.com/photo-1687913161653-7cddb0ba09b0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80">
118 |                 <h3>Verizon</h3>
119 |                 <h4>2021</h4>
120 |             </div>
121 |             <div class="box"
122 |                 data-image="https://images.unsplash.com/photo-1686904423955-b928225c6488?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDg1fGJvOGpRS1RhRTBZfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=500&q=60">
123 |                 <h3>Verizon</h3>
124 |                 <h4>2021</h4>
125 |             </div>
126 |         </div>
127 |         <footer>
128 | 
129 |         </footer>
130 |     </div>
131 | 
132 |     <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.js"></script>
133 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"
134 |         integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug=="
135 |         crossorigin="anonymous" referrerpolicy="no-referrer"></script>
136 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"
137 |         integrity="sha512-Ic9xkERjyZ1xgJ5svx3y0u3xrvfT/uPkV99LBwe68xjy/mGtO+4eURHZBW2xW4SZbFrF1Tf090XqB+EVgXnVjw=="
138 |         crossorigin="anonymous" referrerpolicy="no-referrer"></script>
139 |     <script src="script.js"></script>
140 | </body>
141 | 
142 | </html>


--------------------------------------------------------------------------------