Text is not animating in 'x' and 'y' in next.js

[sagar_dev]

Hello, I am using GSAP and next to build my Portfolio website. I have previously worked with same setup and every thing was working. However, now in my project when I tried to use gsap.from method to fade in reveal headings from below, it is not working. Heres the code snippet

import React, { useLayoutEffect, useRef } from 'react'
import Style from '@/styles/moudle/hero.module.scss'
import { gsap } from 'gsap'

const Hero = () => {
  let line = useRef(null)
  useLayoutEffect(() => {
    const tl = gsap.timeline()
    const ctx = gsap.context(() => {
      // tl.from(line, {
      //   duration: 0.7,
      //   skewY: 4,
      //   y: 69,
      //   autoAlpha: 0,
      // }).from('p', {
      //   y: 50,
      //   duration: 0.5,
      //   autoAlpha: 0,
      //   skewY: 4,
      // })
      gsap.fromTo(line, {
        y: 50,
        autoAlpha: 0,
      }, {
        y: 0,
        autoAlpha: 1,
      })
    })

    return () => ctx.revert()
  }, [])
  return (
    <>
      <section className={`${Style.wrapper}`}>
        <div className='container'>
          <div className={Style.hero_text}>
            <h1>
              <span ref={(el: any) => (line = el)}>I make cool frontend</span>
            </h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic provident reiciendis voluptatem eius eveniet itaque?</p>
          </div>
        </div>
      </section>
    </>
  )
}

export default Hero

Here, I am using typescript. I read a post in this community to use useLayoutEffect instead of useEffect so, I am using useLayoutEffect. I tried to use .from and .fromTo for the animation but both doesn't worked. Opacity and autoAlpha is working but not x and y value. Other dependency that I am using is Lenis for smooth scroll. I thought this might be the cause and tried in code sandbox with same setup but here it is working properly.

 

https://codesandbox.io/embed/peaceful-ritchie-xtkrl4?fontsize=14&hidenavigation=1&theme=dark

 

 

[coolDev]

First you need to move timeline to the inside of the context. Otherwise, the use of the context is meaningless.