Unexpected scrolly not-sticky behavior

[mholper2]

Hi,

I am quite new to html and coding so I might be asking a very basic question.

I want the scrolly animation to be not-sticky, so it should animate but scroll up with the rest of the window. However, I want the animation to be contained within its container. When set to sticky: false, the animation overlaps all other elements below and above on the page (like the container with the text you see in my screenshot.

When I set the sticky variable to true the animation stays inside its box but is sticky and that is not what I want.

Can anyone help or is this a use case that scrolly-video was not intended for?

regards,

michel

Here is some of my html:

<script type="text/javascript">
      new ScrollyVideo({
        scrollyVideoContainer: "scrolly-video-heroportrait_small",
        src: "wp-content/themes/merivian/gfx/Merivian_hero_portrait_small.mp4",
        cover: true,
        sticky: false,
        full: true,
        trackScroll: true,
        transitionSpeed: 8,
        frameThreshold: 0.1,
        useWebCodecs: true,
        debug: false,
        setPercentage: 0.5,
      });
      new ScrollyVideo({
          scrollyVideoContainer: "scrolly-video-heroportrait_big",
          src: "wp-content/themes/merivian/gfx/Merivian_hero_portrait_big.mp4",
          cover: true,
          sticky: false,
          full: true,
          trackScroll: true,
          transitionSpeed: 8,
          frameThreshold: 0.1,
          useWebCodecs: true,
          debug: false,
          setPercentage: 0.5,
        });

</script>

[dkaoster]

Can you try setting cover and full to false too?