thehaes

Not sure what you're trying to achieve, do you want to animate it in when the page loads? Or you want it to scrub like all others? I would probably put some conditional to check if it's the first h2 then modify the start & end values, something like this: let animateElementsCT = document.querySelectorAll('[animate="come-together"]'); animateElementsCT.forEach((animateElement, index) => { let isFirst = index === 0; let typeSplit = new SplitType(animateElement, { types: 'lines', tagName: 'span' }) let lines = animateElement.querySelectorAll('.line'); lines.forEach((line, index) => { let config = { trigger: line, start: isFirst ? 'top top' : 'top bottom', end: isFirst ? 'center top' : 'center center', scrub: true } gsap.from(line, { x: index % 2 === 0 ? '-100%' : '100%', opacity: 0, duration: 1, ease: 'sine.out', stagger: 0.1, scrollTrigger: config }); }); }); But again, I'm not sure what you're trying to do and with your current setup it kind of doesn't make sense animation-wise. I think you should make an empty div at start with 50vh height (or even 100), so the scrollTrigger actually have space to animate it. Other idea is to just animate the first paragraph/lines with normal tween and not scrollTrigger

Thanks @Rodrigo! I decided to reduce the scrub animations a bit and keep it simple so it looks nice and smooth + flip gives me that nice animation I want for filtering My only issue is the jump - it's all perfect when you're at the top of the page, but when you scroll down to the bottom part, or close to the bottom and then click the button, the scroll jumps to top. Is there a way to tell Flip to animate the height of the container/body the same way it does with elements inside? I tried to add the container div to the state so flip can register it, but the scroll will still jump to top + cards get some kind of scaleY animation to them. I know it's probably bit beyond the help you can give, but I'm not expecting a complete solution, just some suggestion or ideas to try. So far I've tried: 1) ScrollTrigger refresh() in onUpdate ❌ 2) Adding overflow hidden + 100% height on container/body while the animation is running ❌ 3) Adding the container to Flip's state ❌ I was also thinking: On my local build I am currently smoothly scrolling to the top of the page first. What if I somehow postpone the "shrinking" of the container/body, only after the scrollToTop animation is finished? Thanks for all the help so far guys.

I've updated the codepen (same link as first post), this time using Flip as suggested. Still the same issue happening https://codepen.io/thehaes/pen/OJYVoeQ?editors=0010 I guess there's also the issue of the scroll position jumping, because of the container height changing due to hiding of the cards. I wonder if blocking the scrolling (position fixed, overflow hidden or something like that) would work...

Thanks for the answer! The animations itself is smooth, it's just the ScrollTrigger part that is jumping. If you scroll to the second image just so the first one has only part of the bottom visible and then press the button, you will notice that the images jumps to 100% scale and when you start scrolling again it will instantly scale to correct scale based on the trigger. Hope this clarifies what I meant before

Hey guys, hope everyone is doing well. I have a scrubbed scrollTrigger animation, actually 2 animations changing scale of card starting from bottom to center and then scaling down again from center to top. I also have some filter buttons that will hide the cards assigned to that filter button (which is simplified in this codepen to hide just every 2nd card). I wanted to have some smooth animation instead simply using display: "none". The problem is when the cards get hidden, the scrub animation gets all messy and jumpy, which is especially visible when you start scrolling again - only then the cards will jump to their proper positions. I tried calling ScrollTrigger.refresh() in the onUpdate callback, but I think that's both not working and heavy on performance. Is there any way I can make sure the cards will still be animating/scaling properly when the height of card changes?

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)