Skip to content

Instantly share code, notes, and snippets.

@BobiFreskutBobiSelvisBobiSolidUjku

BobiFreskutBobiSelvisBobiSolidUjku/gsap-animation-pizza-landing-page.markdown

Created January 4, 2021 11:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save BobiFreskutBobiSelvisBobiSolidUjku/0600f56703cbd4848197e5f619e78d72 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save BobiFreskutBobiSelvisBobiSolidUjku/0600f56703cbd4848197e5f619e78d72 to your computer and use it in GitHub Desktop.
Download ZIP
GSAP ANIMATION PIZZA LANDING PAGE
Raw
gsap-animation-pizza-landing-page.markdown
Raw
index.html
<!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>
Raw
script.js
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);
})
Raw
style.css
*{
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