katling

Hi, thank you very much, I will try to restructure everything again.

Hi @Rodrigo thanks for the quick response, I tried it out, and it helped a lot! And I understand and reread the most common mistakes again! Still I have one question left, since I dont know how to fix it. I separated it from the other timeline, but I'd like to make it an animation without the need to scroll, so that it just happens after clicking the button AND if you scroll back it reverses. I tried out to store the animation into a variable, and use the reverse(); function but I dont know how to link it to the scroll back interaction.. since this is linked to the scrollTrigger, which wouldn’t be defined when I would just use gsap.to();. Also the whole elements of the menutimeline just appears by scrolling down again, which confuses me (in codependent demo it doesn’t show again, just in my browser). Sorry for asking so much and if making any trouble.. Im really thankful for your support. I have the code here (button only for the OMELETTE, fishfunction not defined yet) https://codepen.io/Katling/pen/GRLWzrr

Hello @Rodrigo, thank you very much for the fast response! I'm quite a beginner with programming and GSAP in general, so sorry for asking again. I didn't know that, I shouldn't add all the animations in one timeline. So as I understood your explaination correctly, I should just make a new animation (not timeline?) for every animation, right? So then I need to create always a new scrollTrigger, and and make it reverse if it comes to toggleActions, so that it plays backwards when scrolled back up again? I thought I need to create a timeline, since I pinned everything to a specific background and wanted to have the scrubbing. For the scrubbing I took a high value, because it didn't seem to change anything anyway, but maybe I just missed something out (like the markers, that don't show for some reason). I changed the demo code, and made everything colored.

Hi, I'm quite frustrated, and I might did something wrong with my whole code.. I am trying to make a scrollytelling project, and I wanted to trigger certain animations by clicking a button, and make all the other elements of the rest of the website appear on the bottom part of the whole page, depending on which button got clicked (2 buttons, you can select from) My problem here is, that you click the button, the whole thing doesn't fire directly 1. you need to be at the very end of the document, which makes sense to me, but the bigger issue here:, 2. if you wait more than 3 sec before you click on one of the buttons, the whole thing doesn't animate, it just appears. 3. I thought, I could make the other elements appear, by clicking the button, so by scrolling it behaves like the things before. Instead, it just fires everything at once. Or animate it without the need of scrolling. I tried to use only gsap.to();, but the problem here is, that it doesn't revert by scrubbing. Also by defining the ScrollTrigger with the scrubbing, it doesn't make any difference, which value I use and the markers don't show up either..