GSAP with React

[TaiwoJazz]

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 });

      setAnimation(

        gsap

          .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) => (

        <div

          key={title}

          id={index}

          className='item'

          ref={hover}

          onMouseEnter={() => animation.play()}

          onMouseLeave={() => animation.reverse()}

        >

          <div className='dot'></div>

          <div className='text'>{title}</div>

        </div>

      ))}

    </div>

  );

};

 

export default Hover;

 

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

[GreenSock]

Welcome, @TaiwoJazz

 

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

https://codesandbox.io/s/eager-surf-vnxfgl?file=/src/App.js

 

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: 

 

Enjoy!

[TaiwoJazz]

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