thehaes

Ahhh, I feel so stupid now...I know about clamp (didn't know about wrap though :O), but I was convinced that it clamps the bounds of the container for drag event...I'm really not sure now why I thought that's the case haha And oh my god, big thanks again - I think since first time I used gsap I was focusing too much on visual side of animation, timings etc. and not on the technical side of things. I convinced my company to buy the gsap membership and now I am reading what you wrote and the docs 10000 times in a row now - it takes me more time to understand as I'm not really a mathematical brain and more on a creative side ? Thank you again for patience and help. I assure you this was the last time, as this is EXACTLY what I needed now

Actually, I've been playing some more with this and I've forked your codepen @akapowl I've tried to make it loop, so you can rotate 3d object seamlessly, but it only works in one direction, because my javascript knowledge isn't good enough to check for drag direction. I was thinking about gsap helper function for draggable loop I used before, but I think it only works when there are "items" in container - for example like a slider with multiple divs inside. I tried tu replace "items" with "frame" in helper function, but it doesn't seem to work. Is there any easy way of doing this or it would require some logic like I tried to implement (with checking the drag direction and resetting the timeline when it reaches first/last frame) https://codepen.io/thehaes/pen/wvRaRZa

Thanks! That's actually what I was thinking about, I didn't expect you to do so much for me, so double thanks! I've adjusted your demo to my needs now and it works!

Hey guys, sorry for no codepen this time...I wanted to check if it's possible first and ask if you know any demos that try this approach. I was trying to find any examples but from what I see no one tried to do it yet. While I wait for the answer I am working on a demo. I have a lottie animation - it's a 3d model being rotated 360 degrees. I want to be able to drag on x axis to "rotate" that 3d model, without using any UI element - just simple drag anywhere on the area to start rotating. So first of all, is it even possible to use draggable this way? Maybe there are some demos that show control of lottie with drag on mouse x? All codepens I saw were using scrolltrigger to control the animation, but I can't do that. Maybe observer is also an option?

Hey guys, I have a pretty much working thing here, it's just I feel like I 'hacked' it and it could work better, as it's a little buggy. Basically the structure is like this: 1) I have a nav bar with a toast message that's always pinned on top 2) under it there's a main menu which is being hidden/shown depending on the scroll direction 3) and lastly, I have a secondary menu which is further down the page. It's supposed to be pinned to the top when scrolling through content The problem is that the menu is hiding/showing depending on scroll direction, which makes this a little bit more complicated to calculate when the secondary menu is supposed to pin. The way I did it here is to update the menu height and pass it to the scrolltrigger on update + refresh only this one scrolltrigger (for performance). What I noticed it's acts strangely when I'm scrolling slowly, feels like it's not synced correctly and there are gaps between divs (I've put black background so you can see it better) and sometimes it looks like it's lagging behind to refresh. There's probably some better way to achieve this, I just don't know how.

Thanks for the pen @Rodrigo! This works better for me, I just don't want to pin images themselves while they are rotating so it works more like a parallax scroll. I tried to modify your pen and add y: -(window.innerHeight * i) to image rotation tween to make it fake "scroll", but then it works only for 2nd and 3rd images (the first one is still pinning)

Unfortunately, after trying many times I wasn't able to make it work. It still looks like it's animating every image at the same time instead of each image wrapper acting like trigger for children image. Any idea why? I think I looped through each image correctly. When I turn on markers it seems like positioning is wrong because I'm also moving the left container - is there any way or gsap option to take that into account?

Thanks @Rodrigo The part that's in the codepen you shared works in mine too, what I have problem with is the content inside the left column which I want to animate with another ScrollTrigger. For a moment I just thought it works, but it's not - I fell for an illusion

Ok, it's really weird. I noticed it works on codepen, but not on my build ? Need to investigate --EDIT-- Actually, it's not - I'm so confused lol. It seems the start/end positions are being read incorrectly, not sure about it but it looks like it's animating all images using same trigger, and not separate trigger for each image

I hope the title didn't confuse you lol I have 2 columns in my setup - left one is sticky/fixed (it needs to stay in place) and the right one is long container with text. Inside left column I have wrapper with dynamic amount of images (so the height of container is dynamic). What I want is left column to be synced with right column scroll position (so basically when default scroll position reaches bottom of the page then bottom of the right column also touches bottom of viewport). That works fine. Next, I loop through each image wrapper (which is 100vh) and make them as triggers to animate img inside each wrapper when they enter/exit viewport. That's the thing I cannot get to work, I imagine it's because the left column is already being manipulated by gsap on a container with position: sticky, so it cannot read the trigger start/end positions correctly. Is there any way to make this work? Maybe some magical option I missed in the docs? I thought about containerAnimation, but it appears it was made with horizontal scroll in mind

Actually, just forcing the container animation to complete after checking the refresh event, did the trick! ScrollTrigger.addEventListener("refresh", () => horizontal.progress(1).progress(0)); Thanks again, marking this as solved!

Thanks @Rodrigo for not only solving my problem, but also explaining the issue here, makes it much more clear and hopefully will avoid similar problems in the future as now I know how it works in this case. Also, do you know what would be the best approach to add that pause at start & end? If you scroll a bit faster than usual you will know what I mean. The other way I could think of would be separating pinning and container animation and setting the container animation with some offset so it starts/ends later --EDIT-- Actually, there's still some issue with scale/opacity on the second item when you scroll to the start position. Not sure why the first one doesn't "jump", but the second one does.

Hey guys, I have a simple horizontal container animation - basically each image have scrub scale & opacity animation with start: "left right", but the problem is it's bugged until you scroll to the start position of the scroll trigger, then it jumps to correct positions and works fine even if you scroll before/past it. There some issue with initial view when page loads, I tried immediateRender and some other solutions I found, but I can't get it to work. Also, I was thinking how could I add a small delay at the start and end of horizontal section, so the first/last image has some time to be seen before it scrolls past/before that section. I tried to change it to timeline and add empty tweens before/after, but it messes with the animation itself making it out of sync. Any other way of doing that?

GreenSock saves the day again Thanks, much appreciated! I have no more questions and I leave the answers here for future generations to be.

Actually, I still can't get over one issue and I really don't know what I'm doing anymore. This is the last and only thing I need to make it work the way I want to - I'll try to explain it as best as I can: First of all, I removed the isOver, as I still want to be able to scroll slider loop, while cursor is over the images. The thing I have problem with setting up right is: - when you start scrolling and won't move your cursor, the slider slowly stops as it should (using a touchpad currently, but same behaviour happens on mouse wheel scroll). - this is working good. - but when you start scrolling and move your cursor, it starts to move the slider at continues speed, based on the last velocity value before you moved the mouse - this behaviour only occurs on scroll, the drag works fine I'm attaching a video to show what I mean: https://www.dropbox.com/s/us0q2n29wuxq17t/slider-recording.mov?dl=0 I really have no idea what to change here, I tried using if statement like last time, but it didn't work with this setup. The only thing I found out is that similar behaviour happens on basic browser scroll: if you scroll with mouse/touchpad and won't move cursor, the scroll will get to its final position smoothly, but when you move your mouse while this is happening, the scrolling will stop instantly. So I guess what's happening here is that when you start moving the cursor and scroll stops abruptly, the latest value of velocityY before the stop is being read and it continues to scroll at that value and it doesn't change anymore (normally the velocity will gradually go down to 0). Sorry for bringing this up again, but I really cannot solve it...