Jump to content
GreenSock

TaiwoJazz

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

 

chrome_cwn79qvCoG.jpg

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?: 

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!

  • 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.
×