problems when viewed on a monitor about react-scroll-parallax HOT 12 CLOSED

Could also just be a resource issues -- takes more memory/GPU to move bigger images. If you have other resource intense processes/animations on the site or in the background you might want to disable or isolate and see if that's a source.

from react-scroll-parallax.

ok so I tried this out very quickly and I saw some improvement (actually, very good ones) on the big monitor

const parallaxStyles = {
  // forcing hardware acceleration from the get go
  transform: 'translate3d(0, 0, 0)'
}

<figure className="project-preview__images">
  <Parallax
    offsetYMax={24}
    offsetYMin={-8}
    offsetXMin={-0.5}
    fasterScrollRate
    tag="span"
    style={parallaxStyles}
  >
    <img
      className="project-preview__images__main-image"
      src={props.mainImage}
      alt={props.project.title.defaultMessage}
    />
  </Parallax>
</figure>

im not a guru at css but so far, its an improvement. The idea of this aproach came from:
https://developers.google.com/web/updates/2016/12/performant-parallaxing

its widely supported (caniuse): https://caniuse.com/#search=transform

however, idk if you like this approach, if you do, ill dig around the code and submit a PR for you to review.

things ill try later

.animClass {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000;
}

and see how that works on the big monitor

from react-scroll-parallax.

translate3d is already used internally to apply the offsets to inner elements. You don't need to add additional styles to force the GPU to be utilized. See here

But if you think it helps, I won't stop you. :)

from react-scroll-parallax.

ok im sorry haha, will close now

from react-scroll-parallax.

No worries, let me know if you discover any other possible reasons for the jank.

from react-scroll-parallax.

Thanks a lot! There was a caching problem. Fixed it with adding update() to the parallaxController

from react-scroll-parallax.

Hey, thanks for the issue, but I'll need to see the codebase or a link to provide any advice on this one.

from react-scroll-parallax.

@jscottsmith no need, it happens when you open the demo site on a big monitor (in this case, 32 in.). I think it can be two things; 1- since the monitor is bigger, you can see the refresh rate and maybe this is what throws me off -or- 2- the resolution/scale config on my monitor makes it look like that. If you open the demo site on a monitor and if it looks ok, then its my monitor.

from react-scroll-parallax.

yeah, I checked using only my laptop and seems to be the size of the screen, works smoothly on my laptop. I wonder if there's a way to trigger hardware acceleration somehow and maybe try that out. what do you think?

from react-scroll-parallax.

ok, the last comment, sorry, I just like this library so much. so basically, I'm adding this line of CSS to my main file

.parallax-inner {
    transform: translate3d(0, 0, 0);
}

since you provide that class as part of the library, this way, wherever I use this component, will pick up this CSS and the hardware acceleration comes from free without adding additional classes.

from react-scroll-parallax.

Hey @jscottsmith! I'm dealing with the loading issue. The parallax effect is not loading properly when a user first hits the page, it only loads after refreshing the page. What can cause it? Thanks a lot!

from react-scroll-parallax.

@yuliwna1 Can you open a new issue and share a link to your project repo or live website? There's also some info about the likely causes of this in the troubleshooting section.

from react-scroll-parallax.