Integrating a GSAP-Scroll animation into a website..

[_josch]

Good day!

I saw a YouTube Video and LOVED the concept of what was talked about - the creation of the website from "ferrumpipe". 

You see, creating a Scroll Animation such as the one from the AirPods, where you draw an image sequence onto a canvas on scroll is good, but there's one problem with it. 

 

How do you go about adding a section above and below it, so that the user scrolls into the section, sees the animation until the end, and then goes onto the next section?

 

The way they do it on their website is by keeping the canvas inside the viewport through continuously transforming it according to the viewport as seen here: https://gyazo.com/868b3ef3481d082c4cc2fe9587861f6b

 

If the canvas position is for example fixed, it will just float above all the other content and look awful. The creator of the video, Cuberto Design, wanted to release the source code of exactly what I'm asking in this thread on their patreon, yet that doesn't seem to exist anymore. 

 

This is my animation (hard to see due to contrast but working): https://gyazo.com/a8321879636882bf90593446f4d70ff1

The user does not scroll into the section, see the animation to the end, and then goes on to the next section - but rather just scroll over it. 

 

I hope I could explain the problem well and would be very thankful if anyone knows how to achieve this or by chance even has the source code. 

 

Much thanks! 

_josch

[OSUblake]

Hi _josch,

 

As we state in the forum guidelines we don't have capacity to investigate, recreate or explain how to create custom effects found on other websites.

 

We are more than happy to answer GSAP-specific questions though. So if you give this effect a go yourself and get stuck in the process, feel free to post a minimal demo here and we'll give you some advice on how to get closer to your goal. Everything on that is possible with ScrollTrigger, it's  just a matter of some pinning and layering.

 

1 hour ago, _josch said:

The way they do it on their website is by keeping the canvas inside the viewport through continuously transforming it according to the viewport as seen here: https://gyazo.com/868b3ef3481d082c4cc2fe9587861f6b

 

And it looks like they are transforming it because of they have some sort of smooth scrolling going on, which translates everything up.

 

[_josch]

Hello OSUblake, thanks for the response. I completely understand.

I managed to get the source code and thereby learn exactly how they've done it.

 

 

[OSUblake]

Nice! And you're more than welcome to post or share a link to it as I'm sure other people could learn from it.