jernst146

Thank you, this worked! Just played around with the tranformOrigin until I found the right numbers (51.662% 25%), however, will have to redo the process for smaller screens as well, but that shouldn't be a big problem... I hope! As for the CSS/Tailwind... I'm not sure either, since I haven't really changed or added much to the CSS / Tailwind so that is a mystery to me too, especially since the pin in ScrollTrigger worked previously, and I haven't changed any CSS/Tailwind from when it worked

Hello! I am currently testing out GSAP with Next.js and i'm trying to create a zoom-in on scroll transition, where I use GSAP to zoom into the text, which is white, until it covers the screen, before ending up on the next section which has a white background. However, I can't seem to make it work. I've tried using useRef (the current code uses this) as well as just using class names. StackBlitz - Did a demo with the code in StackBlitz as well, for some reason, I have to open the demo in a separate page, scroll all the way down, then scroll all the way up for the text to show up... But except for that, the problems are the same, as the code is the same, except that I had to pin the textElement, instead of the heroElement to make it somewhat work, and with some other unnecessary components, and classes removed. The two problems I'm having are: 1. When scrolling, the text zooms in (or rather, scales up), however, at the same time the text moves up, out from view as shown in the gif below, which I don't want. 2. I'm trying to also make it zoom into a specific letter, because I think the transition would be smoother (although, this part is not necessary, if the text-zoom looks good and can cover the screen) I've looked around the forums, asked AI and tried myself for two weeks but I just can't figure it out. If anyone has an idea on how to fix this, or make it work that I would be really thankful!! Ps: the "hero_title" = @apply 2xl:text-[72px] sm:text-[64px] text-[50px] font-extrabold origin-center; 'use client' import React, {useRef, useEffect} from 'react' import HeroCanvas from './HeroCanvas' import gsap from 'gsap' import { ScrollTrigger } from 'gsap/dist/ScrollTrigger' import { useGSAP } from '@gsap/react' gsap.registerPlugin(ScrollTrigger) const Hero = () => { const heroRef = useRef(null) const textRef = useRef(null) const letterRef = useRef(null) const container = useRef(null) useGSAP(() => { const heroElement = heroRef.current; const textElement = textRef.current; const letterElement = letterRef.current; const tl = gsap.timeline ({ scrollTrigger: { trigger: heroElement, start: 'top top', end: '+=5000', scrub: true, markers: true, pin: heroElement, } }); tl.fromTo (textElement, {scale: 1}, { scale: 100, ease: 'none', smoothOrigin: true, }); tl.fromTo (letterElement, {scale: 1}, { scale: 100, ease: 'none', smoothOrigin: true, }); }, {scope: container}) return ( <div ref={heroRef} className='flex min-h-screen flex-col justify-between p-24 items-center'> <div ref={textRef} className='flex-1 pt-36 padding-x'> <h1 className='hero_title uppercase tracking-widest text-center'> <span> Testi</span><span ref={letterRef}>n</span><span>g</span> <span className='bg-gradient-to-r from-accent-3 via-accent-2 to-accent-1 inline-block text-transparent bg-clip-text'> GSAP </span> <br /> <span> Placeholder </span> <span className='bg-gradient-to-r from-accent-3 via-accent-2 to-accent-1 inline-block text-transparent bg-clip-text'> Text </span> </h1> </div> <HeroCanvas /> </div> ) } export default Hero