-
-
Notifications
You must be signed in to change notification settings - Fork 61
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.
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
Animating only when user starts scrolling for SEO #51
Comments
This probably isn't a responsibility for this library but would love any suggestions. |
Maybe the right question is whether there is a way to update the start styles conditionally based on some other prop when using the useAnimate hook |
I can see your problem from the SEO perspective. If you only animate the another idea is to always show the content from the server side, but start to hide them on Client, then when detecting user scroll event, and content starts to intersect starts the animation. but the animation content has to be deep down the page. so it's not perfect as well. I don't think I have a perfect solution for this, but maybe someone in this community has. I will flag it as |
Hey @bluebill1049, I believe opacity actually does affect SEO still. Basically, google ranks the content lower. I wonder if using keyframes but starting at opacity 1, then moving to 0 at 1% would help this. Is it possible to not spread keyframes evenly if % is given? Also, is it possible to initialize useAnimate on scroll? I'm still getting my bearings with hooks. |
|
Nope. I meant that essentially initializing the animation only when some condition is met. For example, defaulting the animation to not be setup but then maybe some local state changes and then the Meaning that if that condition isn't met, the user just sees the content as if they weren't using |
that sounds like something on the app level. why not render the content as normal and detect scroll and toggle to
|
Yeah, I'm going to try something along those lines and see what happens. |
I was able to get it to work with that conditional rendering! Thanks! Closing. |
Is your feature request related to a problem? Please describe.
Nope.
Describe the solution you'd like
I'm using the library to animate elements on the screen as the user scrolls to them. However, if the user loads the page, I'd like for the animations to not hide the element until the user starts scrolling. This way, google can still crawl the content on the page.
Describe alternatives you've considered
Wrapping the animations in a flag and only using the hooks when scrolling has started.
Additional context
Happy to provide more if needed.
The text was updated successfully, but these errors were encountered: