Skip to content

Conversation

tigt
Copy link
Contributor

@tigt tigt commented Jun 24, 2022

Fixes marko-js/website#101

The .demo-page-loading-linked animations may have to be pure CSS animation, since Safari is still grumpy about it even if we're just toggling opacity: 0.

Hm… or will-change: opacity. That might help, but pure-CSS would be more efficient than the requestAnimationFrame layer we have right now. That JS was first written for a scroll-linked effect… But now that we're animating a simple loop, full CSS may be the best choice.

@tigt tigt requested a review from mlrawlings June 24, 2022 17:06
@tigt
Copy link
Contributor Author

tigt commented Jul 7, 2022

Trying out using a gradient for the image loading placeholder instead of filter:

Before (filter) After (stacked radial-gradients)
A grayscale blur A slightly different grayscale blur

I also grabbed a clip of it in motion, since it’s only visible for a split second anyway:

gradient-in-motion.mov

Is that the filter or the gradient? I don’t remember! The filename might be wrong!

@tigt
Copy link
Contributor Author

tigt commented Jul 12, 2022

What I currently have for the hydration animation:

hardware-accelerated-partial-hydration.mov

Not as good as the existing one, but I’m not sure how to get that particular animation while hardware-accelerating it.

@github-actions
Copy link

PR Preview Action v1.1.1
🚀 Deployed preview to https://marko-js.github.io/website/./pr-75/
on branch gh-pages at 2022-08-23 18:16 UTC

@DylanPiercey DylanPiercey moved this from Todo to Done in The Everything Project Sep 8, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

CPU load on https://markojs.com

1 participant