<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - horizontal scroll to Left and Right</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.0/css/bulma.min.css'>
<style>
@import url('https://fonts.googleapis.com/css?family=Signika+Negative:300,400&display=swap');
body {
font-family: "Signika Negative", sans-serif;
font-weight: 300;
}
.wrapper {
width: 100vw;
height: 100px;
position: relative;
margin: auto;
background: #ccc;
overflow: hidden;
}
.cards-container {
position: relative;
}
.cards-container-right{
position: absolute;
top: 50%;
width: 100%;
transform: translateY(-50%);
}
.card-project {
width: 25vw;
height: 50px;
position: absolute;
top: 0;
left: 0;
font-size: 25px;
line-height: 50px;
text-align: center;
}
.card-project:nth-child(4n) {
background-color: blue;
}
.card-project:nth-child(4n + 1) {
background-color: teal;
}
.card-project:nth-child(4n + 2) {
background-color: green;
}
.card-project:nth-child(4n + 3) {
background-color: yellow;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
</head>
<body translate="no">
<div class="wrapper">
<div class="cards-container cards-container-left">
<div class="card-project card-project-left">
to Left First column
</div>
<div class="card-project card-project-left">
to Left Second column
</div>
<div class="card-project card-project-left">
to Left Third column
</div>
<div class="card-project card-project-left">
to Left Fourth column
</div>
</div>
<div class="cards-container cards-container-right">
<div class="card-project card-project-right">
to Right First column
</div>
<div class="card-project card-project-right">
to Right Second column
</div>
<div class="card-project card-project-right">
to Right Third column
</div>
<div class="card-project card-project-right">
to Right Fourth column
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/CSSRulePlugin.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomBounce3.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase3.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomWiggle3.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/Draggable.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/EaselPlugin.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/EasePack.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools3.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/InertiaPlugin.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathHelper.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/MotionPathPlugin.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Physics2DPlugin3.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/PhysicsPropsPlugin3.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/PixiPlugin.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrambleTextPlugin3.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/ScrollToPlugin.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/ScrollTrigger.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText3.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/TextPlugin.min.js'></script>
<script id="rendered-js" >
// Get the DOM references
const cardsContainerLeft = document.querySelector(".cards-container-left");
const cardsContainerRight = document.querySelector(".cards-container-right");
// Duplicate the cards (for wrapping purposes)
cardsContainerLeft.innerHTML += cardsContainerLeft.innerHTML;
cardsContainerRight.innerHTML += cardsContainerRight.innerHTML;
// Get the DOM references
const cardsLeft = gsap.utils.toArray(".card-project-left");
const cardsRight = gsap.utils.toArray(".card-project-right");
// animation duration
const duration = 20;
// Function to set the animation values
function setAnimValues() {
// Get the correct width
const cardWidth = innerWidth / (cardsLeft.length / 2);
// Set the default position
cardsLeft.forEach((card, i) =>
gsap.set(card, {
x: () => i * cardWidth,
overwrite: "auto" }));
// Animate the cards
gsap.to(cardsLeft, {
duration: duration,
ease: "none",
x: `-=${innerWidth}`, // Change to -=${innerWidth} to move right to left
repeat: -1,
// Wrap the cards when appropriate
modifiers: {
x: gsap.utils.unitize(gsap.utils.wrap(-cardWidth, innerWidth * 2 - cardWidth), "px") } });
// Set the default position
cardsRight.forEach((card, i) =>
gsap.set(card, {
x: () => i * cardWidth,
overwrite: "auto" }));
// Animate the cards
gsap.to(cardsRight, {
duration: 10,
ease: "none",
x: `+=${innerWidth}`,
repeat: -1,
// Wrap the cards when appropriate
modifiers: {
x: gsap.utils.unitize(gsap.utils.wrap(-cardWidth, innerWidth * 2 - cardWidth), "px") } });
}
// Make sure it works on resize
window.addEventListener("resize", setAnimValues);
// Set the animation values initially
setAnimValues();
//# sourceURL=pen.js
</script>
</body>
</html>