AmanVerma

Thanks @Toso for adding those wonderful articles, they were really informative and I learned that one can also use grid over position: absolute, since it also keeps elements in the flow of the document, and thanks @Rodrigo for helping with the solution, I totally skipped the part where it mentions in the documentation that `An element (or selector text for the element) that should be pinned during the time that the ScrollTrigger is active` and focussed just on the property taking boolean values. Also the video by @Cassie gave me a totally new perspective on approaching scrollTrigger. I'll try to use "progressive enhancement" wherever I can. Thanks!

Hey Everyone! Here's the problem 1. There's a red which has a green box below it 2. The green box has three cards in it which I want to scroll into view as I scroll down 3. They are scrolling into view but the red box above keeps going out the view during the scrolling action and I need the green and the red box to keep on touching 4. When I put all the classes of the boxes in an array, they were scrolling into view almost together timeline.to(['.mini-card:nth-child(1)','.mini-card:nth-child(2)', '.mini-card:nth-child(3)' ], { y: (index) => finalpositionArray[index] }) 5. So I chained them like so: timeline.to('.mini-card:nth-child(1)', { y: (index) => finalpositionArray[index] }).to('.mini-card:nth-child(2)', { y: (index) => finalpositionArray[index] }).to('.mini-card:nth-child(3)', { y: (index) => finalpositionArray[index] }) 6. But the scrolling still keeps on introducing a gap between the red and the green box. How do I solve it? Thanks! https://codepen.io/amanopia/pen/VwNwMoy

Its absolutely fine! You helped in identifying the error, I'll take it forward from here! Thank you so much for your help!

"I wonder if the jitter is due to some kind of filter effects you're using (some filters are extremely CPU-intensive for rendering which is totally unrelated to GSAP" I was using some canvases, 4 in total that create sine waves of different colors, when I commented them out from the code, it is working smooth as butter. Is there any way I can still include it and not have jitters? I mean it is quite intensive on the CPU, but the canvas element shouldn't be causing this since it works perfectly in codepen : https://codepen.io/amanopia/pen/ExMeqqj Stripe has one on their homepage, right on the top, how does that work both on phone and desktop?!!?

I created a codepen for the issue and opened it on mobile phone, scrolls perfectly smoothly on it https://codepen.io/amanopia/pen/OJqKadX I was using LenisScroll on my main project for smooth scrolling, but I disabled it, still i got the jittery effect. Could multiple scrollTriggers be causing this issue? Edit: I disabled all the other scroll triggers on the page and enabled just one, still it is jittery on the phone

Hi Everyone, I have been trying to create a scroll trigger animation that slides in numbers from the left, on scrolling . The issue is that on desktop it works smoothly, but on mobile it shows jittery effect, even after using ScrollTrigger.normalizeScroll(true); ScrollTrigger.config({ ignoreMobileResize: true, }); as mentioned in the thread: after adding those two lines, the numbers slide in kind of smoothly into the frame and not jump into it, but the scrolling becomes extremely jittery. My phone screen has a refresh rate of 90hz, but for 60hz, it looks absolutely terrible Since the project has not been hosted yet, I have added the link to videos in drive : videos link I am using React CRA

I was trying to refer to the function-based values, and used the word callback instead. I apologize for the confusion. Thank you for pointing me to the right resources!

Thanks for the answer! It works! I didn't know, one could use a callback. That makes me wonder, suppose I wanted to animate, just the second element in the array. Consider the .child2 to have an opacity of 0 initially, and we want to animate it to 1. One approach I can see is that we create an opacity array for that purpose, but wouldn't creating an opacity array for every element, make this function run redundantly for the other targets, that don't even need an opacity. Because I read somewhere in the docs that animation runs for every element in the target array. Is there a better solution to target just one element. Also, where can I read more about callbacks in gsap? Thanks! Here is my solution: let array = [-100, 100]; let opacityArr = [1, 1] gsap.to( [".child1",".child2" ], { yPercent: (index) => array[index], opacity: (index) => opacityArr[index], scrollTrigger: { markers: true, start: "top 1%", end: "bottom 1%", trigger: ".test", pin: true, scrub: 0.8, ease: "power2.inOut" } }) https://codepen.io/amanopia/pen/xxBJyyY

Greetings to fellow devs here! I am trying to animate two children divs to move in the opposite directions using scrolltrigger. Got this suggestion from Google Bard, to put the elements in an array and then try to animate them. But the issue is, even though I am specifying opposite percentages, the elements are still moving in the same direction. Below are CSS and React codes attached. I am using refs and the latest useGSAP hook. And here is the codepen with issue reproduced : https://codepen.io/amanopia/pen/xxBJyyY here is css @import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@100..900&family=Oswald:wght@200..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); .main { height: 100vh; margin: 0; padding: 0; } .c1 { display: flex; align-items: flex-end; height: 100%; background: red; overflow: hidden; } .c1 h1 { text-transform: uppercase; color: #fff; font-size: 40vw; font-family: "Oswald"; white-space: nowrap; font-weight: 500; letter-spacing: -30px; } .content2 { height: 100%; background: #000; z-index: -1; font-family: "Inter"; display: grid; place-items: center; position: relative; } .data1, .data2 { width: 50%; background: rgba(167, 255, 56, 1); padding: 2.5rem; margin: 10px auto; border-radius: 25px; z-index: 1; } .data2 { background: rgba(253, 151, 255, 1); position: absolute; z-index: 0; } @media (max-width: 750px) { .data1 h1 { font-size: 2.5rem; font-weight: 900; } } here is the react code: import React, { useRef } from "react"; import gsap from "gsap"; import { useGSAP } from "@gsap/react"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import "./LenScroll.css"; export default function LenisScroll() { const heading = useRef(); const container = useRef(); const data1 = useRef(); const data2 = useRef(); useGSAP( () => { gsap.registerPlugin(ScrollTrigger); const tl = gsap.timeline(); tl.to(heading.current, { x: "-100%", fontWeight: 200, letterSpacing: "1rem", scrollTrigger: { trigger: ".c1", scroller: "body", scrub: 0.2, pin: true, }, }); // THIS RIGHT HERE! gsap.to([data1.current, data2.current], { y: ["-100%", "-100%"], scrollTrigger: { trigger: ".content2", scroller: "body", pin: true, scrub: 0.8, markers: true, }, }); }, { scope: container.current }, ); return ( <div ref={container} className="main"> <div className="c1"> <h1 ref={heading}>Aman Verma</h1> </div> <div className="content2"> <div ref={data1} className="data1"> <h1>Para is the easiest way to earn money as a Software engineer</h1> </div> <div ref={data2} className="data2"> <h1>Para is the easiest way to earn money as a Software engineer</h1> </div> </div> </div> ); }