Jump to content
Search Community

TerraHQ

Premium
  • Posts

    58
  • Joined

  • Last visited

About TerraHQ

Recent Profile Visitors

1,988 profile views
  1. https://codepen.io/andresclua/pen/abXRKvR?editors=1010 Fix it.
  2. 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!
  3. 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!
  4. 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!
  5. 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.
  6. 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 ?
  7. 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
  8. hey @Carl long time no time no bothering to you ❤️ . you are a genious! - next time I will take a look before posting
  9. 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!
  10. 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
  11. 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.
  12. 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
  13. 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?
  14. 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!
  15. 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!! ❤️
×
×
  • Create New...