Its_Lefty

Hi there! I hope you guys don't mind commenting on an old post. I really like this example, nice work! However I am struggling to understand the code. What I am trying to modify is this: In the example the pinned image is going to change as soon the new 100vh section is completely visible in the viewport. But I need the image swapping earlier. So for example as soon the headline of the new section is entering the viewport, the image will swap. Is the correct approach to change the trigger to h1 within the ScrollTrigger (I guess I need a loop for each section then?) or should I just modify the start and end values? So far I've tried both without luck so if you could guide me into the right correction, it would be awesome.

Perfect, thanks a lot, GSAP is the best.

Great, thanks! No, I want to keep the staggering, your pen is like I expected it to be. I mean only that there is a delay of the reverted timeline due to the staggered post items. Let me try to explain: If you open the overlay on desktop, resize the window and close the overlay, post 1, post 2, etc. are still in the timeline animation although they are not visible so that you are going to have a delay until the menu items are staggering back. Hard to explain and english is not my native language. So I guess I need something like a resize event. This is not important though because almost no person will click like that.

Yes, thank you very much! I've never used labels before so I'm trying to understand the code. Just one last issue: Now the menu and post items are starting at the same time. Before each of them were staggered one by one. I've tried it by putting your tl.add("stagger"); below the tl.fromTo(".menu li span", { https://codepen.io/ItsLefty/pen/zYaBepd Now it is working again. But if you resize the opened overlay to the small breakpoint and close it, the post items still have a staggering animation which is not needed. Is it possible to fix this, too? If this is too difficult, no problem though. I agree to @mvaneijgen that normal people won't resize and click like that.

Awesome, thanks a lot! Just another question: If I open the overlay and resize the window below 992 Px GSAP resets the values to the default state so that the overlay is not longer visible. This is also mentioned in the video at 7:50 (although it's a different scenario here). Is there a way to always keep the overlay opened until it is closed by the button? Do I maybe need the return () => { cleanup function here?

Hi there! I am currently trying out the new gsap.matchMedia() (thanks for releasing this!). I have trouble understanding how to use it in my timeline (since I'm really bad with JS): If you click on the toggle a menu and a post-list will appear. On mobile I don't need the post-list stagger-animation because I am going to hide the element completely. How can I exclude the .posts li span from the tween on the given breakpoint? Before, I was using 2 separate timelines with mm.add("(min-width: 992px)", () => { and mm.add("(max-width: 991px)", () => { but it felt like a overkill because just this one tween is different. Thanks in advance!

Hi there! This is my code for opening a fullscreen overlay with GSAP: var tlHeader = gsap.timeline({ paused: true, reversed: true }); tlHeader.set('.header-post-wrapper, .menu-item a', { y: 50, opacity: 0, }); tlHeader.to('.fusion-flyout-menu-bg', { duration: .3, backgroundColor: 'rgba(0,38,85,0.96)', y: 0, autoAlpha: 1, ease: 'power4' }); tlHeader.to('.fusion-flyout-menu', { duration: .3, y: 0, autoAlpha: 1, ease: 'power4' }); tlHeader.to('.header-post-wrapper, .menu-item a', { duration: .5, y: 0, opacity: 1, ease: 'power4', stagger: 0.1, }, '-=.5'); var btnToggle = document.getElementById('burger-toggle'); btnToggle.addEventListener('click', () => { tlHeader.reversed() ? tlHeader.play():tlHeader.reverse(); }) Everything is working fine except this: If you open the overlay and click on a link in order to change the page and afterwads navigating back to the page using the browser back functionality, the overlay is still opened which is obviously not desired. How can I fix this? I'm not sure if this is really GSAP-related. Thanks in advance! ?

@mvaneijgen Sorry to bring this up again, but is it possible to always display one decimal? So that it displays for example 42,0 instead of 42. I've read about toFixed(1), but I don't know how to implement it here.

Awesome, thanks a lot! Working perfectly!

Yes. I know it seems a bit odd. It was more of a general question. For example if I have a fullscreen draggable section and there is something like a phone number, which you want to select. I've tried simply adding user-select: text and cursor: text to the element but obviously this didn't work and I guess you need JS here. By default there is no such option using Draggable, correct? Here is a Swiper JS example: https://codepen.io/ItsLefty/pen/YzazPOr

Hi there! With Swiper JS you can wrap your text with a span element with class swiper-no-swiping to disable swiping on the text and allow selecting it. Is this somehow possible with GSAP Draggable? Thanks in advance!

It is working now. The timings might need some adjustments though and I will have a look at the toggleActions. Thanks for your help! @mvaneijgen I need to add one decimal place (for example 100,5). I've modified the code using toFixed(1) but something is wrong now with the counting (I hope you don't mind me asking since it's not really GSAP-related): https://codepen.io/ItsLefty/pen/mdxbGKx

Nice, thanks a lot and for explaining the issue! Would it be possible though to increase the number dynamically along the scroll-section (start to end marker) like mikels pen? So that if you reach the start, the number starts at 0 and if you keep on scrolling until the end, the final value will be displayed (if you scroll back it should be reversed).

Hi there! I'm trying to integrate a continuous count up / down of multiple numbers (each of them with a specific value) on a horizontal scroller (based on a pen by @mikel) Since I'm still learning JS, I am struggling to integrate the sample code to my project. At the moment nothing happens at all. The console log says that the var numbers are not applied to the timeline but I don't know how to exacly re-write the code. Sorry if the code is a bit messy, the count part begins at line 46. Thanks for any help! :)

Thank you for the example! My pen above your post is already using draggable (thanks to examples from akapowl). My question is though, if I can just deactivate the fake horizontal scroll with the mousewheel and only have the Draggable movement. ScrollTrigger should still be included though, so that the animations fire. All of the other examples using ScrollTrigger and Draggable in combination make use of the fake horizontal scroll so I'm not sure how to do this. Additionally I'm thinking about using matchMedia to switch between fake horizontal scroll on desktop and draggable at a specific breakpoint. I'm trying to do it this way, because in my opinion it feels a bit weird swipeing vertically in order to move horizontally. I guess this is hard to implement for a beginner like me, do you know of any examples using this? Atm I'm reading this topic with a similar approach: