emjay

Hi @Rodrigo, Thank you for your pen, I need to look at this in detail and follow it step by step. One question, to the official original demo here: https://codepen.io/GreenSock/pen/rNOebyo I went through line by line to understand everything. Correct me if I'm wrong, but aren't the start and end values wrong? They're are calculated this way: start: () => (i - 0.5) * innerHeight, end: () => (i + 0.5) * innerHeight, Because they are determined by the value of i and the innerHeight of the window, the calculations for i = 0 are: start: (0 - 0.5) * innerHeight = -0.5 * innerHeight end: (0 + 0.5) * innerHeight = 0.5 * innerHeight If innerHeight is 300 for example, the start and end values for each indexes / panels are the following: index 0 -> innerHeight: 300 -> start: -150 -> end: 150 index 1 -> innerHeight: 300 -> start: 150 -> end: 450 index 2 -> innerHeight: 300 -> start: 450 -> end: 750 index 3 -> innerHeight: 300 -> start: 750 -> end: 1050 index 4 -> innerHeight: 300 -> start: 1050 -> end: 1350 This would mean that the first panel is shown shorter than the others. Right? I think this would help to fix the start and ending values: start: () => i * 0.5 * innerHeight, end: () => (i + 1) * 0.5 * innerHeight, That would result in the following values: index 0 -> innerHeight: 300 -> start: 0 -> end: 150 index 1 -> innerHeight: 300 -> start: 150 -> end: 300 index 2 -> innerHeight: 300 -> start: 300 -> end: 450 index 3 -> innerHeight: 300 -> start: 450 -> end: 600 index 4 -> innerHeight: 300 -> start: 600 -> end: 750 The second problem I think is the height of the body, which is stretched on the basis of the number of sections. The height is currently calculated like this: gsap.set("body", {height: (sections.length * 100) + "%"}); Because we use the half of innerHeight for the start and end values, i think we should also use the half for the body height, like this: gsap.set("body", {height: (sections.length * 0.5 * 100) + "%"}); I forked the original pen by @GreenSock and added my fixes: https://codepen.io/emjay/pen/KKbexap?editors=0010 What do you think? Thanks, emjay

For the following Pen I modified the ScrollTrigger Demo "Looped Absolute Sections". The new parts are in the function "getSectionTimeline(section)". I want a separate timeline for each section that either starts automatically or is played via scrub. In my pen you can see that I'm trying to achieve this with data attributes. That works but not completely. I can scrub the first section timeline, but the other timeline animations are not visible. Somehow I think it has to do with the different start and end values, you can see that well in the markers. However, I have no idea how I should approach the whole thing differently. Does anyone have a useful tip for me?

Thanks @akapowl, I used delayedCall as described: lastTimeline.play('contentout'); gsap.delayedCall(.25, ()=> dlTimeline.play('contentin')); and changed my logic from the following to use a isAnimating variable, which im setting to true/false: if (lastTimeline && lastTimeline.isActive()) return; if (dlTimeline.isActive()) return; Thank you for all the input, also thanks to @Rodrigo again. emjay

Hi @Rodrigo, Thank you for this encouraging post. It was indeed already like that. Last but not least, could you help me with one more thing? I don't understand why the delay doesn't work. At one point I do the following: lastTimeline.play('contentout'); setTimeout(function() { dlTimeline.play('contentin'); }, 400); However, I only do this because the delay doesn't work, I would much rather use this: lastTimeline.play('contentout'); dlTimeline.delay(0.4).play('contentin'); Why do I need a delay at this point? Because otherwise one text animates over the other. setTimeout helps to avoid this, but with the following code I prevent the user from double-triggering a timeline by clicking quickly. Of course, the .isActive() doesn't work in the 400ms when setTimeout is active. Thats why i would prefer .delay() Do you know what I mean? if (lastTimeline && lastTimeline.isActive()) return; if (dlTimeline.isActive()) return; I think @akapowl had the same problem here, but in my case I think its different. Thank you very much for your time, you are really very helpful. emjot

Hello @Rodrigo, Thank you for your solution, at first glance it looked great, but then I found another problem. Please click the buttons in the following order: 1 - 2 - 2 - 1 (the heading does not disappear) or 1 - 2 - 1 - 1 - 2 (the text does not appear) For the 1 - 2 - 2 - 1 example, at the first click on button 1, dlTimeline.reversed() is true. The second click, after 2 - 2 dlTimeline.reversed() is false. I explicitly set dlTimeline.reversed(true) in the second else, but this won't help. My possible solution is to create a timelines array in line 7: let timelines = []; and push the timeline to this array after all timeline steps are created (line 43): timelines.push(dlTimeline); Then I use onReverseComplete to reset all timelines: onReverseComplete: function () { timelines.forEach(function(tl) { if (tl !== dlTimeline) { tl.seek("start").pause(); tl.reversed(true); } }); } Is this a good solution? Or could it be solved better? https://codepen.io/emjay/pen/KKbzXYa/bff7eaf4c61a41261ee6f5ea12338810

