GSAP Horizontall Scroll in Webflow
Hi, I have a question. It's about the Portfolio section. I have written GSAP code for horizontal scrolling of Projects from Collection CMS. Seemingly everything works, but when I shrink the browser window then there is a wrong width calculation. I have to refresh the window and then it is ok. Maybe someone has done something similar?
link:
https://jamel-portfolio.webflow.io/
<script>
gsap.registerPlugin(ScrollTrigger);
let portfolioScrollTrigger = null;
function updatePortfolioWidth() {
const viewportWidth = window.innerWidth;
if (viewportWidth < 992) {
return;
}
const portfolioItems = document.querySelectorAll('.portfolio_cms_item');
let itemWidth = viewportWidth * 0.9;
const totalWidth = itemWidth * portfolioItems.length;
document.querySelector('.portfolio_cms_list').style.width =
updateScrollAnimation(totalWidth);
}
function updateScrollAnimation(totalWidth) {
if (window.innerWidth < 992) {
return;
}
if (portfolioScrollTrigger && typeof portfolioScrollTrigger.disable === 'function') {
portfolioScrollTrigger.disable();
portfolioScrollTrigger.kill();
portfolioScrollTrigger = null;
}
const viewportWidth = window.innerWidth;
const endX = totalWidth - viewportWidth;
portfolioScrollTrigger = gsap.to('.portfolio_cms_list', {
x: () => -endX + "px",
ease: "none",
scrollTrigger: {
trigger: '.portfolio_height',
start: 'top top',
end: () =>
pin: true,
scrub: 1,
invalidateOnRefresh: true,
anticipatePin: 1
}
});
}
window.addEventListener('load', updatePortfolioWidth);
window.addEventListener('resize', updatePortfolioWidth);
window.addEventListener('orientationchange', updatePortfolioWidth);
</script>
link:
https://jamel-portfolio.webflow.io/
<script>
gsap.registerPlugin(ScrollTrigger);
let portfolioScrollTrigger = null;
function updatePortfolioWidth() {
const viewportWidth = window.innerWidth;
if (viewportWidth < 992) {
return;
}
const portfolioItems = document.querySelectorAll('.portfolio_cms_item');
let itemWidth = viewportWidth * 0.9;
const totalWidth = itemWidth * portfolioItems.length;
document.querySelector('.portfolio_cms_list').style.width =
${totalWidth}pxupdateScrollAnimation(totalWidth);
}
function updateScrollAnimation(totalWidth) {
if (window.innerWidth < 992) {
return;
}
if (portfolioScrollTrigger && typeof portfolioScrollTrigger.disable === 'function') {
portfolioScrollTrigger.disable();
portfolioScrollTrigger.kill();
portfolioScrollTrigger = null;
}
const viewportWidth = window.innerWidth;
const endX = totalWidth - viewportWidth;
portfolioScrollTrigger = gsap.to('.portfolio_cms_list', {
x: () => -endX + "px",
ease: "none",
scrollTrigger: {
trigger: '.portfolio_height',
start: 'top top',
end: () =>
+=${endX}pin: true,
scrub: 1,
invalidateOnRefresh: true,
anticipatePin: 1
}
});
}
window.addEventListener('load', updatePortfolioWidth);
window.addEventListener('resize', updatePortfolioWidth);
window.addEventListener('orientationchange', updatePortfolioWidth);
</script>
Place website meta description here
