5

I am building a website where i have put a scroll animation in which an icon images moves up based on the offset position of the right container content. The logic works great but the animation is choppy in safari and Firefox.

URL - http://ashirvad.xyz/qbf/

Code logic goes something like this:

$(window).scroll(function() {    
    var height = $(window).height(),
        scroll = $(window).scrollTop()
        var offsetStart = $('#cardContent').offset();      
    if (initialOffSetStartPosition.top >= (offsetStart.top -scroll - 1) ) {
        $(".nav-sticky").offset({top:offsetStart.top});     
}
});

Any help?

Ashirvad
  • 2,367
  • 1
  • 16
  • 20

2 Answers2

1

Try using transform instead of positioning. https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

It has better performance and may give you smoother results. Also, if you are on a retina display, or other high density display, it can also affect performance.

UPDATE: Yeah, I just tried it on a 5K monitor in Safari and Firefox and the performance was bad. But, when I moved it over to a standard monitor, the performance was fine. I still say use transform over positioned elements for animation quality, though.

Jonathan Bowman
  • 1,606
  • 1
  • 12
  • 17
1

  1. Do not animate properties that trigger layout recalculation. In short, use transform instead of positioning props like top left etc. Check here to see how each property works. In general, transform and opacity are the only properties that can be animated cheaply, the rest depends on exact layout complexity.

  2. Unless you're scaling the moved elements, you can pre-optimize them with will-change: transform. It's a complicated topic, but in general it helps at least as well as setting a blank initial transform with something like translateZ(0).

  3. Make the scroll bind passive.

zrooda
  • 3,610
  • 1
  • 30
  • 38
  • #2 tried already with no success. Again the issue is only in safari and fireFox . chrome works fine. #3 i am not sure that safari even supports it. – Ashirvad May 02 '18 at 20:53
  • #1 it is the design requirement from client. I can't change it. – Ashirvad May 02 '18 at 20:53
  • If you can't do #1, you can't fix it. That is the direct cause of the problem, so if using exact style properties is a client requirement, he's breaking it himself. – zrooda May 02 '18 at 21:02