TerraHQ

https://codepen.io/andresclua/pen/abXRKvR?editors=1010 Fix it.

Hi there! I want to implement an animation where, upon scrolling down, the current card collapses, and the next (index + 1) card expands. Correspondingly, when scrolling up, I aim for the current card to collapse, and the previous (index - 1) card to expand. Up to this point, I have applied an approach that achieves this behavior when scrolling down, collapsing the current card and expanding the next one, and vice versa when scrolling up. This dynamic works correctly upon entering and exiting the global scroll trigger. The issue arises when, within the global trigger, I interact with the scroll. For example: Example 1: Scrolling down, I expand card[1]. At this point, I want to open card[0] when scrolling up. Example 2: I scroll down, expanding card[1]. Then, I continue scrolling, open card[2], and close card[1]. Now, when scrolling up, I close card[2] and open card[1], repeating the process. I continue scrolling up, and now card[1] closes, and card[0] opens. At this point, when scrolling down, card[0] should close, and card[1] should open. Instead, what happens is that card[0] remains open, and card[2] also opens, while card[1] remains closed. My goal is for, regardless of the position, the next (index + 1) card to open when scrolling down and the previous (index - 1) card to open when scrolling up. Thanks in advance!

hey @Rodrigo been working around this, any tip on how to fix it? Can't be the first person I'm facing this. 😰 Thanks in advance!

Hello everyone! Rebrand and the new website design looks fantastic. I've been searching for a freelancer to help me fix a bug on one of my websites, but I'm having trouble locating where I can post the job request. Unfortunately, I couldn't find the "looking for talent" section on your website. Thanks in advance!

hey @mvaneijgen I've made the changes that you requested but this feels off. onDrag: (self) => { console.log(self.deltaX); console.log(self.deltaY); let horPos = Math.sqrt(self.deltaX * self.deltaX) let verPos = Math.sqrt(self.deltaY * self.deltaY) if(horPos > verPos) { gsap.to(window, { scrollTo: { y: `-=${self.deltaX * 10 }`, } }); } else { gsap.to(window, { scrollTo: { y: `-=${self.deltaY * 2 }`, } }); } } So, on my phone's acting all funky – the touch isn't quite doing its job smoothly. I think I might be making things way more complicated than they need to be. check this link from your phone. Try swipping both directions.

hey @akapowl @mvaneijgen - tried a few options but is not working as expected. https://codepen.io/amaiaTF/pen/WNLgLxY?editors=1010 Scrolling down works perfectly, but on touch it does not - Any tip that you can provide ?

Hello there! A few weeks back, I initiated a discussion regarding responsive horizontal scrolling, which you can find here (TSM Carl for your help). I'm providing original pin from Carl. However our client has expressed an interest in exploring the possibility of enabling users also to to swipe from right to left once the content is pinned, creating a more conventional scrolling experience for mobile/touch devices. Is this a feasible to implement? in case of not, why? I've scoured the documentation but haven't come across any relevant information on this specific matter. Thanks in advance

hey @Carl long time no time no bothering to you ❤️ . you are a genious! - next time I will take a look before posting

Hi All, I'm working with two ScrollTriggers: one that pins and enables horizontal scrolling (referenced as ".horizontal-scroll"), and the other that triggers an animation in the "counter-section." When I remove the ".horizontal-scroll" script, the trigger position for the "counter-section" works perfectly. If I dont remove the script the counter section fires at wrong position. Thanks in advance!

hey @Carl - sorry for late reply, It was a communication issue that I had with the team I was working this, your solution works great! even update the start position for small sizes

hhey Carl, this seems to be fixed, it was a comms issue. thanks in advance! will learn more from your course and avoid asking questions here Have a great weekend.

Hey @Carl, thanks for your help on this I took your example and only modified <h2>Austria</h2> to <h2>I never been to Austria</h2> and added a 1 red pixel in the races div, and the same thing happens with the wrapper. We've added a pink border so you could see it, here's the link: https://codepen.io/andresclua/pen/ExGZGYb However, even if the elements appear to be "outside" of the wrapper, your codepen does work on resize and it behaves perfectly, and mine doesn't. Do you have any insights on why this may be happening? Thanks again! Appreciate the help here

