rlaydtjs

import React from 'react'; import { useRef } from 'react'; import gsap from 'gsap'; import { useGSAP } from '@gsap/react'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; gsap.registerPlugin(useGSAP); export default function Apps() { const sectionsRef = useRef([]); const section2BoxRef = useRef(null); useGSAP(() => { const viewportWidth = window.innerWidth; if (viewportWidth >= 1024) { let visualTimeline = gsap.timeline({ scrollTrigger: { trigger: sectionsRef.current[1], start: 'top+=1000px top', end: 'center 50%', invalidateOnRefresh: true, pinnedContainer: sectionsRef.current[1], markers: true, toggleActions: 'play none none reverse', }, }); visualTimeline.add(() => {}, '0.1'); visualTimeline .to(section2BoxRef.current, { width: '100%', height: '100%', borderRadius: '0', ease: 'none', top: '352px', }) .to(section2BoxRef.current, { position: 'absolute', top: '0', height: '100vh', }) .to(section2BoxRef.current, { scale: 1, }); ScrollTrigger.create({ trigger: sectionsRef.current[1], start: 'top top', end: 'bottom+=2500px top', pin: true, }); } }); return ( <main> <section className="section section1" ref={(el) => (sectionsRef.current[0] = el)} > <h2> Lorem Ipsum is ~ </h2> </section> <section className="section section2" ref={(el) => (sectionsRef.current[1] = el)} > <h2>pinned text</h2> <div className="boxWrapper"> <div className="box" ref={section2BoxRef}> box </div> </div> </section> <section className="section section3" ref={(el) => (sectionsRef.current[2] = el)} > <h2> Lorem Ipsum is ~ </h2> </section> </main> ); } Im declaring a constant named viewportWidth and assigning it the value of the current inner width of the window. However, this code is only working when refreshing on mobile. I don't see any React examples for 'matchMedia()', is it possible to use it in React?

I'm missing some code from the React code migration. There are a lot of things to do, but it's hard to execute right away. Thanks for the guide. If anyone has a better way, please let me know. I'll review it positively!

So you can't have rewind and expand all at once without creating multiple ScrollTriggers.

GSAP is pretty awesome. I have a great site thanks to them. I'm having some issues, can you help? 1. Currently, if you look at my 'codepen' example, the .box element is zooming right in upon entering start. But I want to increase the exposure time of 'pinned text'. For example, I want the boxelement to zoom in when I scroll about 100px after the 'pinned text' is pinned. 2. Is there any way to revert to the original size when scrolling up from the end point without using the 'scrub' animation? 3. For lack of a better word, I want to increase the distance between the 'start' and 'end' points. In other words, I want the box to get bigger, and I want to scroll more before moving on to the next section. 4. And the biggest problem is that when the user scrolls fast, they can easily pass by section 2. Is there any way to solve this? Unlike the 'codepen' example, the real project is using React and UseGSAP(), so I couldn't find a way to solve it from the documentation alone, so I left a question. Thanks.

I want to have different CSS variations for each item element in a horizontal slider. For example, if my intentions are correct, the border radius of the first item should be 32px to 0px when scrolling.