Author: | Paul Yabsley |
---|---|
Views Total: | 1,857 views |
Official Page: | Go to website |
Last Update: | August 19, 2022 |
License: | MIT |
Preview:

Description:
A tiny JavaScript snippet that pins and zooms images while scrolling. Based on the GSAP Animation library and its ScrollTrigger plugin.
How to use it:
1. Add your images to the pinned-image container.
<div class="pinned-image"> <div class="pinned-image__container"> <img src='1.jpg' alt='Image 1'> <div class="pinned-image__container-overlay"></div> </div> <div class="pinned-image__overlay"></div> </div> <div class="pinned-image"> <div class="pinned-image__container"> <img src='2.jpg' alt='Image 2'> <div class="pinned-image__container-overlay"></div> </div> <div class="pinned-image__overlay"></div> </div> ...
2. The necessary CSS styles for the pinned image.
.pinned-image { color: white; display: flex; height: 100vh; justify-content: center; position: relative; overflow: hidden; } .pinned-image__container { padding-top: 58%; position: relative; transform: scale(0.75); width: 100%; } .pinned-image__container-overlay { background: rgba(0, 0, 0, 0.6); bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .pinned-image__container-overlay--gradient { background: rgba(206, 112, 222, 0.7); background: linear-gradient(90deg, #ce70de 0%, rgba(255, 98, 141, 0.7) 100%); } .pinned-image__container img { height: 100%; left: 0; object-fit: cover; object-position: center; position: absolute; top: 0; width: 100%; }
3. Load the necessary GSAP library in the document.
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script> <script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
4. The main JavaScript to activate the image pin & zoom animations.
const pinnedImages = document.querySelectorAll('.pinned-image'); pinnedImages.forEach(pinnedImage => { const container = pinnedImage.querySelector('.pinned-image__container'); const image = container.querySelector('img'); const overlay = container.querySelector('.pinned-image__container-overlay'); const tl = gsap.timeline({paused: true}); tl.to(container, { scale: 1.1, }, 0); tl.from(overlay, { autoAlpha: 0, }, 0); const trigger = ScrollTrigger.create({ animation: tl, trigger: pinnedImage, start: "top top", markers: false, pin: true, scrub: true, }); });