Parallax Performance

Hey guys,

I recognize you guys have a lot on your plate with new features and bug fixes, but we need to start a discussion on the performance of the parallax feature.

When viewing your demo “Scrolling” page on a 2015 MacBook Pro with Retina the FPS (frames per second) go down to a horrendous 15 - 20 FPS, unsuitable for any user. I’ve seen very good performance improvements when implementing the experimental GPU rasterizing feature in Chrome, but it’s still difficult to reach 60 FPS (it usually hovers around 55).

I’d like to propose a few steps to get the ball rolling on getting this improved:

  1. From your team outline the current implementation of the parallax scrolling feature for your developer community to understand how you're doing it.
  2. Open up a GitHub repo for this feature for the community to contribute to this feature. We should strive to implement the performance recommendations for parallax laid out by Paul Irish, Krister Kari, and Dave Gamache

I think this is a feature we all “expect” in a page builder (even though I’m not a particularly huge fan of how most people implement it.) but it’s clear that most implementations from plugins / page builders are really bad. I can’t think of a better feature to focus on improving (and then really highlighting on your end) that would benefit the community in major ways.

If there’s any way I can personally contribute, let me know. I’m more than willing to help.

Thanks guys!

Hey Ryan! Thanks so much for the feedback. We use a private bitbucket repository internally. We’ve discussed creating a public repository as well, but it’s not an immediate plan.

We’re always happy to invite folks to our private repo, though. We really appreciate your offer to contribute! Let me chat with the dev team and we’ll try to get you setup with repo access!

Hey Ryan,

As Robby mentioned, we’re always happy to get people into our repo that want to contribute. Feel free to shoot me an email with the email address you have for BitBucket and I’ll get you setup with that.

Regarding how we’re handling parallax, we’re doing what most people I’ve seen do, setting the background position as you scroll. I know that onscroll events aren’t typically very performant, so I’d love to hear more about how that could be improved. We’re always up for performance enhancements!

Justin

Hey Robby and Justin!

Thanks for your enthusiastic response! I really love what you guys are doing with the plugin (and the improvements you’ve made over the past year).

I’d love to be part of the private repo. (I’ll send you guys emails with my BitBucket account.)

As far as handling the parallax, I’ve done the same thing in the past with the same type of performance hit. I’m assuming you’re using jQuery to change the background position using onscroll? There are definitely a number of things we can do to make it more performant without changing any of the current functionality. Let’s kick some butt with this feature and make it an amazing experience for everyone’s device.

Peace,

Ryan

Hey Ryan,

You’re welcome and thanks for the kind words! Send over your email and we’ll get you rolling on that.

I’m assuming you’re using jQuery to change the background position using onscroll?

Yep :slight_smile:

Let’s kick some butt with this feature and make it an amazing experience for everyone’s device.

Looking forward to it!

Justin

[Content Hidden]

[Content Hidden]

Thanks, Ryan! You’re all set it the repo! Let me know if you have any questions.

Justin