Streaming live at 10am (PST)

Laggy Scroll Animation

Hello! Anyone wanna take a stab at why this scroll animation I’m working on is SOOOOO laggy! I feel like it may have to do with some of the divs being “fixed”. It seems to work best on Chrome but Safari is REALLLY struggling on my end. None of the images used are over 80kb.

https://preview.webflow.com/preview/spacehead2020?utm_medium=preview_link&utm_source=designer&utm_content=spacehead2020&preview=13c263ec584bd0b69d5a56b42fbc7d44&mode=preview

Maybe you have issues with the triggers/animations.
Try deleting one, then test view. Undue, then repeat for the next one.
I saw it works best when I delete the last one.
Of course I don’t know your desired effects, but that’s my stab.
image

Thanks @TheCat. I’ve tried that and it doesn’t seem to really help much. My desired effect is the galaxy shrinking to the background as the planet comes up from the bottom. Eventually I plan to have the text fade out as well but I wanted to nail down the galaxy/planet transition first. I really appreciate you looking into it though!

I have a similar problem. Everyone has the same problem. Try any gallery project with a page load trigger animation, and it performs horribly in Safari.

My own post… check the dropbox link, as the embedded preview in the post takes forever to load. Night and day difference between performance in Safari and Chrome. Unfortunately, the advice from Webflow direct was… don’t use Page load animations. My response was, huh? You have 3 how-to videos online showing to do exactly that.

Not a developer but either Jquery has a problem with Safari, or Apple made a crap browser when it comes to handling javascript performance when loading data in the background. Either way, I get no real reply anywhere about anything, including from Webflow. Which, being a designer building a website to get a job, other designers on Macs will be using Safari to view my site. So, instead of “awesome design” they’ll think “how buggy, next! - no job for me” I’ve even tried it on a iMac Pro and top of the line iPad Pro 12" in a store - same choppy performance - so, pretty sure it’s either Jquery on Safari, or just Safari.

I really wish more people would bring this to light. I posted in the Apple Developer forum here: https://forums.developer.apple.com/message/410426#410426 - no response. I posted in the Jquery forum, and it’s still “awaiting moderation,” so no one can even see it there (though, there have been newer posts “approved” and visible since mine).

The misleading part is that the animations perform perfectly in the Webflow Designer in Safari. But, that’s likely because every element is already loaded and cached.

Webflow support said they did see similar problems from others; the only practical thing they told me to try was to insert something under the site settings’ Custom Code - Head Code area:

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

A) no explanation what it is, and B) it changed nothing for me. But, maybe your mileage may vary.

Complain anywhere and everywhere you can… This for me is a “show stopper” issue. On-load animations simply DO NOT WORK IN SAFARI. If you can’t support a major browser with a major feature (IX) that you show off in three videos, then something is wrong.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.