whizbbig

sorry if you felt bad from my statement, sorry sorry. by smooth i mean this https://zkpass.org/ if you can hover to the nav links!! you can see that is very smooth and light! right?

I've looked it do you have a demo to share!! where we can make it more smooth?? I would like to see the difference and how more great we can achieve with GSAP! this will really like very great to go for membership benefits.

I've created this hacker effect by watching hyperplexed tutorial very great man! and did some additions to make it work on next.js fortunately!. but it sucks! whenever this animation on play it lags the whole site!, so thats why i stumble like is there a way to create this using gsap?? useGSAP hook possibly?? Here's the demo!! I've created https://stackblitz.com/edit/stackblitz-starters-n4ap3a?file=app%2Fpage.tsx

@GSAP Helper Thankyou for responding, and now i understand the functionality i am expecting is more resembling the possiblity of using sliders so if you have any examples related to sliders that works on scroll. like when we scroll down from one section to a slider one it sticks there like the container is pinned and on scroll it slides in the elements/childrens from right horizontally and move to otther section vertically!

Hi @Rodrigo, I hope you're having a great day! Thanks for sharing this, I've tried to apply information i got from the blog you shared in many differnet ways but now i am out of ideas i really don't know what special i should do to make them pin and fade away on scroll!! I hope you've seen the sandbox link for understanding about the collision between horizontal scroll functionality that i have and scrolltrigger function import { useMediaQuery, useRect } from '@studio-freight/hamo' import cn from 'clsx' import gsap from 'gsap' import ScrollTrigger from 'gsap/ScrollTrigger' import { useScroll } from '@/hooks/use-scroll' import { clamp, mapRange } from '@/lib/maths' import { useEffect, useRef, useState } from 'react' import { useWindowSize } from 'react-use' import s from './Horizontal.module.scss' gsap.registerPlugin(ScrollTrigger) export const HorizontalSlides = ({ children }: { children: React.ReactNode }) => { const elementRef = useRef<HTMLDivElement | null>(null); const isMobile = useMediaQuery('(max-width: 800px)') const [wrapperRectRef, wrapperRect] = useRect() const [elementRectRef, elementRect] = useRect() const { height: windowHeight } = useWindowSize() const [windowWidth, setWindowWidth] = useState<number>(0); useScroll(({ scroll }: { scroll: number }) => { setWindowWidth(window.innerWidth); if (!elementRect || !elementRef.current) return const start = wrapperRect.top - windowHeight const end = wrapperRect.top + wrapperRect.height - windowHeight let progress = mapRange(start, end, scroll, 0, 1) progress = clamp(0, progress, 1) const x = progress * (elementRect.width - windowWidth) const cards = Array.from(elementRef.current.children) gsap.to(cards, { x: -x, stagger: 0.033, ease: 'none', duration: 0, }) }) useEffect(() => { if (!elementRef.current) return; const onResize = () => { setWindowWidth(Math.min(window.innerWidth, document.documentElement.offsetWidth)); }; window.addEventListener('resize', onResize, false); onResize(); Array.from(elementRef.current.children).forEach((card, index) => { let tl = gsap.timeline({ scrollTrigger: { trigger: card, start: "left center-=500", end: "right center+=500", scrub: true, markers: true, horizontal: true, pin: true, } }); tl.to(card, {opacity: 0, duration: 1}, 0); }); return () => { window.removeEventListener('resize', onResize, false); ScrollTrigger.getAll().forEach(st => st.kill()); }; }, [windowWidth]); return ( <> <div className={s.wrapper} ref={wrapperRectRef} style={ elementRect && isMobile === false ? { height: elementRect.width + 'px' } : {} } > <div className={s.inner}> {/* {isMobile === false ? ( */} <div ref={(node) => { elementRef.current = node elementRectRef(node) }} className={cn(s.overflow, 'hide-on-mobile')} > {children} </div> {/* ) : ( */} <div className={cn(s.cards, 'hide-on-desktop')}>{children}</div> {/* )} */} </div> </div> </> ) }

How can I use GSAP to animate cards within elementRef such that each card pauses when entering the viewport during a scroll, and as I scroll further, the card fades in opacity while moving to the left before the next card comes into view? Sandbox Link I have added the link of the sandbox so that I can explain my goals more clearly. You should view the preview in a next window in the editor only then will you be able to see the horizontal scroll. Thank you very much for your help 🙏

Hello, Friends on the GSAP Forum, since there is a rollout of a hook `useGSAP()` working with the react/next. I wanted to know whats the smart and easiest way to create page transitions for the next.js using GSAP ofcourse. I've asked about this question to some of the people i know and most of them prefer to go with Framer Motion here, as its basically meant for it only, but since I am a GSAP fan, I want to know how i can achieve this with GSAP on Next.js, i hope with the simple straightforward guidance i can able to achieve this successfully!

I am trying to create a scenario, where there's only the container is pinned and item floats in the view of the container in parallax state, this is the codepen demo of sir carl schoof but, I direction less from where i can start to make it according to my version. as given in the video below it should pin the container and there is more sections like our services in bottom so when i scroll they should scroll in that container in parallax state. https://imgur.com/a/cTQFdL4 i've tried to follow this tutorial by sir carl shoof