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?