One Pager with the same instance over and over again

[dwd0tcom]

Hey everybody,

what a great library! 👍 I'm building a pretty long website where it should animate e.g. an image again when it comes inside the viewport.

I have this HTML setup

<div class="img-sticky">
  <img class="img-fit"  data-src="assets/images/station-1/bg.jpg">
  <img class="img-fit img-stack to-right deckkraft" data-src="assets/images/station-1/back.png">
  <img class="img-fit img-stack to-left deckkraft" data-src="assets/images/station-1/front.png">
</div>

So what I tried to use direct: true, but this did not work. So my next guess is the callback feature but I can't figure out how this works 😢

This is one of my instances

  const deckkraft = basicScroll.create({
    elem: document.querySelector('.deckkraft'),
    from: 'top-middle',
    to: 'middle-top',
    direct: true,
    outside: (instance, percentage, props) => {
          console.log('viewport is outside from and to')
     },
    props: {
        '--o': {
        from: .01,
        to: .99
        }
    }
  })

Which way would you suggest?

[dwd0tcom]

Wow, this was easy.

I created a loop for each element and used direct: true on each. Pretty easy. Love the work of you!

document.querySelectorAll('.deckkraft').forEach((elem) => {

    basicScroll.create({
        elem: elem,
    from: 'top-middle',
    to: 'middle-top',
    direct: true,
        props: {
            '--o': {
                from: .01,
                to: .99
            }
        }
    }).start()

});