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...

Thanks @GreenSock Sorry if I overused your help, I just spent much time trying to figure this out before I came on the forums and I felt like I was running circles and not knowing what I'm doing anymore. Now it's much more clear and I'll continue on my own from this point, thanks again!

Hmm, it's really hard to inspect the code from devtools and troubleshoot. There's a nice working example of barba & gsap here: https://stackblitz.com/edit/web-platform-j6l93d?file=js%2Fmain.js If you could make a demo of your site on stackblitz that would be so much easier. Also you can check that example above and see if it helps to adjust your code to look similar. Another thing I noticed you have "sync: false" in wrong line, it should be inside transition object like this: barba.init({ transitions: [ { sync: true, async leave(data) { const done = this.async(); $(data.next.container).addClass('fixed'); pageTransition(); await delay(1000); done(); }, }, ], });

I noticed you're using barba from unpkg cdn, I remember I had some issue with it and it wasn't working for me until I changed to this one: https://cdn.jsdelivr.net/npm/@barba/core@2.9.7/dist/barba.umd.min.js Can you replace it and give it a go?

I'm not sure if this is what you're going after, as you didn't explain it that well what you're trying to achieve (sorry for being straightforward :P), but from what I can see you're using sync mode, so probably you want both animations happen at same time, and you see some annoying flicker, and other animation doesn't play correctly, right? In sync mode, you neeed to handle the positions absolute/fixed of barba containers yourself, as they will show at the same time in static position, the next page container will be next to the old one (which will be out of screen), until the previous page container disappears (after first transition is complete) and the new container will show in position of old one - just imagine two divs, that have width of 100% viewport next to each other, and you change display of the first one to "none" - it's similar behaviour. So long story short, you need to add class .fixed (you can name it whatever), set position to fixed and higher z-index .fixed { position: fixed; top: 0; left: 0; z-index: 10; } Then on your barba leave hook, you need to add (with jQuery, I tried to do it with vanilla js but for some reason it doesn't work for me) $(data.next.container).addClass('fixed'); And lastly, on your enter, afterEnter, or after hook (depending on your setup), you have to remove it $(data.next.container).removeClass('fixed'); Then the transitions should work. Hope it works for your case!

Wow, thanks @GreenSock This is much better than what I had. Just few last questions: 1) Do I need to include draggable & inertia plugin, or just inertia plugin is fine? 2) In the original script, if you scroll/drag outside slider, it continues looping after scroll stops and if you scroll and stop while cursor is on the slider, the looping stops (just so you can hover over other images in peace), but in your build if you scroll with cursor over slider, it continues to move. In my script I used if statement with 2 different tweens depending if slider had 'paused' class. Not sure how to achieve it here. 3) And last thing - if you scroll with cursor over slider and move your cursor while the velocity goes up, slider starts to move very fast and won't stop or just stops abruptly, I think it's related to mouseenter event? (You need to change body heeight to 100vh to see that)

Hey guys, I convinced (well, I didn't have to convince, just asked hah) my company to buy shockingly green package and started to playing around with some stuff. I have a horizontal, looping slider setup with scrollTrigger.observe and it works as I want it, except for one thing - dragging. I am using velocityY to speed up & reverse slider left/right (actually it updates timeScale of timeline based on velocityY) as you normally scroll down using scroll wheel. I add 'pointer' type to the observer but the problem is it only works on dragging up/down (velocityY). Is there any way to "switch" the velocityY for X just for pointer event? I was thinking to just create another observer, but I'm not sure if I can create more observers and it won't affect performance or create conflicts? Or will I have to use draggable (didn't try it yet so I'm not sure if I can wrap my head around it). I've been thinking about it for too long and my mind feels full of different ideas and I'm confused. The solution is probably right in front of me and it's easy, but I can't see it. I need a break I will appreciate any help, direction or suggestion. Thanks! EDIT: I actually made second observer just for pointer, it works and I think it doesn't affect performance, but I'm not sure if it's a good practice, so still would want to know.

I think it's related to how mobile safari on iOS works, when you scroll up or down, sometimes the browser adress bar or bottom nav bar dissapears/appears which is resizing the browser, meaning the positions are being recalculated. That's why you see the flash, because the content is moving. I hope I explained that right. You should try using gsap scroll smoother (has the same options like locomotive scroll) and also try normalizeScroll(). If this doesn't work, then there's another option using css and 2 lines of js, but it will force the browser to always display navbar and adress bar and also you won't be able to scroll to top by tapping top edge of the screen like you normally do.

Ah yes, told you I was tired - such a noob mistake ? I fixed the codepen now and it's working! The only thing left for me is to fix that autoscroll is not resuming after you scroll and move your cursor away from box, while the animation didn't come to stop yet.

Awesome, thanks @Cassie! I've managed to make it work with your help, it works on my localhost, but somehow doesn't work on codepen: https://codepen.io/thehaes/pen/RwQVXYd - looks like it cannot find dom element? I tried with adding window.onload but it spits out same error. Weird. Can you also point me which line is responsible for scroll velocity? It is late so I might be tired but I can't see it. I want to be able to control how fast the slider is scrolling left/right with mouse wheel. EDIT: I found it!, it's in this line on 'wheel' event: loop.timeScale(event.deltaY); Just need to divide it by some numer (the bigger the slower it will be while scrolling), so for example: loop.timeScale(event.deltaY / 10); Again, huge thanks for pointing me in the right direction.

I was looking for exact same thing like in your codepen and I was so happy, then I realised it's with react, and unfortunately I have no idea about react...All I know that useEffect is react-specific hook (I think). Is there a version of this without using react? I tried to modify it myself (I thought I will just take out everything out of useEffect function and remove building of structure (as I already have structure in html) will work, but I was too naive to think it would be this easy. If there's no version of this without react, can anyone point me in right direction and: 1st - confirm that it's just about the first function I should look at, and leave horizontalLoop alone? 2nd - My second guess is that it's about useRef() and root in the App function? I will appreciate any kind of help.