Skip to content

Instantly share code, notes, and snippets.

@jacmaes
Created November 19, 2024 11:01
Show Gist options
  • Save jacmaes/9fca4671ac0367ad75899eee3ac7e86a to your computer and use it in GitHub Desktop.
Save jacmaes/9fca4671ac0367ad75899eee3ac7e86a to your computer and use it in GitHub Desktop.
Image parallax effect [GSAP]
<section>
<div class="img">
<div class="img-container">
<img src="https://images.unsplash.com/photo-1498598457418-36ef20772bb9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" />
</div>
</div>
</section>
<section>
<div class="img">
<div class="img-container">
<img src="https://images.unsplash.com/photo-1535916707207-35f97e715e1c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" />
</div>
</div>
</section>
<section>
<div class="img">
<div class="img-container">
<img src="https://images.unsplash.com/photo-1500964757637-c85e8a162699?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" />
</div>
</div>
</section>
gsap.registerPlugin(ScrollTrigger);
const lenis = new Lenis({
lerp: 0.07
});
lenis.on('scroll', ScrollTrigger.update);
gsap.ticker.add((time)=>{
lenis.raf(time * 1000)
})
// Images parallax
gsap.utils.toArray('.img-container').forEach(container => {
const img = container.querySelector('img');
const tl = gsap.timeline({
scrollTrigger: {
trigger: container,
scrub: true,
pin: false,
}
});
tl.fromTo(img, {
yPercent: -20,
ease: 'none'
}, {
yPercent: 20,
ease: 'none'
});
});
<script src="https://cdn.jsdelivr.net/gh/studio-freight/[email protected]/bundled/lenis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>
* {
box-sizing: border-box;
}
html {
display: block;
height: auto;
min-height: 100%;
width: 100%;
}
body {
display: block;
margin: 0;
padding: 0;
min-height: 100vh;
overflow: hidden;
background-color: #171717;
}
// Smooth scroll
.lenis {
&.lenis-smooth {
scroll-behavior: auto;
[data-lenis-prevent] {
overscroll-behavior: contain;
}
}
&.lenis-stopped {
overflow: hidden;
}
&.lenis-scrolling iframe {
pointer-events: none;
}
}
section {
display: flex;
align-items: center;
justify-content: center;
min-height: 100dvh;
.img {
position: relative;
width: min(80vw, 900px);
padding: 10vw;
&-container {
width: 100%;
padding-top: 80%;
position: relative;
overflow: hidden;
border-radius: 32px;
img {
width: auto;
height: 100%;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) scale(1.4);
transform-origin: 50% 50%;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment