Hi,
I have a webflow website set-up which horizontally scrolls natively within webflow.
Now I want to let the user scroll to a certain section (ID section_cases) when they click on a button (ID scroll-button).
I've tried several set-ups but it doesn't seem to work. Here some code I tried.
Can someone point me in the right direction?
To view the webflow environment you can go here: https://preview.webflow.com/preview/portbase-dev-401cfc02012e4d1a6e442cbc33?utm_medium=preview_link&utm_source=designer&utm_content=portbase-dev-401cfc02012e4d1a6e442cbc33&preview=bd649b62c62c16a47c57d34f363f76d3&workflow=preview
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollToPlugin.min.js"></script>
<script>
gsap.registerPlugin(ScrollToPlugin);
const section = document.getElementById('section_cases');
const timeline = gsap.timeline();
timeline.scrollTo(section, {
duration: 1,
ease: 'power2.inOut',
});
const scrollButton = document.getElementById('scroll-button');
scrollButton.addEventListener('click', () => {
timeline.play();
});
</script>