Poor performance of <video> elements inside of draggable

[SeanAye]

I am using draggable as a replacement for the css scroll-snap property since it supports snapping to a specific location and it works great.

The child elements of the draggable are video elements which played fine before but since introducing draggable they are very choppy/laggy.

How can I improve the playback performance of the video elements?  Please see attached vimeo link for context.

 

EDIT: this is specifically an issue on devices with slower GPU performance. Devices with strong GPU's don't have this issue

 

const drag = Draggable.create('#scroller', {
  type: 'scroll',
  throwProps: true,
  snap: (endValue) => {
    const curHeight = -state.currentIndex * state.snapHeight
    console.log({ endValue, curHeight })
    if (endValue < (curHeight)) { // scrolling values are negative/going down
      console.log('if condition')
      return (state.currentIndex + 1) * state.snapHeight
    } else {
      console.log('else condition')
      return (state.currentIndex - 1) * state.snapHeight
    }
  },
  force3D: true,
  inertia: true,
  onThrowComplete: () => {
    state.currentIndex = state.mostRecentObseravtion
  },
  maxDuration: 0.5
})

 

[ZachSaucier]

Hey Sean and welcome to the GreenSock forums.

 

Most likely there's nothing you can do on the GSAP side to improve performance. GSAP is very optimized  

 

I'm guessing if you add will-change: transform to whatever is being dragged that'd help. Hard to give help past that. 

[SeanAye]

I wasn't even aware of this css property. After a quick check this seems to have solved it. Although according to MDN this property should only be used as a last ditch effort. I'm open to trying other suggestions which would be considered 'better practice' at least as far as MDN is concerned.

 

Thank you Zach~!

[ZachSaucier]

Ya. That just means don't do something stupid like * { will-change: transform; }  Using it on your draggables should be fine.