search

ingram-projects / animxyz

The first truly composable CSS animation library. Built for Vue, React, SCSS, and CSS, AnimXYZ will bring your website to life.
https://animxyz.com
MIT License
2.42k stars 56 forks source link

Animation kicking in only after prerender, causing visual issues #67

Open Sananes opened 3 years ago

Sananes commented 3 years ago

Hey guys,

I'm currently having an issue where on initial render all elements that include the animxyz transition, first appears on intial render, then animxyz kicks in. Is this normal behavior?

You can see an example of this here: https://potpunks.io/home

I would expect it to automatically hide elements on initial render by default, then animate those elements in. Which causes a weird visial issue, where you see elements to begin with then you see it animate once it's loaded. More significant when you're using the fade animation.

I'm currently using nuxt for this project and not really sure if its to do with preloading animxyz first?

Thanks in advance!

mattaningram commented 3 years ago

That's strange. My initial guess is it has something to do with the statically generated site being hydrated after the static HTML and CSS renders.

Where/when is the animxyz CSS being loaded when the site loads? If you can include it with the rest of the styling CSS that loads with the initial site load, then the elements with xyz="fade ..." should be automatically hidden due to animxyz setting the animation-fill-mode to both.

If the animxyz CSS is being loaded only when the page hydrates with Vue then that would explain what you are seeing.

Sananes commented 3 years ago

@mattaningram that's basically what I think is also happening. Do you think this is also related to: https://github.com/ingram-projects/animxyz/issues/38?

Thanks in advance!

Sananes commented 3 years ago

I've tried a brand new nuxt project to see if I did something incorrectly, but it looks to me that on statically generated sites it only loads once page hydrates...

mattaningram commented 3 years ago

Where in your Nuxt setup is the actual CSS for animxyz being loaded? Ideally you would load the CSS prior to the JS rather than with it. Is it included in the CSS sent to the client pre-hydration?

Sananes commented 3 years ago

Hey @mattaningram thanks for getting back to me! I've tried both manually adding a link to the <head> as well as a couple of other solutions and site renders everything first, then animation kicks in. It's very strange. Something I've noticed though, the animxyz css doesn't currently include the animation-fill-mode: both?

mattaningram commented 3 years ago

It's definitely in there, if you manually inspect animated elements that have the xyz classes active you can see it set on the animation property, and you can see it in the code here: https://github.com/ingram-projects/animxyz/blob/master/packages/core/src/_functions.scss

Another thing I'm noticing on your site is the xyz classes aren't being removed when the animation is over they way they should be. Probably also related to the static site HTML being hydrated.

Hmmm just looked at your <head> element and it appears to have a few <style> tags with AnimXYZ compiled CSS but strangely not all the CSS? Is your Nuxt build trying to optimize loaded CSS to only show "above the fold" styles and asynchronously load the rest after?

Sananes commented 3 years ago

@mattaningram so I disabled ssr globally on my build and that seems to have fixed the issue. Although, i don't particularily want to disable ssr for it to work. It would be great to have it work with ssr set to true. I'm not too sure how I would go about that. Whe n I set ssr to false i get the same issue found here:

Hello, when I compile my Nuxt app in static mode (nuxt generate), the XyzTransition and XyzTransitionGroup elements are compiled to xyztransition and xyztransitiongroup, which are not valid HTML, causing an hydration error in dev mode and a "Failed to execute 'appendChild' on 'Node'" error when serving the compiled project with a static web server. https://github.com/ingram-projects/animxyz/issues/38

Sananes commented 3 years ago

Here's some context too: image