<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<style>
:root {
font-size: 16px;
}
@media (max-width: 500px) {
:root {
font-size: 14px;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::-moz-selection {
background: #87cd33;
color: white;
}
::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, 30vw, 800px);
padding-right: 1rem;
}
header {
height: 100vh;
}
footer {
height: 50vh;
}
:-webkit-any-link {
color: #4e9815;
}
:-moz-any-link {
color: #4e9815;
}
: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;
will-change: transform;
}
.demo-gallery:not(.last) {
padding-bottom: 1rem;
}
.demo-text .text {
font-size: clamp(8rem, 15vw, 16rem);
line-height: 1;
font-weight: 900;
}
</style>
</head>
<body>
<div class="demo-wrapper">
<header class="df aic jcc">
<div>
<h1>ScrollTrigger</h1>
<h2>demo</h2>
</div>
</header>
<section class="demo-text">
<div class="wrapper text">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
</section>
<section class="demo-gallery">
<ul class="wrapper">
<li>
<img
height="317"
src="https://source.unsplash.com/random/450x317?sig=128"
width="450"
/>
</li>
<li>
<img
height="317"
src="https://source.unsplash.com/random/450x317?sig=10"
width="450"
/>
</li>
<li>
<img
height="317"
src="https://source.unsplash.com/random/450x317?sig=91"
width="450"
/>
</li>
</ul>
</section>
<section class="demo-gallery">
<ul class="wrapper">
<li>
<img
height="317"
src="https://source.unsplash.com/random/450x317?sig=12"
width="450"
/>
</li>
<li>
<img
height="317"
src="https://source.unsplash.com/random/450x317?sig=20"
width="450"
/>
</li>
<li>
<img
height="317"
src="https://source.unsplash.com/random/450x317?sig=145"
width="450"
/>
</li>
<li>
<img
height="317"
src="https://source.unsplash.com/random/450x317?sig=22"
width="450"
/>
</li>
</ul>
</section>
<section class="demo-gallery">
<ul class="wrapper">
<li>
<img
height="317"
src="https://source.unsplash.com/random/450x317?sig=61"
width="450"
/>
</li>
<li>
<img
height="317"
src="https://source.unsplash.com/random/450x317?sig=70"
width="450"
/>
</li>
<li>
<img
height="317"
src="https://source.unsplash.com/random/450x317?sig=112"
width="450"
/>
</li>
</ul>
</section>
<section class="demo-gallery">
<ul class="wrapper">
<li>
<img
height="317"
src="https://source.unsplash.com/random/450x317?sig=88"
width="450"
/>
</li>
<li>
<img
height="317"
src="https://source.unsplash.com/random/450x317?sig=35"
width="450"
/>
</li>
<li>
<img
height="317"
src="https://source.unsplash.com/random/450x317?sig=92"
width="450"
/>
</li>
</ul>
</section>
<section class="demo-text">
<div class="wrapper text">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>
</section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js" integrity="sha512-A2+khatRDWHUE2VUtN4xUTkr1nc4YfDBw9Sg3ea6x0aRPfpcYieDZji4D2edDHy/yF5NsYzP7kL8sSM8s5EqCw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(){
gsap.registerPlugin(ScrollTrigger);
const images = gsap.utils.toArray("img");
const showDemo = () => {
document.body.style.overflow = "auto";
document.scrollingElement.scrollTo(0, 0);
gsap.utils.toArray("section").forEach((section, index) => {
const wrapperEl = section.querySelector(".wrapper");
const [x, xEnd] =
index % 2
? ["100%", (wrapperEl.scrollWidth - section.offsetWidth) * -1]
: [wrapperEl.scrollWidth * -1, 0];
gsap.fromTo(
wrapperEl,
{ x },
{
x: xEnd,
scrollTrigger: {
trigger: section,
scrub: 0.5,
},
}
);
// TweenMax.to(wrapperEl, 0.1, {y:"+=20", yoyo:true, repeat:1, scrollTrigger: {
// trigger: section,
// // scrub: true,
// }});
// TweenMax.to(wrapperEl, 0.1, {y:"-=20", yoyo:true, repeat:1, scrollTrigger: {
// trigger: section,
// // scrub: true,
// }});
});
};
imagesLoaded(images).on("always", showDemo);
});
function scrollEvent() {
gsap.utils.toArray("section").forEach((section, index) => {
const wrapperEl = section.querySelector(".wrapper");
// const wiggleTween = TweenLite.to(box, 0.5, {
// x: 5,
// ease: "myWiggle",
// paused: true
// });
TweenMax.to(wrapperEl, 0.1, {y:"+=20", yoyo:true, repeat:1, scrollTrigger: {
trigger: section,
// scrub: true,
}});
TweenMax.to(wrapperEl, 0.1, {y:"-=20", yoyo:true, repeat:1, scrollTrigger: {
trigger: section,
// scrub: true,
}});
});
// wiggleTween.restart();
}
window.removeEventListener('scroll', scrollEvent);
window.addEventListener('scroll',scrollEvent);
// https://dev.to/ksbisht941/horizontal-scrolling-animation-using-gsap-and-scrolltrigger-n3f
// https://greensock.com/forums/topic/10721-shake-animation/
</script>
</body>
</html>