Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jpeacock

React - animating scrollLeft on a div

Recommended Posts

I have a div nested in the DOM that is set to overflow-x: scroll. I can scroll it fine with a mouse/trackpad. When trying to animate it in React, it's not affected. No errors or anything, but it just doesn't go. I set it up with a ref and named the ref with React.CreateRef() and can console.log it out fine. I'm able to also animate other properties on this div correctly (I tried rotation, for instance). 

 

// up top
import { ScrollToPlugin } from "gsap/ScrollToPlugin"
gsap.registerPlugin(ScrollToPlugin)

// in a class
moveSlider = (distance) => {
  console.log(distance)

  this.animatedImageWrapperTween = gsap.to(
      this.animatedImageWrapper.current,
      0.5,
      {
          scrollTo: {
              x: distance,
              offsetY: 40,
          },
          ease: "power1.inOut",
      }
  )
  console.log(this.animatedImageWrapper) // this logs correctly as a Reeact element and using .current brings up the HTML for the element
}

 

See the Pen abdMaMz by jpeacock (@jpeacock) on CodePen

Link to comment
Share on other sites

By the way, we recommend that you include the duration inside of the vars parameter so you can use things like defaults. Also note that 0.5 is the default duration so it could be left out in this case.

Link to comment
Share on other sites

@ZachSaucier - thanks! - I updated the pen with the latest and it works. The weird thing is that I'm using it as an import in my React project and it doesn't work? 

 

import { gsap } from "gsap"
import { ScrollToPlugin } from "gsap/ScrollToPlugin"
 
gsap.registerPlugin(ScrollToPlugin)

 

Link to comment
Share on other sites

Couldn't tell ya given the lack of information. Does give you the same error? Are you using something like Nuxt?

 

Maybe it'd help if you tried to recreate the issue on CodeSandbox.

Link to comment
Share on other sites

Well, I feel dumb. It was my flexbox setup allowing wrap on an overflow-x. 🙄

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