React - animating scrollLeft on a div

[jpeacock]

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

[ZachSaucier]

Hey jpeacock. You're loading a really old (v1) version of the ScrollToPlugin. Make sure you're loading a v3 version, probably the latest: https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/ScrollToPlugin.min.js

 

If I change that your pen works for me.

[ZachSaucier]

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.

[jpeacock]

@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)

 

[ZachSaucier]

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.

[jpeacock]

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