Replies: 1 comment
-
This discussion was automatically locked because the community moved to a new site. Please join us at vercel.community |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Summary
I'm testing a super simple embra carousel + framer motion component that animates a maximizable photo from the center of the carousel to the full size of the screen. The issue I'm having is that on initial render there are no window dimensions and getBoundingClientRect() values for the div being provided and the animation simply starts from 0 coordinates.
What I tried:
When I ran npm run build and npm run start on my PC what's weird is that the bug exists only the first time the page is opened after the server boots. And no, not the first time I open it - the first time it's opened by anyone, and then no matter who opens it (different devices,browsers, cleared cache etc) it works as expected and all the values are provided on initial load.
So what my limited technical knowledge tells me this has something to do with cold starts, but I have no idea.
Here's a link to my github repo with my simple component:
https://github.com/thetanaz/gallery-test
And the example website that is the gallery-test hosted on vercel will be linked in the example section
Example
https://gallery-test-nine.vercel.app/
Steps to Reproduce
Open the website and click on the gallery to maximize a photo. The animation does not enter from the proper coordinates (the center of the carousel) because there are no viewport dimensions and getBoundingClientRect() values.
Beta Was this translation helpful? Give feedback.
All reactions