Pedro Rezende

Hello everyone, I'm still having problems trying to get the best of ScrollTrigger + SplitText. For the effect I want to achieve, I really need the SplitText position set as absolute. And to get things a bit tricky, I need the page content to be pinned. The problem is happening when I resize the screen. If I split again on resize, it seems to calculate the wrong chars position because the pinned container seems to have a debounce somewhere. If I put on onRefresh, I lose the reference to text.chars on my timeline. I placed some comments on the code to demonstrate this issue. Could someone help me out pointing if I'm doing something wrong or suggesting a workaround to this issue? Thank you very much!

Thank you for the quick fix, @Rodrigo! Looking forward for the next update, @GreenSock o/

Hello everyone! ? I'm trying to understand how to handle SplitText responsiveness because I'm encountering some unexpected results when I resize the page. In the example below, I notice that I get a different position each time I refresh the page with a different screen resolution. I'm attempting to revert the changes before reapplying SplitText. Ex: After resizing to a big screen: Ex2: After refreshing the page using the same screen resolution above: For the effect I want to use, I really need the position property set as absolute. Also, I'm not throttling, just for simplicity. Someone could please give me a light on what I'm doing wrong / not understanding correctly? Thank you very much!

Hey @alig01! Thank you for the reply! So the problem is that in the real world case, we're gonna have some content to be presented in the center of the section. So we don't need to position the clip-path in the center synchronously, but it should expand from the center. Also, I guess it's not possible to use one single timeline because the move animation should be set on scroll, but the main timeline (growing circle + other content) should use scrub. I don't know if it's possible to remove the scrub for only one piece of the timeline though (will check that). Re the getBoundingClientRect, doing something like const {width: sectionWidth} = getBoundingClientRect()} is a shorthand to extract the width prop to sectionWidth variable . But thank you for the attention and pointing that out! Best regards!

Hi everyone o/ I'm trying to animate a clip-path using CSS variables. The idea basic idea is: I need to move the clip-path circle to the center when the user scrolls, and then reveal the cat progressively. If the user is on top of the screen, they can interact with parts of the cat only. So the idea of my implementation was: - When user scrolls down, disable the mouse move effect - One timeline would handle the circle growth (and other elements in the future) with a scrub effect - The second timeline is only responsible to nicely move the circle to the center of the screen when user scrolls - Start growing while it moves towards the center is a desired effect The problem of my current implementation below is the conflict between the two timelines, making a very weird effect when you scroll down and return to the top of the page. It also changes based on the initial mouse position. So any help would be much appreciated! All the best for you all

Thank you very much @Rodrigo and @mvaneijgen! Very cool insights. @Rodrigo regarding your solution, I couldn't set the `pinSpacing` prop to `false` because I need a bigger timeline animation than the example I provided. I could set a kind of manual spacing, in order to place the animation correctly, but I think it would make maintenance and future changes a bit harder. @mvaneijgen the trick of using grid to underly elements but keep their height was absolutely amazing. I've managed to solve the problem using that! Thank you all!

Hello all! I'm a bit stuck trying to figure out why my scrollTriggers aren't firing the way I want them to. What I'm aiming for is to have an animation at the top and then have the next section (2) kind of overlap with the bottom of that animation. This section (2) kicks off the content, and from there, each following section has its own scrollTriggers. When I remove the marginTop animation, the triggers work fine. Could you give me a hand in quickly understanding what I might be doing wrong or not getting right? Thank you in advance! Edit: I just realized that the code works fine in the small Codepen iframe. If you open the codepen URL or run in a bigger screen, the animations don't trigger correctly

Hi everyone o/ In the end, I've used the `onUpdate` callback to change sidebar position according to the section movement. It was also tricky to calculate the movement of each section due to their different sizes (thank you @akapowl for pointing that). I've created a timeline with some labels, which made everything easier to manage and navigate. Also I found the function labelToScroll which helped a lot to handle the sidebar links. It was important because we're gonna add more contents as soon as the event info get released, so it will be a combination of a virtual vertical and horizontal scroll. So `labelToScroll` worked perfectly for pointing the browser scroll to the correct position. Thank you all for the insights!

@akapowl, your reply was absolutely fantastic! Thank you very much. It enlightened me about a couple of conceptual mistakes I was having. Also, great catch regarding the container width proportion. I'll try to implement your suggestions and @The Old Designer's idea as well. I'll get back to you all as soon as I have something working.

Hi everyone, I'm working on a unique navigation implementation and could use some guidance. Here's what I'm trying to achieve: - The navigation items are represented by large vertical bars that correspond to specific sections on the page. - As the user scrolls and a vertical bar reaches the left side of the screen, it becomes the "current" vertical bar and remains fixed in place. In my initial attempt, I used a section title as the vertical bar. However, as you can see in the Codepen, I need to have two or more bars anchored to the right side of the screen, moving in sync with their respective sections. I've added some comments in the Codepen link to explain my thought process, but I'm currently struggling to understand why the bars aren't moving as expected I'm open to suggestions and willing to change the structure I've created if anyone has a better solution to achieve this effect ✨ Thank you all in advance for your help!

@Prasanna @Cassie Thank you very much! Also, glad to hear that it was just some bad luck around here and it doesn't happen often Also, it was my first time using the forum, the support here is great! ?

Hello! I've started to use GSAP Club plugins last week, and today my build is breaking because of this Gateway error. I would like to know, according to the community experience, if I can rely on Greensock NPM or if I should search for an alternative for the future.