Hey @Carl https://codepen.io/andresclua/pen/YzdNEjj?editors=1010 I have updated the some stuff on the codepen and I know I'm doing something wrong, because on resize it breaks. Any idea what could be?

Hey @Carl, first of all -> bought your course, looks solid! I will use this, and if something does not work as expected will let you know. TSM!

Hey There, Would this be a good base to work on for an horizontal scroll pinned gallery? It is happening to my team that with simple elements, it works ok, but as soon as we add cards, texts, etc. it doesn't respond as it should. Therefore, before keep trying stuff, I want to make sure that the base is ok and that I'm not making any mistakes here that I'm then dragging along. Also, if I wanted to include a debounce/throttle in the getScrollAmount function, would that be possible? Is that needed? The reason I ask is because that's an idea we had in order to give it some time to respond when CSS is changed. Thanks in advance!! ❤️

ok, so I made another example and tweak a little bit. https://codepen.io/andresclua/pen/ZEqxGWY I want my animation on load to run as a sequence Animate hero Animate title Animate subtitle then show the CTA then animate cards with stagger. When I'm on a screen that everything fits I will do the whole thing ( no scrolltrigger needed). Case A imagine that I'm on a tablet or phone and on load User only can see only the hero, but cta & cards are not visible, how could I trigger same animation? Case B imagine that I can see hero and CTA, but no cards visible, I still want on load animate 1 to 4, and on scroll fire animation with scrolltrigger Maybe is using matchmedia or ScrollTrigger.isInViewport() or isInViewport function that I wrote above ^ Hope this is more clear, and TSM for all your help.

hey guys, first of all thanks for your fast reply! I'm not saying you are not right at all, It is quite strange that when I add Scrolltrigger is not playing on load it only plays if I remove scrolltrigger. I know that with a video you can't do too much - link so just if you have as reference. @Cassie How do you to for fire an animation if user do not scroll? ?

I'm pretty sure I didn't explain myself correctly, I have updated the pen with a possible solution, BUT idk if is the "right way". I want to animate on load if visible, and if is not visible apply a scrolltrigger. I change the animation so is more clear. At first I tried with isInViewport(el) { const rect = el.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } but then I saw this https://codepen.io/andresclua/pen/yLRvYPv

I have a similar question to this. On load, I Fire the main tween, that contains two sub animations. - heroAnimation - cardAnimations I would like to animate everything that is only visible, probably the hero + the first 1 /2/3 cards (depending on viewport size). How could I add scrolltrigger to the rest of the cards so they don't animate on load but on scroll. Could this also be "tweaked" when resize? Thanks!

Took this example and tweak it. https://codepen.io/andresclua/pen/QWBREpd It works fine, but the moment I'm adding images inside of it, it gets funky. https://codepen.io/andresclua/pen/NWBVLYM Any tip how to avoid it?

Hey! I'm trying to get an infinite marquee. It doesn't work as expected, at some point there is a small shift. Any idea how could I solve this? I've seen this example, https://codepen.io/GreenSock/pen/QEdpLe but I dont want to have harcoded values, my elements could have different lengths,etc. Any inmidiate feedback/suggestion is welcome Thanks in advance

hey @GreenSock! I love the feedback! it's super super super clear. Appreciate the codepen + notes!

hi there! I'm having an issue with a custom cursor + event listeners. If you hover over the cards on the codepen you will see that each one has its own color. However, if you hover over one and scroll without moving your mouse, the cards will move but the cursor won't change its color until you move your mouse again. Is there any way to make the cursor change color, perceiving the card that has below, without the need of moving my mouse and just through the scroll? I'm sure I cannot be the first person experiencing this ? Thank you!

Wow wow wow! ok, this is 100% premium content! Thanks for explain!

Hey @Rodrigo Thanks for the tip, I've watched the video and explanation looks really good / clear ! But IDK why is not working as expected on my version. 1 - Is it because I'm using x instead of xPercent? tried to swap it but it mess up everything ? 2 - I'm noticing that markers are not display at the bottom. ( see example https://codepen.io/andresclua/pen/eYjJPRa?editors=1011 ) 3 - I can't make it work to animate from first time visible till the end of movement of document.querySelector(".js--hero-a") Once again, thanks for the previous tips!