pls help! re: "INVISIBLE" SCROLL

[yotamik]

dear community!

 

i’m looking for a method using GSAP to code a page using the same effect as in the example (wetransfer ideas report) below.

 

https://wetransfer.com/ideas-report/2021/intro

 

i would like to have a scroll–based animation, triggered by invisible elements that are still scrollable – in order to create a scroll-based animation that does not show the actual process of scrolling (similar to a presentation).

i have achieved this affect already, by combining CSS scroll snapping to elements that were used as animation triggers. however, it rendered my webpage inaccessible to the pointer (when there was a link, it wasn’t clickable because the trigger elements were opacity 0 on top of the content – that was the only way to keep them scrollable).

See the Pen qBxgjRo?editors=1100 by yotamik (@yotamik) on CodePen

[Cassie]

Hey there -

This kind of thing is usually triggered by events, not actually scroll.

Take a look at the example in the docs here

https://greensock.com/docs/v3/Plugins/Observer

[yotamik]

Thank you for your recommendation!

 

Currently trying to learn how to use Observer but there aren't many tutorials around.

[Cassie]

So observer just make it a little easier to observe events - what you do/trigger with those events is up to you!

Here's a video that covers how it works.