Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
Sananes opened this issue Aug 10, 2021 · 8 comments
Open

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

Sananes opened this issue Aug 10, 2021 · 8 comments

Comments

@Sananes
Copy link

Sananes commented Aug 10, 2021 •
edited
Loading

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!
@Sananes Sananes changed the title On load by default, everything shows up, then animxyz kicks in Animation kicking in only after prerender causing visual issues Aug 11, 2021
@Sananes Sananes changed the title Animation kicking in only after prerender causing visual issues Animation kicking in only after prerender, causing visual issues Aug 11, 2021
@mattaningram
Copy link
Member

mattaningram commented Aug 11, 2021 •
edited
Loading

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
Copy link
Author

Sananes commented Aug 12, 2021 •
edited
Loading

@mattaningram that's basically what I think is also happening. Do you think this is also related to: #38?

Thanks in advance!

@Sananes
Copy link
Author

Sananes commented Aug 12, 2021

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
Copy link
Member

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
Copy link
Author

Sananes commented Aug 12, 2021

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
Copy link
Member

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
Copy link
Author

Sananes commented Aug 13, 2021 •
edited
Loading

@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.
#38

@Sananes
Copy link
Author

Sananes commented Aug 13, 2021

Here's some context too:
image

@Sananes Sananes mentioned this issue Aug 16, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mattaningram @Sananes