_josch

Hey akapowl, thanks for the reply. I definitely don't expect anyone to do any work for me - you guys just like helping out people and that way I wouldn't even learn anything on my own. A nudge in the right direction is perfect! I very much appreciate this forum. For anyone having the same issue - I've tried for multiple hours and came to the conclusion that the solution is very simple.. Instead of a onLeave and onEnterBack function etc you just need a simple "gsap.fromTo" which moves the yPercent from 100 to 0. Not really sure why this works to be honest but it does! Don't forget to apply a higher z-index to the overlapping section amd a margin-top of -100vh. The issue was that the original method did not recognize the animation had a length, but instead moved the following section over as soon as the animation started (which could not be changed by adjusting the "start" property". The end result: https://gyazo.com/0936526e8316ede2ed6aedb62bffdec1 Hope this helps and have a great evening!

Hello akapowl, I completely understand & respect that there's no time for making a tutorial on each effect someone wants to recreate. I'll refrain from asking similar questions in the future. I've read the Forum Guidelines and figured this question counts as "wondering why GSAP behaves a certain way" since everything should have worked from my understanding. Thanks very much for the linked resources, I'll try to work something out

Hello! Just like in this example https://codepen.io/GreenSock/pen/KKpLdWW of layered pinning, I'd like to achieve the same effect on my site. However, applying the code principles of that codepen didn't work out for me and caused weird behaviour in my site: https://gyazo.com/0b5f5d602ae194bd87cf6bc0c45982b5 it didn't render the background and started way too early. My thinking is the following: When the animation is done, then the outro section scrolls into view like this https://gyazo.com/74979ae4930b049ad5c10dad9c3ea7bc So, when the top of the outro reaches the bottom of the viewport (as soon as the animation is done), the before pinned section should be pinned again so that the outro with a higher z-index can scroll over it. That didn't work. Then I tried the same thing using a onLeave function, so as soon as the user leaves the finished animation, the container of the animation gets pinned so that the outro can scroll over it - that also didn't work. Then I tried animating the outro by moving it from yPercent -100 to yPercent 0 when the animation finishes, that also didn't work. I'm aware it's probably not the pin & "start"-property that's causing this issue but much rather my way of trying to implement this feature, just don't really know why it's behaving this way. I attached a minimal codepen demo, maybe someone knows what's the issue and why the thing that should work in my head doesn't really work. Thanks

That does clear things up, thanks for the good explanation! Also, didn't notice that I was using older versions and have updaten them both.

Thanks for the reply, that was actually the problem! I've now devided the heading and the canvas into 2 different sections and the problem is no more I must've actually missed the endTrigger bit. Since I'm quite new to gsap / scrollTrigger: is it best practice to write the endTrigger this way: "end: "top 15%" or is there a better way to write this? Because I saw some people calculate the ending with end: () => ... and was wondering why they did this and if it provided better responsive qualities. Thank you akapowl very much for taking the time out of your day to answer my question, I highly appreciate that.

Hey akapowl, While making the demo I think I found out what the issue is. In order for the title to be visible, the content needs to have a defnied height, of say, 100vh. However, as soon as the title reaches that end and the animation is not finished yet, it abruptly cuts off because the section is over / there is no more space for the animation. It does not go into the next section, e.g. the slideshow-body-content, which it should. That becomes apparent when giving the container of the headline a height of 150vh, where there is enough vertical space for the animation to finish before the next section is reached. For some reason, in the codepen I made to demonstrate to you what's NOT working, it is working and I have no idea why: https://codepen.io/jorsch/pen/QWOLmYa I hope you understand what the issue is and maybe have an idea how it could occurr. Thanks!

Thank you very much @akapowl and @_Greg _ for the replies! The video explaining position parameters was very informative! Cassie's explanation of the delays was also very helpful because I didn't know that the duration was linked to the scroll position on scrub. One weird thing I've noticed after applying the code principles you've used in your CodePen is that the heading animation gets "cut off" by the following section like this: https://gyazo.com/045c4b07984cc23d0e097b66de98d438 So instead of coming close to the following animation and fading out, it seems like the following section just "slides over it". I've tried using the z-index to fix this issue in CSS, however that approach did not seem to work - do you have an idea why this occurs? Thanks again for the reply, it was a great help not only for this project but also for the coming animations!

Hello! I am trying to achieve this effect: https://gyazo.com/477dc2ab463c6e8b6f58796a9d261799 When scrolling down a section, a title appears in the middle of the screen and fades out after a while and as soon as the animation starts. This is what I managed to achieve: https://gyazo.com/5a03349a7ebe86097397ddf9734374d7 I've experiemented with the z-index, with pinning different stuff but could not get close to achieving the effect mentioned above. How do I get the title to go way closer to the animation so that when the fading-out of the title ends, the very next moment the animation already starts? I've read about layered pinning and pinSpacing but am not sure if that's what is needed here. I tried making a minimal codepen here: https://codepen.io/jorsch/pen/yLzmdMv but did not manage to get the animation canvas inside because the folder with the images is just on my PC. This code is running the animation of the pipe after the headline: https://gyazo.com/3467bcd6a668ab38b4fb4340e7bab713 And the code that handles the Heading Animation is inside the codepen. Thanks for reading and maybe someone knows how to achieve the effect mentioned at the start of this post. Cheers!

I wasn't aware that you could also use the "fromTo" on a timeline, that's a great thing to know for the future - Thank you very much for the tips!

Hello OSUBlake, I made the minimal demo here: https://codepen.io/jorsch/pen/OJxeYbL Hopefully that clears things up a bit!

Hello! My current animation is almost exactly like it should be, yet I would like it to a) end up in the same y-value it was before, just slide up to that spot. Currently it's moving from it's original value up 25px and thereby above where it should be. b) have the animations start shortly after another so they run almost simultaneously, not one after another. The code (screencapture because for some reason I dont have any more file size here) https://gyazo.com/999d0beaf6d7f73e27549bdbf001ced2 How would this be achieved with ScrollTrigger? Thanks!

