1

My goal is to create an absolutely positioned div as the background of the website and the parent of the ScrollMagic scene. By doing this, the title and other content can appear above the scrolling/animated background. However, I found that when using ScrollMagic on a div with absolute positioning, the scroll behavior only works when indicators are added using the addIndicators plugin.

Here is an example:

https://codesandbox.io/s/elegant-sound-x3gop?file=/index.html (without indicators, no scrolling) https://codesandbox.io/s/ancient-https-iop96?file=/index.html (indicators added, has scrolling)

Is there any way to fix this problem and use the absolutely positioned div as the background without having to add indicators? Or if this is not possible, is there any other way to achieve the same effect where the title appears above the scrolling/animated background? I previously tried making the title absolutely positioned instead, but this did not work because I also wanted to have more content further down the page that would also appear above the background, but it was hard to format with absolute positioning on the content instead of the background.

Anchey Peng
  • 71
  • 1
  • 3
  • We at GreenSock don't recommend ScrollMagic. Instead we recommend the official scroll plugin: [ScrollTrigger](https://greensock.com/scrolltrigger/)! It's better in every way. Most likely you can find something similar to what you need in [the ScrollTrigger demos section](https://greensock.com/st-demos/). – Zach Saucier Feb 02 '21 at 19:39

0 Answers0