Hey and Hello I have a small problem and have been trying different things for some time. I can only solve the problem if I make the heading visible again in onReverseComplete with gsap.to, but this is not really the best solution. I am not satisfied with it. Okay, let me describe the problem and expected behaviour: I click on button 1, then the headline disappears to the top and the content comes from the bottom. If I click on button 1 again, it goes backwards again. So far, so good. We start again. If I click on button 1, the headline disappears and the content appears. If I then click Button 2, the content disappears to the top and the new content appears from the bottom. Everything is still fine. The headline should not be visible. And no where the problem arises: We start again. If I click on button 1, the headline disappears and the content appears. If I then click Button 2, the content disappears to the top and the new content appears from the bottom. But if I now click on button 2 again, the content should disappear to the bottom again and the headline should reappear from the top. So it's more or less the same as before. Headline visible. But that's exactly what doesn't work. The headline remains hidden. Don't be surprised about the HTML structure, the element works mobile like an accordion. I hope someone can show me where I made the mistake. Thanks emjay

Here is the missing demo pen. Scroll down once to element 2 and you will see that the fixed header disappears and the blue anchor nav docks correctly at the top of the screen. If you slowly scroll back up from element 2, the header will be visible again. The anchor nav moves down nicely accordingly. So far, so good. If you now scroll up further to 3,2,1 JUMP - you will see that the Anchor Nav jumps back to its old position. This is exactly the jump I want to avoid. The start values are completely correct for scrolling down, only when scrolling up they have to be shifted by the height of the navigation so that the jump does not occur. https://codepen.io/emjay/pen/OJrMjad/56b17e4f104193f5beba7a6bbbd30926?editors=1111

