<div class="p-10 mb-64">
<p>In this version... <br />Section intros pin, but do not unpin. Extra whitespace is left above them.</p>
</div>
<div id="app">
<main id="dlp-main" aria-label="Main Content">
<article id="agent">
<div class="grid grid-cols-12 gap-x-8 gap-y-16 py-24">
<div class="col-span-5 col-start-2 self-center">
<h2 class="font-bold text-3xl text-gray-900 tracking-wide mb-5 fade-in">Lorem ipsum dolor</h2>
<p class="fade-in">Nunc pretium tellus vitae orci congue aliquam. In molestie varius vestibulum. Aliquam bibendum ultrices nulla. Nulla tortor ante, egestas vel dapibus sit amet, vulputate at leo. Maecenas placerat malesuada lorem quis vestibulum. Cras varius ligula lorem, sit amet vestibulum nunc semper in. Nam interdum nisi nibh, eu dictum risus suscipit ut.</p>
</div>
<div class="col-span-5 col-start-7">
<figure>
<picture class="ar ar--4-3 fade-in scale-img">
<img src="https://images.unsplash.com/photo-1565183928294-7063f23ce0f8?ixid=MXwxMjA3fDB8MHxzZWFyY2h8M3x8a2l0Y2hlbnxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" alt="" />
</picture>
<div class="img__border"></div>
</figure>
</div>
<div class="col-span-5 col-start-2">
<figure>
<picture class="ar ar--4-3 fade-in scale-img">
<img src="https://images.unsplash.com/flagged/photo-1573168710865-2e4c680d921a?ixid=MXwxMjA3fDB8MHxzZWFyY2h8NHx8YmVkcm9vbXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" alt="" />
</picture>
<div class="img__border"></div>
</figure>
</div>
<div class="col-span-5 col-start-7 self-center">
<h2 class="font-bold text-3xl text-gray-900 tracking-wide mb-5 fade-in">Aliquam erat volutpat</h2>
<p class="fade-in">Sed eget dui eu libero dapibus porta sit amet nec quam. Vestibulum aliquet neque vel ipsum efficitur, nec ultrices odio consequat. Etiam est ex, pellentesque vel finibus quis, porttitor non est. Vestibulum eget tellus felis. Fusce vitae augue eget augue rutrum iaculis et quis quam. Vivamus ultricies tortor ac semper vestibulum. Suspendisse varius orci quis mattis luctus.</p>
</div>
</div>
</article>
<article id="company">
<div class="section-intro">
<picture class="intro-image">
<img src="https://images.unsplash.com/photo-1514894780887-121968d00567?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxzZWFyY2h8OTZ8fGhvbWV8ZW58MHwwfDB8&auto=format&fit=crop&w=800&q=60" alt="" />
</picture>
<div class="intro-title">
<hgroup>
<h1 class="accent-below-center">Every Home Has a Story</h1>
<h6>Company Profile</h6>
</hgroup>
</div>
</div>
<div class="grid grid-cols-12 gap-x-8 gap-y-16 py-24">
<div class="col-span-5 col-start-2 self-center">
<h2 class="font-bold text-3xl text-gray-900 tracking-wide mb-5 fade-in">Lorem ipsum dolor</h2>
<p class="fade-in">Nunc pretium tellus vitae orci congue aliquam. In molestie varius vestibulum. Aliquam bibendum ultrices nulla. Nulla tortor ante, egestas vel dapibus sit amet, vulputate at leo. Maecenas placerat malesuada lorem quis vestibulum. Cras varius ligula lorem, sit amet vestibulum nunc semper in. Nam interdum nisi nibh, eu dictum risus suscipit ut.</p>
</div>
<div class="col-span-5 col-start-7">
<figure>
<picture class="ar ar--4-3 fade-in scale-img">
<img src="https://images.unsplash.com/photo-1565183928294-7063f23ce0f8?ixid=MXwxMjA3fDB8MHxzZWFyY2h8M3x8a2l0Y2hlbnxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" alt="" />
</picture>
<div class="img__border"></div>
</figure>
</div>
<div class="col-span-5 col-start-2">
<figure>
<picture class="ar ar--4-3 fade-in scale-img">
<img src="https://images.unsplash.com/flagged/photo-1573168710865-2e4c680d921a?ixid=MXwxMjA3fDB8MHxzZWFyY2h8NHx8YmVkcm9vbXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" alt="" />
</picture>
<div class="img__border"></div>
</figure>
</div>
<div class="col-span-5 col-start-7 self-center">
<h2 class="font-bold text-3xl text-gray-900 tracking-wide mb-5 fade-in">Aliquam erat volutpat</h2>
<p class="fade-in">Sed eget dui eu libero dapibus porta sit amet nec quam. Vestibulum aliquet neque vel ipsum efficitur, nec ultrices odio consequat. Etiam est ex, pellentesque vel finibus quis, porttitor non est. Vestibulum eget tellus felis. Fusce vitae augue eget augue rutrum iaculis et quis quam. Vivamus ultricies tortor ac semper vestibulum. Suspendisse varius orci quis mattis luctus.</p>
</div>
</div>
</article>
<article id="marketing">
<div class="section-intro">
<picture class="intro-image">
<img src="https://images.unsplash.com/photo-1565182999561-18d7dc61c393?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Nnx8bGl2aW5nJTIwcm9vbXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="" />
</picture>
<div class="intro-title">
<hgroup>
<h1 class="accent-below-center">Award-Winning Marketing Materials</h1>
<h6>Marketing</h6>
</hgroup>
</div>
</div>
<div class="grid grid-cols-12 gap-x-8 gap-y-16 py-24">
<div class="col-span-5 col-start-2 self-center">
<h2 class="font-bold text-3xl text-gray-900 tracking-wide mb-5 fade-in">Lorem ipsum dolor</h2>
<p class="fade-in">Nunc pretium tellus vitae orci congue aliquam. In molestie varius vestibulum. Aliquam bibendum ultrices nulla. Nulla tortor ante, egestas vel dapibus sit amet, vulputate at leo. Maecenas placerat malesuada lorem quis vestibulum. Cras varius ligula lorem, sit amet vestibulum nunc semper in. Nam interdum nisi nibh, eu dictum risus suscipit ut.</p>
</div>
<div class="col-span-5 col-start-7">
<figure>
<picture class="ar ar--4-3 fade-in scale-img">
<img src="https://images.unsplash.com/photo-1565183928294-7063f23ce0f8?ixid=MXwxMjA3fDB8MHxzZWFyY2h8M3x8a2l0Y2hlbnxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" alt="" />
</picture>
<div class="img__border"></div>
</figure>
</div>
<div class="col-span-5 col-start-2">
<figure>
<picture class="ar ar--4-3 fade-in scale-img">
<img src="https://images.unsplash.com/flagged/photo-1573168710865-2e4c680d921a?ixid=MXwxMjA3fDB8MHxzZWFyY2h8NHx8YmVkcm9vbXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" alt="" />
</picture>
<div class="img__border"></div>
</figure>
</div>
<div class="col-span-5 col-start-7 self-center">
<h2 class="font-bold text-3xl text-gray-900 tracking-wide mb-5 fade-in">Aliquam erat volutpat</h2>
<p class="fade-in">Sed eget dui eu libero dapibus porta sit amet nec quam. Vestibulum aliquet neque vel ipsum efficitur, nec ultrices odio consequat. Etiam est ex, pellentesque vel finibus quis, porttitor non est. Vestibulum eget tellus felis. Fusce vitae augue eget augue rutrum iaculis et quis quam. Vivamus ultricies tortor ac semper vestibulum. Suspendisse varius orci quis mattis luctus.</p>
</div>
</div>
</article>
<article id="community">
<div class="section-intro">
<picture class="intro-image">
<img src="https://images.unsplash.com/photo-1566512411204-9236bf2761bf?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mjh8fGNoYXJpdHl8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="" />
</picture>
<div class="intro-title">
<hgroup>
<h1 class="accent-below-center">Better Together</h1>
<h6>Community</h6>
</hgroup>
</div>
</div>
<div class="grid grid-cols-12 gap-x-8 gap-y-16 py-24">
<div class="col-span-5 col-start-2 self-center">
<h2 class="font-bold text-3xl text-gray-900 tracking-wide mb-5 fade-in">Lorem ipsum dolor</h2>
<p class="fade-in">Nunc pretium tellus vitae orci congue aliquam. In molestie varius vestibulum. Aliquam bibendum ultrices nulla. Nulla tortor ante, egestas vel dapibus sit amet, vulputate at leo. Maecenas placerat malesuada lorem quis vestibulum. Cras varius ligula lorem, sit amet vestibulum nunc semper in. Nam interdum nisi nibh, eu dictum risus suscipit ut.</p>
</div>
<div class="col-span-5 col-start-7">
<figure>
<picture class="ar ar--4-3 fade-in scale-img">
<img src="https://images.unsplash.com/photo-1565183928294-7063f23ce0f8?ixid=MXwxMjA3fDB8MHxzZWFyY2h8M3x8a2l0Y2hlbnxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" alt="" />
</picture>
<div class="img__border"></div>
</figure>
</div>
<div class="col-span-5 col-start-2">
<figure>
<picture class="ar ar--4-3 fade-in scale-img">
<img src="https://images.unsplash.com/flagged/photo-1573168710865-2e4c680d921a?ixid=MXwxMjA3fDB8MHxzZWFyY2h8NHx8YmVkcm9vbXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" alt="" />
</picture>
<div class="img__border"></div>
</figure>
</div>
<div class="col-span-5 col-start-7 self-center">
<h2 class="font-bold text-3xl text-gray-900 tracking-wide mb-5 fade-in">Aliquam erat volutpat</h2>
<p class="fade-in">Sed eget dui eu libero dapibus porta sit amet nec quam. Vestibulum aliquet neque vel ipsum efficitur, nec ultrices odio consequat. Etiam est ex, pellentesque vel finibus quis, porttitor non est. Vestibulum eget tellus felis. Fusce vitae augue eget augue rutrum iaculis et quis quam. Vivamus ultricies tortor ac semper vestibulum. Suspendisse varius orci quis mattis luctus.</p>
</div>
</div>
</article>
</main>
</div>
/* Variables: breakpoints, colors, fonts */
$bp-md: 768px;
$bp-lg: 1024px;
$transparent: 'transparent';
$white: #FFFFFF;
$black: #000000;
$primary-100: #E7E9EB; /* faint gray */
$primary-200: #DBDDE1; /* light gray */
$primary-500: #888F9C; /* medium gray */
$primary-900: #1B1D1F; /* dark gray */
$secondary-500: #D22630; /* red */
$secondary-900: #1B1D1F; /* dark red */
$neutral-300: #B2B2B2; /* light warm gray */
$neutral-500: #808080; /* warm gray */
$system-focus: #0083CC; /* blue */
$fs-xs: 12px;
$fs-sm: 14px;
$fs-base: 16px;
$fs-lg: 20px;
$fs-xl: 24px;
$fs-2xl: 28px;
$fs-3xl: 34px;
$fs-4xl: 39px;
$fs-5xl: 42px;
$fs-6xl: 60px;
/* Global */
html {
scroll-behavior: smooth;
@media (prefers-reduced-motion) {
scroll-behavior: auto;
}
}
body {
font-family: 'Montserrat', sans-serif;
font-weight: 300;
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
text-transform: uppercase;
line-height: 1.5em;
}
h1, h2, h3, h4 {
letter-spacing: 0.05em;
}
h5, h6 {
font-weight: 500;
letter-spacing: 0.10em;
}
h1 { font-size: $fs-5xl; }
h2 { font-size: $fs-3xl; }
h3 { font-size: $fs-2xl; }
h4 { font-size: $fs-xl; }
h5 { font-size: $fs-lg; }
h6 { font-size: $fs-sm; }
@media (min-width: $bp-lg) {
h1 { font-size: $fs-6xl; }
h2 { font-size: $fs-5xl; }
h3 { font-size: $fs-4xl; }
h4 { font-size: $fs-3xl; }
h5 { font-size: $fs-xl; }
h6 { font-size: $fs-base; }
}
h1 + h5 {
margin-top: 24px;
@media (min-width: $bp-lg) {
margin-top: 32px;
}
}
/* Accents */
.accent-above-left:before,
.accent-above-center:before,
.accent-below-center:after,
.accent-below-center-wide:after {
background-color: $secondary-500;
content: '';
display: block;
height: 2px;
width: 32px;
margin-bottom: 16px;
}
.accent-above-left:before {
margin-left: 0;
margin-right: auto;
}
.accent-above-center:before {
margin-left: auto;
margin-right: auto;
}
h6.accent-above-center:before {
margin: 8px auto;
}
.accent-below-center:after {
margin-top: 16px;
margin-left: auto;
margin-right: auto;
margin-bottom: 24px;
@media (min-width: $bp-lg) {
margin-bottom: 32px;
}
}
h6.accent-below-center:after {
margin: 8px auto;
}
.accent-below-center-wide:after {
width: 64px;
margin-top: 16px;
margin-left: auto;
margin-right: auto;
}
/* Paragraphs */
p {
color: #333;
line-height: 1.5;
}
p + p {
padding-top: 1.5rem;
}
p.scroll {
font-size: $fs-xs;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
}
/* Section */
.section-intro {
width: 100vw;
overflow: hidden;
.intro-image, .intro-title {
position: absolute;
top: 0;
left: 0;
}
.intro-image, .intro-image img {
width: 100%;
height: 100%;
}
.intro-image img {
object-fit: cover;
object-position: center center;
opacity: 1;
}
.intro-title {
margin: 8px;
border: 1px solid $neutral-500;
width: calc(100% - 18px);
height: calc(100% - 18px);
padding: 20px;
@media (min-width: $bp-md) {
margin: 16px;
width: calc(100% - 34px);
height: calc(100% - 34px);
}
@media (min-width: $bp-lg) {
margin: 20px;
width: calc(100% - 42px);
height: calc(100% - 42px);
}
}
}
.section-intro {
background: linear-gradient(to top, black, $primary-900);
height: calc(100vh - 52px);
position: relative;
.intro-title {
display: grid;
align-content: center;
text-align: center;
}
hgroup {
opacity: 0;
transform: translate(0, 50px);
}
h1, h2, h3, h4, h5, h6 {
color: $white;
}
}
/* Aspect ratios */
figure {
position: relative;
}
.ar {
position: relative;
display: block;
height: 0;
overflow: hidden;
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
z-index: 20;
}
}
.ar--1-1 {
padding-top: 100%;
}
.ar--2-3 {
padding-top: calc(3/2 * 100%);
}
.ar--3-2 {
padding-top: calc(2/3 * 100%);
}
.ar--3-4 {
padding-top: calc(4/3 * 100%);
}
.ar--4-3 {
padding-top: calc(3/4 * 100%);
}
.ar--4-5 {
padding-top: calc(5/4 * 100%);
}
.ar--5-4 {
padding-top: calc(4/5 * 100%);
}
.ar--9-16 {
padding-top: calc(16/9 * 100%);
}
.ar--16-9 {
padding-top: calc(9/16 * 100%);
}
.ar--full {
padding-top: 100%;
}
/* Image Border */
.img__border {
position: absolute;
top: 0;
left: 0;
border: 1px solid $white;
margin: 8px;
width: calc(100% - 16px);
height: calc(100% - 16px);
z-index: 30;
@media (min-width: $bp-lg) {
margin: 12px;
width: calc(100% - 24px);
height: calc(100% - 24px);
}
}
// Transitions
img {
object-fit: cover;
object-position: top center;
}
.scale-img img {
transform: scale(1.1);
}
.fade-in {
opacity: 0;
}
View Compiled
console.clear();
gsap.registerPlugin(ScrollTrigger);
// Things to animate
function anim_intros() {
gsap.utils.toArray(".section-intro").forEach((intro, i) => {
var tl_intros = gsap.timeline();
tl_intros.to(intro.querySelectorAll("img"), {
scrollTrigger: {
trigger: intro,
start: "top bottom",
end: "bottom top",
scrub: 1,
once: true
},
scale: 1.3,
ease: ExpoScaleEase.config(1, 1.3)
});
tl_intros.to(intro.querySelectorAll("img"), {
scrollTrigger: {
trigger: intro,
start: "top top",
end: "bottom top",
scrub: 1,
once: true
},
opacity: 0.25
});
tl_intros.to(intro.querySelectorAll("hgroup"), {
scrollTrigger: {
id: "intro_" + i,
trigger: intro,
start: "top top",
end: "bottom top",
scrub: 1,
pin: true,
once: true
},
opacity: 1,
y: 0,
onComplete: st_kill,
onCompleteParams: ["intro_" + i]
});
return tl_intros;
});
}
// Kill a specific scroll trigger
function st_kill(item) {
// ScrollTrigger.getById(item).kill;
console.log(item);
}
function anim_imgs() {
gsap.utils.toArray(".scale-img img").forEach(item => {
var tl_imgs = gsap.timeline({
scrollTrigger: {
trigger: item,
start: "top 80%",
end: "top center",
scrub: 1,
once: true
}
}).to(item, {
scale: 1,
ease: ExpoScaleEase.config(1.1, 1)
});
return tl_imgs;
});
}
function anim_fades() {
gsap.utils.toArray(".fade-in").forEach(item => {
var tl_fades = gsap.timeline({
scrollTrigger: {
trigger: item,
start: "top 90%",
end: "top center",
scrub: 1,
once: true
}
}).to(item, { opacity: 1 });
return tl_fades;
});
}
// Add animations to a master timeline
const tl_master = gsap.timeline();
tl_master.add( anim_intros() );
tl_master.add( anim_imgs() );
tl_master.add( anim_fades() );
