Help creating zoom-in to text transition in Next.js

[jernst146]

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

 

 

 

 

Edited February 27 by jernst146
One of the sentences were, wrong, the code is mostly the same, but the 'pin: heroElement' is 'pin: textElement' in the StackBlitz code

[mvaneijgen]

Hi @jernst146 welcome to the forum! 

 

You can set the transformOrigin: '90% 65%', of a tween (here I just used random values), but you can set it so it scales to a specific point you want. I have the feeling something is setting the CSS position of the text which makes it stay in place which is conflicting with pin in ScrollTrigger, but I couldn't debug your CSS/Tailwind.

 

I've disabled one tween, because I was not sure what it was doing and change your .fromTo() tween to just .to(), no nee for them GSAP is smart and just animates from browsers defaults. I hope this shows how how you can go about these things. Hope it helps and happy tweening! 

 

https://stackblitz.com/edit/stackblitz-starters-qxhv8f?file=components%2FHero.tsx

[jernst146]

1 hour ago, mvaneijgen said:

Hi @jernst146 welcome to the forum! 

 

You can set the transformOrigin: '90% 65%', of a tween (here I just used random values), but you can set it so it scales to a specific point you want. I have the feeling something is setting the CSS position of the text which makes it stay in place which is conflicting with pin in ScrollTrigger, but I couldn't debug your CSS/Tailwind.

 

I've disabled one tween, because I was not sure what it was doing and change your .fromTo() tween to just .to(), no nee for them GSAP is smart and just animates from browsers defaults. I hope this shows how how you can go about these things. Hope it helps and happy tweening! 

 

https://stackblitz.com/edit/stackblitz-starters-qxhv8f?file=components%2FHero.tsx

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