Horizontal GSAP pinning with ScrollTrigger
I just created pen in CodePen for my demo. I try with different states but did not work.
I want to add and remove class in middle section like this: https://codepen.io/Designer12/pen/qBryyrp
Demo image:
Solution
Added the onUpdate event, divided the progress (from zero to 1) by the number of elements (panels) and get the active frame:
Better check Codepen answer, snippet have some lags
gsap.registerPlugin(ScrollTrigger);
console.clear()
let container = document.querySelector(".portfolio");
let tl = gsap.timeline({
scrollTrigger: {
pin: true,
scrub: 1,
trigger: container,
end: () => container.scrollWidth - document.documentElement.clientWidth,
onUpdate: ({progress, direction, isActive}) => changeActive(progress)
},
defaults: { ease: "none", duration: 1 }
});
tl.to(".parallax", { x: 300 })
.to(".panel", { x: () => -(container.scrollWidth - document.documentElement.clientWidth) }, 0)
.from(".secondAn", {
opacity: 0,
scale: 0.5,
duration: 0.2,
stagger: {
amount: 0.8
}
}, 0);
gsap.from(".firstAn", {
duration: 1,
opacity: 0,
scale: .5,
scrollTrigger: {
trigger: container,
start: "top 90%",
end: "bottom 10%",
toggleActions: "play none none reverse"
}
});
let elements = document.querySelectorAll('.panel')
let active = NaN;
function changeActive(progress){
let oneElement = 1 / (elements.length - 1)
let activeItem = Math.round(progress.toFixed(3) /oneElement)
if(active != activeItem){
active = activeItem
changeBackground(active)
}
console.log("active ", activeItem)
}
function changeBackground(active){
elements.forEach((e)=>{
e.classList.remove("bg")
})
console.log(active, elements.length)
elements[active].classList.add("bg")
}@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');
*, *:before, *:after {
box-sizing: border-box;
position: relative;
letter-spacing: 0.04em;
}
body {
font-family: 'Montserrat', sans-serif;
background-color: #FEFEFE;
overflow-x: hidden;
}
.spacer {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
h1 {
font-size: 3rem;
color: #000;
}
.section {
height: auto;
width: 100%;
position: relative;
padding: 0;
overflow-x: hidden;
}
.portfolio {
width: 100%;
height: 100vh;
display: flex;
flex-wrap: nowrap;
background-color: #1F242D;
overflow: hidden;
}
.portfolio_title {
position: absolute;
top: 0;
left: -15rem;
font-size: 24rem;
letter-spacing: 0;
-webkit-text-stroke-color: #343A42;
display: inline-block;
}
.text-stroke {
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #343A42;
}
.grid {
display: flex;
flex-wrap: wrap;
align-items: center;
aling-content: center;
justify-content: center;
overflow: hidden;
}
.panel {
display: flex;
flex: 0 0 50%;
flex-wrap: wrap;
align-items: center;
align-content: center;
justify-content: center;
height: 100%;
padding: 10rem 7rem 2rem 7rem;
background-color: transparent;
overflow: hidden;
}
.panel_item {
height: 100%;
width: 100%;
margin: 0 auto;
}
.panel_img {
width: 100%;
height: 100%;
margin: 0 auto;
}
.bg{
background-color: red;
}<body>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js?r=5426'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js'></script>
<!-- partial:index.partial.html -->
<div class="spacer">
<h1>Scroll Down</h1>
</div>
<section class="section portfolio">
<div class="panel">
<div class="panel_item">
<div class="panel_item_content">
<div class="panel_item_circle"></div>
<h1>Dedicated Web Development</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna ali</p>
</div>
</div>
</div>
<div class="panel">
<div class="panel_item">
<div class="panel_item_content">
<div class="panel_item_circle"></div>
<h1>Dedicated Web Development</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna ali</p>
</div>
</div>
</div>
<div class="panel">
<div class="panel_item">
<div class="panel_item_content">
<div class="panel_item_circle"></div>
<h1>Dedicated Web Development</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna ali</p>
</div>
</div>
</div>
<div class="panel">
<div class="panel_item">
<div class="panel_item_content">
<div class="panel_item_circle"></div>
<h1>Dedicated Web Development</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna ali</p>
</div>
</div>
</div>
<div class="panel">
<div class="panel_item">
<div class="panel_item_content">
<div class="panel_item_circle"></div>
<h1>Dedicated Web Development</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna ali</p>
</div>
</div>
</div>
<div class="panel">
<div class="panel_item">
<div class="panel_item_content">
<div class="panel_item_circle"></div>
<h1>Dedicated Web Development</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna ali</p>
</div>
</div>
</div>
<div class="panel">
<div class="panel_item">
<div class="panel_item_content">
<div class="panel_item_circle"></div>
<h1>Dedicated Web Development</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna ali</p>
</div>
</div>
</div>
<div class="panel">
<div class="panel_item">
<div class="panel_item_content">
<div class="panel_item_circle"></div>
<h1>Dedicated Web Development</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna ali</p>
</div>
</div>
</div>
</section>
<div class="spacer">
<h1>The End</h1>
</div>
</body>- Clear clipboard to prohibit unauthorised copying, insert message?
- Can you render a html file into a container?
- how to position two elements left and right
- Debounce in ReactJS
- Angular - Why isn't my dropdown list working
- Is [h6 aria-level="7"] a reliable way to create a [h7] element?
- There was an error during the transport or processing of this request. Error code = 10, Path = /wardeninit
- How can I prevent address bar from hiding in mobile browsers?
- How do you limit the number of options selected in an HTML <select> element?
- Is there an option on the IFrame element to load it before the dom page loaded event?
- Changing Font Color in HTML Email for AOL Mail
- TypeError: 'Locator' object is not callable using .first() in Playwright
- is form enctype "application/json" available?
- QTextBrowser not processing CSS properly
- Cannot remove bootstrap button border
- Unable to center navbar properly
- Popover on input field
- How to hide an element and all its children from screen readers?
- Force a line break in a URL
- Select text in ::before or ::after pseudo-element
- Trying to size div as percentages of the entire page
- Remove all style attributes from HTML in PHP
- Tooltips for mobile browsers
- How to open Windows Explorer via link
- Method 'POST' is not supported - Spring
- Monitor an images folder to get a live local html/javascript gallery
- Is call to preventDefault() really necessary on drop event?
- Use rvest to scrape all p after h? (or other R package)
- How to position two elements side by side using CSS
- Data not getting into the database