Jump to content


GSAP with React

Recommended Posts

Guys can anyone help with how to write GSAP code in React.. I was able to figure out most of it but I'm still finding it difficult to iterate over a list of items and apply certain tween to them one after the other...

Only codepen link is allowed so i can't like my code but i will paste it here and then link what i'm trying to achieve with codepen link. Thanks in advance..



import gsap from 'gsap';
import React, { useRef, useLayoutEffect, useState } from 'react';
const Hover = () => {
  const [animation, setAnimation] = useState();
  const hover = useRef();
  useLayoutEffect(() => {
    let ctx = gsap.context(() => {
      gsap.defaults({ duration: 0.3 });
          .timeline({ paused: true })
          .to('.text', {
            color: 'white',
            x: 10,
            scale: 1.3,
            transformOrigin: 'left center'
          .to('.dot', { backgroundColor: '#F93', scale: 1.5 }, 0)
    }, hover);
    return () => ctx.revert();
  }, []);
  return (
    <div className='width'>
      {[['Home'], ['About'], ['Portfolio'], ['Contact Us']].map(([title], index) => (
          onMouseEnter={() => animation.play()}
          onMouseLeave={() => animation.reverse()}
          <div className='dot'></div>
          <div className='text'>{title}</div>
export default Hover;



See the Pen WNZLoNg by snorkltv (@snorkltv) on CodePen

Link to comment
Share on other sites

Welcome, @TaiwoJazz


Yes, that looks like React-related stuff (not GSAP). I imagine you were looking for something more like this?: 



I'm not a React guy, so I'm probably the wrong person to chime in but hopefully that gets you on the right track. Make sure you read the React article: 



  • Like 2
Link to comment
Share on other sites

Thanks a lot man... I will be on this article now... Appreciate the timely response...

  • Like 4
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.