ddboy19912

Url: https://stackblitz-starters-ougpwp.stackblitz.io Code: React Starter (forked) - StackBlitz I'm trying to use the observer methods' onDown/onUp function and passing in a function that handles scrollToView method to each section. It works fine when I add the function to a button, it just snaps well to the desired section but when I add the function to the onDown property it gets very buggy and does not transition well. I logged out values in the function when called by the onDown property and I see a continuous render of the log results. Ref: import { useState, useRef, useLayoutEffect } from 'react'; import React = require('react'); import gsap from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger'; import './style.css'; import Footer from './Footer'; gsap.registerPlugin(ScrollTrigger); export default function App() { const tl = useRef(); const scope = useRef(null); const [showFooter, setShowFooter] = useState(false); const handleClickScroll = () => { const element = document.querySelector('.panel-2'); if (element) { // ? Will scroll smoothly to the top of the next section element.scrollIntoView({ behavior: 'smooth' }); console.log('worked'); } }; useLayoutEffect(() => { const ctx = gsap.context((self) => {}, scope); ScrollTrigger.observe({ target: '.container', onDown: () => handleClickScroll(), }); return () => ctx.revert(); }, []); return ( <div className="container"> {/* {showFooter && <Footer setShowFooter={setShowFooter} />} */} <section className="panel panel-1"> <button onClick={handleClickScroll}>Scrollerrrrrrrrrr</button> <h1>GSAP and CSS Scroll Snapping</h1> </section> <section className="panel panel-2"> <p>Section 2</p> </section> <section className="panel panel-3"> <p>Section 3</p> <p>next slide should reveal footer modal</p> </section> </div> ); }

When I read that documentation it says there is no actual scrolling, It looks more like a parallax effect. In my case there is scrollling from one section to the other I just want to restrict the snap scroll to the next section, similar to the Observer code example but the implementation is different.

https://stackblitz.com/edit/stackblitz-starters-ougpwp?file=src%2FApp.tsx Hey guys, I have a scroll snap with gsap here but the problem is if the user scrolls hard enough he can move from the first section to the last one. I want to prevent this and have a similar UX as here : https://codesandbox.io/s/competent-fire-fy3rmk?file=/src/styles.css:172-296 Please how can I achieve this with gsap

I was able to solve the issue using the ScrollTrigger.observe() method ScrollTrigger.observe({ target: '.footer', type: 'wheel,touch', onUp: () => console.log('up'), onDown: () => setIsFooter(true), });

I have a question related to scroll animations in react. Basically what I'm trying to achieve is when I scroll to the bottom of the page and scroll again, I want the footer to zoom into the screen like a modal and when I scroll up from the modal it returns to the last section (The last section should always be centered). This is very tricky because I'm also utilizing page snap on each section. I've tried to my understanding but not been able to achieve a concrete solution I've created a sandbox here to showcase and I've also added a reference below, Thank you : https://stackblitz.com/edit/stackblitz-starters-ougpwp?file=src%2FApp.tsx Bandicam 2023-08-18 10-59-32-874.mp4