Animating only when user starts scrolling for SEO

[guacamoli]

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.

[guacamoli]

This probably isn't a responsibility for this library but would love any suggestions.

[guacamoli]

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

[bluebill1049]

I can see your problem from the SEO perspective.

If you only animate the opacity then it shouldn't cause SEO from stop crawling?

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 help needed

[guacamoli]

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.

[bluebill1049]

initialize useAnimate on scroll do you mean when you scroll into the viewport?

[guacamoli]

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 useAnimate actually sets up the animation.

Meaning that if that condition isn't met, the user just sees the content as if they weren't using <Animate> or useAnimate.

[bluebill1049]

that sounds like something on the app level. why not render the content as normal and detect scroll and toggle to <Animate>

{isTouched ?Animate: 'Content'}

[guacamoli]

Yeah, I'm going to try something along those lines and see what happens.

[guacamoli]

I was able to get it to work with that conditional rendering! Thanks! Closing.