the-pudding/sleep-training

Intersection observer API as reusable helper

Closed this issue · 3 comments

tomvaillant commented

How could I set up a helper that uses the intersection observer API to calculate when the component from which it is called is in viewport, returning true to then toggle animations.

matthewfdaniels commented

could you give an example of this? i think your code is setup to this already.

tomvaillant commented

Of course!

  1. I'd like the video in the Video.svelte component to start autoplaying once it is visible in viewport (not once the component is mounted)
  2. Similarly I'd like to start the fly in animation of the Mosaic component images once it is in viewport.

Thanks :)

matthewfdaniels commented

it might depend on where that component is. this variable active will turn true when the step is in view

image

but if you're working on the sticky component, you'll have to use the step variable and wait until it turns a certain value. once it does, you'll trigger something in the video component (to either create it or start from zero or play it)...same thing with mosaic...waiting for the step and then triggering a behavior.

flyfade animations require a bit of nuance because they only trigger when the element is created/removed. you can get around this by using the {#key}
https://learn.svelte.dev/tutorial/key-blocks

happy to pair code with you on this!