Hi @all, I am trying to change the ScrollTrigger start values based on the scroll direction. The background is a fixed navigation that is shown when scrolling up and hidden again when scrolling down. The initial value for scroll trigger is correct, but I don't really know how to change the value when scrolling up again. I've read threads like this one, however in @mikel example I don't have the values of self.direction in onRefresh that I have in onUpdate, however I can't seem to change the start value in onUpdate. Maybe you can help me to untangle the whole thing for me. mm.add("(min-width: 600px)", () => { // Fixed nav stays on top ScrollTrigger.create({ trigger: element, start: 'top top', endTrigger: 'html', end: 'bottom top', toggleClass: { targets: element, className: 'fixed' }, onEnter: () => element.style.height = `${inner.offsetHeight}px`, // prevent jumping by setting a placeholder height onLeaveBack: () => { element.style.height = 'auto'; inner.style.top = 0; }, onUpdate: self => { if (self.direction === 1) { // scrolling down, reset using the original "start" value self.start = self.start + self.trigger.clientHeight; } else { // scrolling up, using the modified "start" value self.start = self.start - self.trigger.clientHeight; } self.refresh(); }, markers: true }); })

Hello @GreenSock, that's really great. Thank you very much for pointing that out.

Hey @Rodrigo @GreenSock, thank you very much for your input this helped a lot, I used the boolean toggle and also dived deeper into the topic of contexts. I also created an autoslide mechanism with setTimeout but have done this outside of the context. var timerHandle = setTimeout(() => context.nextImage(),3000); function resetTimer() { window.clearTimeout(timerHandle); timerHandle = setTimeout(() => context.nextImage(),3000); } Unless you have something against it. Here again is an updated pen, may it help other people who have similar questions: https://codepen.io/emjay/pen/LYmoXYo/ac6e2b9720ddea33973fa37b61082c68

Hello GSAP friends, with great pleasure I read the blogpost about GSAP 3.11. I wanted to test the new matchMedia function with a small project. And this worked great, I was able to implement my small test project. However, I have a problem when I change the viewport in width (scale window) and thus a change from mobile (< 1000px) to desktop (> 1000px) or vice versa takes place. The animations are then directly broken. When I reload the page mobile everything works fine, desktop the same. Only when switching unfortunately not. I think it is related to how I define the timelines. Currently I think it is totally wrong, because with every click a new timeline is created. Of course this doesn't make sense, but when I tried to outsource this, i.e. to create a timeline for mobile and one for desktop, I didn't get a functional result. Now I hope you can give me a hint how and when to create the timelines. So that everything works seamlessly, even without reloading the browser. this is how it looks < 1000px: this is how it looks > 1000px: Due to the different layouts for mobile and desktop, I also needed different timelines to make different animations. But just look at the pen, there you can understand it well. Thanks for your input.

Heya @Cassie, Of course, that makes total sense. I could have thought of that myself. But I didn't question the individual tweens anymore, but played with the durations and different scrub values. And yes, I forgot to remove the toggleActions. Thanks for that hint as well. Have a nice day Cassie. Martin

Hello @Cassie, The next step I wanted to do after the animation was working was to integrate ScrollTrigger. That actually works too, however I can't get the speed of the dots under control. Have a look at the following pen. It looks like it is flickering. Do you have any ideas about this? https://codepen.io/emjay/pen/JjyQyKQ Thanks again Martin

Hello @Cassie, it took me a few days to find the time to read through your answer and create my animation with your input. And I have to say, you've put me on exactly the right track. Here you can find the final animation. I am happy with it. Do you see any potential for improvement? https://codepen.io/emjay/pen/eYEwWKz Thanks again for your input

Hallo, I am trying to implement the following with GSAP: I have an SVG graphic with dots, you can see the file in the embedded pen. I would like to move these dots to the top right. (see example-1.png) The white area is the viewbox of the svg file. When moving to the top right, new dots should appear at the bottom, of course. Since I plan to make the whole thing endless, the question is how to accomplish this. Do I animate the path of each dot in a timeline from bottom left to top right and then bring it back to the start position at the bottom left when it is out of the viewbox with .set()? In the second image (example-2.png) you can see that I also plan to make the dots smaller before they leave the viewbox. So that there are no clipped dots when they move out of the viewbox. Of course the same goes for the dots coming back in from the bottom. At the end it would be great to scroll this timeline with scrolltrigger. But basics first. I would appreciate some input on how best to proceed. Thanks a lot in advance Martin example-1.png example-2.png

Hello @OSUblake, Ah thanks, I wrapped it with defaults: {} now Good to know. For future readers of this thread, I created a new fork with your input and suggestions: https://codepen.io/emjay/pen/yLoyQvv So Thanks for helping me out. Also Thanks @Cassie Martin

Hello @OSUblake, I used your approach to change my JS code: https://codepen.io/emjay/full/yLoyQvv There was a difference in your animation to mine. I'm using from so I had the same problem as in my pens above, that after coming from mobile to desktop, the notice box was hidden because of the inline styles. So I had to use gsap.set(".notice", {clearProps:"all"}); in my Js Code on line 11. With this line it works good I think. But is this a good approach? Thanks, Martin

Hello @OSUblake, thanks for your response, I will take a look at it. Sorry with the Private Mode of my pens, i made them all public now. Martin

Hello Cassie, I have now added immediateRender and everything looks fine on the initial load to the page, but now the animation in the mobile viewport is broken. I have the feeling we are on the right track. Do you have another tip for me? https://codepen.io/emjay/pen/6dd272ada7b0cd2dd04563a1f1a3f56c reset-animation-on-desktop-3-smol.mp4

Hello Cassie, I have reworked my pen and used your media query listener. I also created the animation and the click event of the button outside of it, because otherwise it was registered again with every match. You can see this nicely in my last video, how the animation then runs multiple times. https://codepen.io/emjay/pen/746ffb6ec9b52f5a7bc50ade36552449 Now the change from Desktop to mobile works great, also multiple times. The inline stylings are removed on desktop and the box is visible again. But, now I have another problem. On initial load the box is not visible on the desktop, only when I was once in the mobile viewport and then switch back to the desktop. (please see the attached video) I guess this happens because clearprops is then triggered and removes the inline stylings. Now that I'm writing these lines, I think an immediateRender = false might help me. I'll try that. Martin reset-animation-on-desktop-2-smol.mp4

Hi Cassie, thanks for your solution, I added it here: https://codepen.io/emjay/pen/fb1a4f84e6a6cada4aa2d006fd2e3340 But it doesn't always seem to work. Take a quick look at the following video. If Im going from desktop to mobile and again desktop to mobile, the button doesn't work anymore. Thanks, Martin reset-animation-on-desktop-smol.mp4

Hi, i have created the following Pen to discuss a little problem I have right now. I want to animate an notice box via gsap at resolutions below 800px. With larger viewports the box should not be animated at all, but simply be visible. If I load the page with a viewport larger than 799px then the box is visible and everything is fine. If I load the page with a viewport smaller than 800px the box is not visible and the gsap animation works fine. So far so good. But if I now start with a resolution < 800px and then drag the viewport larger, the box is no longer visible from 800px. This is caused by the inline styles added by gsap. How can I remove them on the desktop without the animation not working mobile anymore? I have tried various things, but I can't get a correct result with any of them. noticeAnimation.pause(0); gsap.set('.notice', {clearProps:"all"}); document.querySelector(".notice").removeAttribute('style'); I hope someone has a tip for me how to get it working.

Hello @GreenSock, that's really great, thanks for the clarification. I'll come back with the final result soon. Thanks and Happy Tweening!

Hello GSAP friends, I am currently trying to implement the following: A video is displayed in fullscreen after opening the page, and then when I scroll or when the video is over, it should move to its actual position and size in the header. The whole thing of course only once, when I scroll up again it should stay at the end position. For the beginning I tried to move the video to its end position while scrolling. First only with gsap.from(), because I didn't achieve any significant result, I tried it now with the new FLIP plugin. With this I get it to work halfway when I click the second time. Please have a look at my example. Click once in the viewport and the video is in fullscreen. Then click again and you see what I actually want to achieve. (That the headline overlays the video I want to solve later so that it fades in from the left as soon as the video has reached its final position). And now I hope you can tell me how to do this in combination with ScrollTrigger. I haven't reached the solution with flip yet, so you have to click twice. Thanks for your help Emjay

Hello @mikel, thanks again very much for demonstrating your solution. In your last example there is a little problem. On hover the div's are not visible. Thanks, Emjay