Youtube Tutorial - https://www.youtube.com/watch?v=gfnG_mVE6lM&t=13s
A Pen by BobiFreskutBobiSelvisBobiSolidUjku on CodePen.
Created
January 4, 2021 11:19
-
-
Save BobiFreskutBobiSelvisBobiSolidUjku/0600f56703cbd4848197e5f619e78d72 to your computer and use it in GitHub Desktop.
GSAP ANIMATION PIZZA LANDING PAGE
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width" , initial-scale=1.0> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <Title>Sandip Dust 2020</Title> | |
| <link rel="stylesheet" type="text/css" href="style/style.css"> | |
| <script src="minified/gsap.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js" | |
| integrity="sha256-CkQcTxuQyZLqzqWqntH3FDxeDKMV0m7cw0aM5eph4Do=" crossorigin="anonymous"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.min.js"></script> | |
| </head> | |
| <body> | |
| <section class="first-section"> | |
| <h1>Make a Pizza by Scrolling with <br />Animation</h1> | |
| <div class="images-wrapper"> | |
| <img class="section_1_bg" src="https://www.dropbox.com/s/ricsb7ra8cyr9or/section_1_bg.webp?raw=1" /> | |
| <div class="ingredient-images"> | |
| <img class="section_1_01" src="https://www.dropbox.com/s/atuvpzvo59wxeef/section_1_01.webp?raw=1" /> | |
| <img class="section_1_02" src="https://www.dropbox.com/s/7mvrx106israo1z/section_1_02.webp?raw=1" /> | |
| <img class="section_1_03" src="https://www.dropbox.com/s/oewc2bioujvzlp7/section_1_03.webp?raw=1" /> | |
| <img class="section_1_04" src="https://www.dropbox.com/s/bxezwiwtnkx1cw0/section_1_04.webp?raw=1" /> | |
| <img class="section_1_05" src="https://www.dropbox.com/s/bftnm0v5j33uv9c/section_1_05.webp?raw=1" /> | |
| <img class="section_1_06" src="https://www.dropbox.com/s/hz9jbiak3laqrqp/section_1_06.webp?raw=1" /> | |
| <img class="section_1_07" src="https://www.dropbox.com/s/jdlxt8xxdrquh9a/section_1_07.webp?raw=1" /> | |
| <img class="section_1_08" src="https://www.dropbox.com/s/s41b0ualql6b74d/section_1_08.webp?raw=1" /> | |
| <img class="section_1_09" src="https://www.dropbox.com/s/luxhm5e7e57t7ac/section_1_09.webp?raw=1" /> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="second-section"> | |
| <h1>Draw Attention to the Ingredients You Want the Most</h1> | |
| <p>A great pizza is impossible to ignore.</p> | |
| <div class="images-wrapper bottom"> | |
| <div class="image-container"> | |
| <img class="section_2_06" src="https://www.dropbox.com/s/kb9fxs2l7y7obvp/section_2_06.webp?raw=1" /> | |
| </div> | |
| <div class="image-container"> | |
| <img class="section_2_07" src="https://www.dropbox.com/s/ebywdet3cjr0670/section_2_07.webp?raw=1" /> | |
| </div> | |
| <div class="image-container"> | |
| <img class="section_2_08" src="https://www.dropbox.com/s/slm1nqwrsuv34x8/section_2_08.webp?raw=1" /> | |
| </div> | |
| <div class="image-container"> | |
| <img class="section_2_09" src="https://www.dropbox.com/s/kywqj06sz972r7g/section_2_09.webp?raw=1" /> | |
| </div> | |
| <div class="image-container"> | |
| <img class="section_2_10" src="https://www.dropbox.com/s/0msebcd4otsahqe/section_2_10.webp?raw=1" /> | |
| </div> | |
| </div> | |
| <div class="images-wrapper top"> | |
| <div class="image-container"> | |
| <img class="section_2_01" src="https://www.dropbox.com/s/fbdaroubtk7ctb2/section_2_01.webp?raw=1" /> | |
| </div> | |
| <div class="image-container"> | |
| <img class="section_2_02" src="https://www.dropbox.com/s/4724yf637hh0z1t/section_2_02.webp?raw=1" /> | |
| </div> | |
| <div class="image-container"> | |
| <img class="section_2_03" src="https://www.dropbox.com/s/5iquebsptt1gf4m/section_2_03.webp?raw=1" /> | |
| </div> | |
| <div class="image-container"> | |
| <img class="section_2_04" src="https://www.dropbox.com/s/49ebf38ycede0yb/section_2_04.webp?raw=1" /> | |
| </div> | |
| <div class="image-container"> | |
| <img class="section_2_05" src="https://www.dropbox.com/s/7th16qwis8v1vnq/section_2_05.webp?raw=1" /> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="third-section"> | |
| <h1>Add Anything You Want</h1> | |
| <p>Easily add animation to cheese, black olives, herbs & more.</p> | |
| <div class="images-wrapper"> | |
| <img class="section_3_06" src="https://www.dropbox.com/s/cggf61ebt5glkdm/section_3_06.webp?raw=1" /> | |
| <img class="section_3_05" src="https://www.dropbox.com/s/y9v16yvcpcogt5h/section_3_05.webp?raw=1" /> | |
| <img class="section_3_04" src="https://www.dropbox.com/s/epb4iwra19fc7np/section_3_04.webp?raw=1" /> | |
| <img class="section_3_03" src="https://www.dropbox.com/s/bcuykp1rf8c672f/section_3_03.webp?raw=1" /> | |
| <img class="section_3_02" src="https://www.dropbox.com/s/rhkmo56qrrjsnwn/section_3_02.webp?raw=1" /> | |
| <img class="section_3_01" src="https://www.dropbox.com/s/7f6qkl52a6jiy08/section_3_01.webp?raw=1" /> | |
| </div> | |
| </section> | |
| <section class="forth-section"> | |
| <h1>14 Types of Pizzas</h1> | |
| <p>With so many different ingredients and add-ons, the possibilities are endless.</p> | |
| <div class="images-wrapper"> | |
| <img class="section_4_01" src="https://www.dropbox.com/s/4lpyq61t3e84qrt/section_4_01.webp?raw=1" /> | |
| <img class="section_4_02" src="https://www.dropbox.com/s/vck70ruuqtwzqlc/section_4_02.webp?raw=1" /> | |
| <img class="section_4_03" src="https://www.dropbox.com/s/xbn1u3ij1p01lt3/section_4_03.webp?raw=1" /> | |
| <img class="section_4_04" src="https://www.dropbox.com/s/77se9r4h1nhgekb/section_4_04.webp?raw=1" /> | |
| </div> | |
| </section> | |
| <script src="style/style.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| document.addEventListener('DOMContentLoaded', () => { | |
| let controller = new ScrollMagic.Controller(); | |
| let t1 = gsap.timeline(); | |
| t1.from(".section_1_01", 4, { | |
| y: -100, | |
| x: -150, | |
| ease: Power3.easeInOut | |
| }) | |
| t1.from(".section_1_02", 4, { | |
| y: -150, | |
| x: -250, | |
| ease: Power3.easeInOut | |
| }, '-=4') | |
| .from(".section_1_03", 4, { | |
| y: -80, | |
| x: -100, | |
| ease: Power3.easeInOut | |
| }, '-=4') | |
| .from(".section_1_04", 4, { | |
| y: -100, | |
| x: -150, | |
| ease: Power3.easeInOut | |
| }, '-=4') | |
| .from(".section_1_05", 4, { | |
| y: -80, | |
| x: -200, | |
| ease: Power3.easeInOut | |
| }, '-=4') | |
| .from(".section_1_06", 4, { | |
| y: -100, | |
| x: -350, | |
| ease: Power3.easeInOut | |
| }, '-=4') | |
| .from(".section_1_07", 4, { | |
| y: -50, | |
| x: -150, | |
| ease: Power3.easeInOut | |
| }, '-=4') | |
| .from(".section_1_08", 4, { | |
| y: 50, | |
| x: -350, | |
| ease: Power3.easeInOut | |
| }, '-=4') | |
| .from(".section_1_09", 4, { | |
| y: 100, | |
| x: -200, | |
| ease: Power3.easeInOut | |
| }, '-=4') | |
| let scene = new ScrollMagic.Scene({ | |
| triggerElement: '.first-section', | |
| duration: '100%', | |
| triggerHook: 0, | |
| offset: '300' | |
| }) | |
| .setTween(t1) | |
| .setPin('.first-section') | |
| .addTo(controller); | |
| let t2 = gsap.timeline(); | |
| t2 | |
| .to('.top .image-container', 4, { | |
| height: 0 | |
| }); | |
| let scene2 = new ScrollMagic.Scene({ | |
| triggerElement: '.second-section', | |
| duration: '100%', | |
| triggerHook: 0, | |
| offset: '100' | |
| }) | |
| .setTween(t2) | |
| .setPin('.second-section') | |
| .addTo(controller); | |
| let t3 = gsap.timeline(); | |
| t3 | |
| .to('.section_3_01', 4, { | |
| y: -250, | |
| ease: Power3.easeInOut | |
| }) | |
| .to('.section_3_02', 4, { | |
| y: -200, | |
| ease: Power3.easeInOut | |
| }, '-=4') | |
| .to('.section_3_03', 4, { | |
| y: -100, | |
| ease: Power3.easeInOut | |
| }, '-=4') | |
| .to('.section_3_04', 4, { | |
| y: 0, | |
| ease: Power3.easeInOut | |
| }, '-=4') | |
| .to('.section_3_05', 4, { | |
| y: 150, | |
| ease: Power3.easeInOut | |
| }, '-=4') | |
| .to('.section_3_06', 4, { | |
| y: 250, | |
| ease: Power3.easeInOut | |
| }, '-=4') | |
| let scene3 = new ScrollMagic.Scene({ | |
| triggerElement: '.third-section', | |
| duration: '100%', | |
| triggerHook: 0, | |
| offset: '200' | |
| }) | |
| .setTween(t3) | |
| .setPin('.third-section') | |
| .addTo(controller); | |
| let t4 = gsap.timeline(); | |
| t4 | |
| .to('.section_4_01', 4, { | |
| autoAlpha: 0 | |
| }) | |
| .from('.section_4_02', 4, { | |
| autoAlpha: 0 | |
| }, '-=4') | |
| .from('.section_4_03', 4, { | |
| autoAlpha: 0 | |
| }) | |
| .from('.section_4_04', 4, { | |
| autoAlpha: 0 | |
| }) | |
| let scene4 = new ScrollMagic.Scene({ | |
| triggerElement: '.forth-section', | |
| duration: '100%', | |
| triggerHook: 0, | |
| offset: '200' | |
| }) | |
| .setTween(t4) | |
| .setPin('.forth-section') | |
| .addTo(controller); | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *{ | |
| margin:0; | |
| padding:0; | |
| } | |
| body{ | |
| background-color:#d3eefe; | |
| } | |
| h1{ | |
| font-family:"Franklin Gothic Medium"; | |
| color:#43515c; | |
| font-size:70px; | |
| font-weight:lighter; | |
| letter-spacing: -5px; | |
| padding: 50px 0px 0px 0px; | |
| z-index: 999; | |
| position:absolute; | |
| } | |
| p{ | |
| font-family:"Franklin Gothic Medium"; | |
| color:#43515c; | |
| font-size:24px; | |
| font-weight:100; | |
| z-index: 999; | |
| } | |
| .first-section{ | |
| width:100%; | |
| height:150vh; | |
| display:flex; | |
| align-items: center; | |
| flex-direction: column; | |
| text-align: center; | |
| position: relative; | |
| } | |
| .first-section .images-wrapper { | |
| position:absolute; | |
| } | |
| .ingredient-images{ | |
| position: absolute; | |
| width:400px; | |
| left:calc(50%-400px); | |
| height:530px; | |
| top:420px; | |
| } | |
| .section_1_01{ | |
| position: absolute; | |
| top:20px; | |
| right:-150px; | |
| } | |
| .section_1_02{ | |
| position: absolute; | |
| top:90px; | |
| right:-20px; | |
| } | |
| .section_1_03{ | |
| position: absolute; | |
| top:110px; | |
| right:-150px; | |
| } | |
| .section_1_04{ | |
| position: absolute; | |
| top:210px; | |
| right:-30px; | |
| } | |
| .section_1_05{ | |
| position: absolute; | |
| top:235px; | |
| right:0px; | |
| } | |
| .section_1_06{ | |
| position: absolute; | |
| top:180px; | |
| right:60px; | |
| } | |
| .section_1_07{ | |
| position: absolute; | |
| top:260px; | |
| right:-140px; | |
| } | |
| .section_1_08{ | |
| position: absolute; | |
| top:330px; | |
| right:-40px; | |
| } | |
| .section_1_09{ | |
| position: absolute; | |
| top:380px; | |
| right:-140px; | |
| } | |
| .second-section{ | |
| width:100%; | |
| height:100vh; | |
| display:flex; | |
| align-items:center; | |
| flex-direction:column; | |
| text-align:center; | |
| position:relative; | |
| } | |
| .second-section .images-wrapper{ | |
| position: absolute; | |
| display:flex; | |
| padding:200px 0; | |
| top:20%; | |
| overflow:hidden; | |
| } | |
| .image-container{ | |
| overflow:hidden; | |
| height:100%; | |
| } | |
| .third-section{ | |
| width:100%; | |
| height:150vh; | |
| display:flex; | |
| align-items: center; | |
| flex-direction: column; | |
| text-align:center; | |
| position:relative; | |
| } | |
| .third-section .images-wrapper{ | |
| margin-top:300px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .third-section .images-wrapper img{ | |
| position: absolute; | |
| } | |
| .forth-section{ | |
| width:100%; | |
| height:150vh; | |
| display:flex; | |
| align-items: center; | |
| flex-direction: column; | |
| text-align:center; | |
| position:relative; | |
| } | |
| .forth-section .images-wrapper{ | |
| margin-top:300px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .forth-section .images-wrapper img{ | |
| position: absolute; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment