_josch Posted January 12, 2022 Share Posted January 12, 2022 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 Link to comment Share on other sites More sharing options...
OSUblake Posted January 12, 2022 Share Posted January 12, 2022 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. Link to comment Share on other sites More sharing options...
_josch Posted January 15, 2022 Author Share Posted January 15, 2022 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. Link to comment Share on other sites More sharing options...
OSUblake Posted January 15, 2022 Share Posted January 15, 2022 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now