Thanks for the answer @OSUblake! Instead of animating the pin I split up the animation in 2 different timelines, and because I'm new to JavaScript and GSAP I'm wondering if that's an optimal way to do it? It definitely results in the diresired animation. This is the screen capture because of the file size limit I can't upload it here as a png: https://gyazo.com/f21f698b7ba3b7fab84a07e922b36467 Thank you for your help!

Hello! Does someone know why it's not possible entering a y-value other than 0 in this code (picture 1)? It's a rather simple animation, the title should move up on the y-axis as the user scrolls. However, when entering a value for y, this error comes up (picture 2), x-values work however... What's weird is that a rather similar animation just below that works perfectly fine with y-values (picture 3). Does anyone know how to fix the issue of not being able to work with y-values in the first animation?

I found the solution, it is the same as "onReverseComplete" if anyone ever has the same problem

Hello, thanks for taking the time to read this post! The animation is working perfectly the first time it's played. When the user scrolls into the section for the first time, the title is revealed through opacity. However, once the user has scrolled past the section once, the title's opacity is permanently visible. Toggling it via toggleClass would not be possible because that would override my fade-out animation at the end. The animation for you to see: https://gyazo.com/a039115c24884cd24e12cf45fac2ff97 The class of "title-vis" (means title is visible) should only be removed, if the user scrolls above the section again. Is there a function to make that happen in GSAP? Didn't find anything like that on the Forum.

Changing the name on the const.addListener worked! I didn't realize this was the problem, thank you very much and I wish you a great day!

Thanks @akapowl for the answer! I looked at the codepen you mentioned and have also tried to paste the code into the javascript file that controls the title animation (picture 1), as well as my index.js (picture 2 at the very bottom). Yet, the outcome on the page is still the same. I've also tried pasting the //setup from the codepen into the top of my code, yet it says "Scrollbar is not defined".

Hello! For whatever reason, the markers we can enable inside the ScollTrigger object are not working. To be exact, they scroll faster than the website and thereby are out of viewport very soon after scrolling. They don't stay "fixed" in the start and end position, e.g. "top 50%", but move on the y-axis faster than the viewport. Also, the start and end of the trigger are not shown, just the markers on the right hand side. This gif illustrates what's happening: https://gyazo.com/3885ea42b9197cc5c27b7b67fe4638ee Anyone has an idea what the reason could be? Much thanks! _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.

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