Its_Lefty

@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:

Hi again! I tried to combine the fake horizontal scroll with GSAP Draggable (without inertia) and it is working. I have a section where the horizontal scrolling part is very small. That's why I'm thinking about removing the fake horizontal scroll and just use the draggable option instead. Is there an easy way to just use the draggable option and remove the fake mousewheel scroll? I hope you guys don't mind to ask here again or should I open a new topic? https://codepen.io/ItsLefty/pen/YzEbOBy

I see, I didn't expect to need something like a if-statement here. Thanks so much, I'm happy!

Thanks again for your patience, it helped me a lot. It is working now. 🙂 One last issue with the start of the text animation: would it be possible to set the start of the text-animation accordingly to the pinned container position? So that the text animation starts as soon the container is pinned (it starts too early atm). I've tried setting the pinnedContainer parameter but it didn't help. https://codepen.io/ItsLefty/pen/QWOPwNO

I've just additionally tried this by adding another .to animation in the forEach part of the code and setting the appropriate pinnedContainer property. I'm using the .active class to trigger the text animation. Unfortunately it's not working correctly (the animation is only triggered once and also not reverting). Is this the correct approach? Here is my attempt: https://codepen.io/ItsLefty/pen/YzEgBOv

Very nice, thank you again, especially for additionally commenting the code! As I'm not a developer primarily, it is sometimes tough to accomplish the desired result. But I am definitely going to invest more time in reading the docs and atm I am watching the Vimeo-Videos, thanks GreenSock! 💚

Hi there again! Can you tell me how to modify the code so that the ending position is exactly after the last image? I've tried playing around with the padding-left value and the maxWidth in the JS but I'm struggling to achieve it. 🙁

That's perfect, thanks a lot for the video and the CodePen! I wish I could mark both of your posts as the solution. 😅