Is there a best practice for multiple elements?

[jrhager84]

Please forgive my ignorance, as I'm used to setting up an array of elements for the Intersection Observer API, and I'm not sure if that's the route to take here with motion and this package. Any resources or assistance would be greatly appreciated.

I just have multiple elements that I want to add props to (e.g. 'up, down, fade, slide, etc') on different elements so I can use the same observer for all of them, just passing those animation types in each element.

Thank you so much!

[thebuilder]

You should just use the library, creating a new hook for each element you need to observe. The library will reuse existing Intersection Observers as long as they have the same settings (threshold, etc).

Not sure I follow how you intend to share props between different elements?

[thebuilder]

It sounds like you are trying to over complicate it.

Your example would look something like this:

<AnimateIn animation="slide-left">
    <h1>ONE</h1>
    <p>We are *not* staggering this.</p>
</AnimateIn >
<AnimateIn animation="slide-up" staggerChildren>
    <h1>TWO</h1>
    <p>We are going to stagger this.</p>
    <p>We are going to stagger this.</p>
    <p>We are going to stagger this.</p>
</AnimateIn>
<AnimateIn animation="slide-right">
    <h1>THREE</h1>
</AnimateIn >

The <AnimateIn> component would handle its own useInView, and trigger the animation as needed.
For your usecase, combining it with https://www.framer.com/motion/ would make a lot of sense, since it can handle triggering nested animations and variants (like your slide-left, slide-right).

[jrhager84]

So does the useInView create and manage its own refs?

[thebuilder]

Yes, you just have to assign it to a an element, and it will do the rest.

[jrhager84]

Then if definitely seems as though I missed the entire point of this. That's the issue I was facing - Creating and managing the refs of every element outside of the component seemed ridiculous to me. The fact that I can use the ref of inView to automagically create a ref is exactly what I need. Thanks! I'll dive in tonight! :)

[mcgrealife]

Very helpful example – thanks as well!