Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
GSAP ScrollTrigger - Demo
- w = 1240
- h = 874
.loader.df.aic.jcc
%div
%h1 Loading
%h2.loader--text 0%
.demo-wrapper
%header.df.aic.jcc
%div
%h1 ScrollTrigger
%h2 demo
%section.demo-text
.wrapper.text
ABCDEFGHIJKLMNOPQRSTUVWXYZ
- (1..4).each do |i|
%section.demo-gallery
%ul.wrapper
- (1..rand(3..4)).each do |i|
%li
%img{:src=>"https://source.unsplash.com/random/#{w}x#{h}?sig=#{rand(0..206)}", :width => w, :height => h}
%section.demo-text
.wrapper.text
ABCDEFGHIJKLMNOPQRSTUVWXYZ
%footer.df.aic.jcc
%p Images from <a href="https://unsplash.com/">Unsplash</a>
gsap.registerPlugin(ScrollTrigger);
const images = gsap.utils.toArray('img');
const loader = document.querySelector('.loader--text');
const updateProgress = (instance) =>
loader.textContent = `${Math.round(instance.progressedCount * 100 / images.length)}%`;
const showDemo = () => {
document.body.style.overflow = 'auto';
document.scrollingElement.scrollTo(0, 0);
gsap.to(document.querySelector('.loader'), { autoAlpha: 0 });
gsap.utils.toArray('section').forEach((section, index) => {
const w = section.querySelector('.wrapper');
const [x, xEnd] = (index % 2) ? ['100%', (w.scrollWidth - section.offsetWidth) * -1] : [w.scrollWidth * -1, 0];
gsap.fromTo(w, { x }, {
x: xEnd,
scrollTrigger: {
trigger: section,
scrub: 0.5
}
});
});
}
imagesLoaded(images).on('progress', updateProgress).on('always', showDemo);
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js"></script>
:root { font-size: 16px }
@media (max-width: 500px) { :root { font-size: 14px } }
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::selection {
background: #87cd33;
color: white;
}
body {
overflow: hidden;
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
}
h1 { font-size: 5rem }
h2 { font-size: 2rem }
img {
width: 100%;
height: auto;
background: #f0f0f0;
}
ul {
padding-left: 1rem;
list-style: none;
}
li {
flex-shrink: 0;
width: clamp(500px, 60vw, 800px);
padding-right: 1rem;
}
header {height: 100vh}
footer {height: 50vh}
:any-link { color: #4e9815; }
.df {display: flex}
.aic {align-items: center}
.jcc {justify-content: center}
.loader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: black;
color: white;
}
.demo-wrapper {
overflow-x: hidden;
}
.wrapper {
display: flex;
}
.demo-gallery:not(.last) {
padding-bottom: 1rem;
}
.demo-text .text {
font-size: clamp(8rem, 15vw, 16rem);
line-height: 1;
font-weight: 900;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment