Jump to content
Search Community

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

sagar_dev test
Moderator Tag

Recommended Posts

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}>
              <span ref={(el: any) => (line = el)}>I make cool frontend</span>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic provident reiciendis voluptatem eius eveniet itaque?</p>

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.





Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...