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 =
${totalWidth}px;
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: () => +=${endX},
pin: true,
scrub: 1,
invalidateOnRefresh: true,
anticipatePin: 1
}
});
}
window.addEventListener('load', updatePortfolioWidth);
window.addEventListener('resize', updatePortfolioWidth);
window.addEventListener('orientationchange', updatePortfolioWidth);
</script>Website Name
Place website meta description here
2 Replies
Hey @Mariusz Jankowski ! Thanks for the question. I took a look at the website but wasn't able to figure out your question.
My best guess is that some of your different ScrollTrigger scripts are conflicting with each other.
ScrollTrigger should recalculate on it's own when the browser is resized.
1. It looks like you have some code to try and recalculate ScrollTrigger on screen resize. This should be unnecessary.
2. It looks like you are creating scroll triggers with different methods. I'd recommend sticky to one method.
What happens if you remove the horizontal scroll section to a different porject and run the code for it there. Do you see the same behavior?
To troubleshoot this, I would incrementally test each ScrollTrigger component until I find the offender / offending combination. Start with jsut the horizontal scroll in a new project and test that until it works with browser resize. Next, add on your other ScrollTrigger animation. and so on.
My hunch is that there's actually a lot of code you can remove here
I managed to improve the Scroll code and it is now working as expected! THX!