clieee

Sorry for not providing a demo. Thank you, will do the wrapper for this case.

Hello, I have the following setup in a React project (next.js). Section 1: A sticky element that contains my scroll trigger for an element (lets call it containerRef) within this section that is top: 0 with position absolute Section 2: Static position Section 3: Static position Footer: Sticky element I've setup so my scrolltrigger fires a console log for onEnter, onLeave etc. from "top bottom" trigger position of containerRef. It works fine on page load when my page is scrolled up at the top, but if I reload the page from a scrolled down position it also fires the "onEnter" callback which will then start some animations on the Section 1, that are not within the viewport... How should I solve this? I've tried "limitCallbacks: true", but no success. It still fires even if Im scrolled down on the page when reloading. Thank you

Nevermind, it seems to be working fine with the Modifiers option once I was running on my machine. All good, I think! Thanks man!

Thanks. I've updated it, please have a look here: https://codesandbox.io/s/lucid-wind-xkyrt?fontsize=14&hidenavigation=1&theme=dark If you look at my latest example, the first scroll triggers the items to jump in place, but in order to have that layout from the beginning, should I use "modifiers" on the initial set call as well then? It seems to get a bit off on each scroll then? I'm obviously missing something.

Thanks. 1) Yes, okay. But let's say I offset the container with all items to the center of the viewport, is that what you mean? I'm just thinking how I should make it possible to look good even if the user starts scrolling up right away? 2) Yes - will try that.

Hi, I'm currently working on a "infinite scroll menu" which contains a list of different places, but having a hard time of especially one (maybe two) things that I don't know how to solve in a good way. The menu/list is just a list of x number of places and as the user scrolls the list will update the positions of all the items in it so they go up/down based on direction the user scrolls. On top and bottom of the container there is a gradient overlay so it makes the scrolling values disappear in a nice way (red for now to make it more visible...) 1. I dont know how I should solve that the "most visible list item" is vertically centered against the viewport height center? 2. Probably connected to #1: I need to know which list item should be marked as "active/selected" item in the list so I could adjust opacity on the other items, and/or make the active one in a different opacity, color etc..? This is where I am right now: https://codesandbox.io/s/lucid-wind-xkyrt?fontsize=14&hidenavigation=1&theme=dark

Hey @ZachSaucier, thanks for getting back on this. As of many times, to be honest, it is something other than GSAP not working. I think I found out what the issue was, and it was more about the order of initiating other parts of pages. In my case there was an issue with a component not being calculated in the right time, and therefore causing an issue with ScrollTrigger. What my solution seems to be is that I will trigger ScrollTrigger.refresh once that component is ready to fly, and that seems to make all calculations correct. Thanks again for a super sweet library, it is just amazing. EDIT: Just to be clear. I did not have to use the suggestion of killing all ScrollTriggers.

Hi, As I'm trying out to add some ScrollTriggers to a website, built with React, I have some issues when navigating between routes. On first load, it seems like ScrollTrigger catches all dimensions etc in order to calculate correct trigger points. But as I navigate to other routes/pages it wont get correct trigger points. I guess this is due some observation of for example images being loaded for example. As soon as I trigger a resize, the trigger points are again correct. What would be a good way to approach this? I've tried with ScrollTrigger.refresh but seems like it is not being fired at the right moment.. Sorry to not being able to provide a url or codepen at the moment, but hopefully you can get some understanding of my challenge. Thanks!

Thanks!

Hi, I have a page where I have x number of containers/divs. Some of these have defined background colors, and should thereby change body background color once they getting visible as you scroll down. But also change back to their color if user scrolls back up. I'm using React and my thought was to create a custom hook that I connect to the node/container/div that should be used as trigger. That is all working fine, if that seems to be a good approach, I basically create a new ScrollTrigger every time that hook is being used. However, some questions: - I guess I have to use the callbacks for onEnter and onEnterBack in order to add/remove the body background color class? - What should my start values be? "top top" (=if top of element hits top of viewport) if a "colored" section is a top of page? And for other sections "top bottom" (=if top of element reaches bottom of viewport)? - If the first section on the page should set a specific background color, and then the user scrolls down a bit, the next section becomes visible = trigger color change, but then the user scrolls back up again, how can I tell if it should transition back to it's color again then? onEnterBack wont get triggered in this case..?

This is my latest version, not sure which one that will perform the best? My thought was to go for transformX instead of tweening left property. https://codepen.io/clieee/pen/QWNQYav

Haha, I realized that once you posted, so cool. Did something similar, now it's more of timing of everything, but have good control with each word and its chars. Thanks for that!

@ZachSaucier thanks for looking into it. This is what I have so far, but feels like something is missing in timing, or if I misunderstood your stagger setup by word and by letter? https://codepen.io/clieee/full/abNqYog

Hi, See my attached video clip, Im trying to find a good way to create this with SplitTextPlugin. My requirements are: - this text should support multiple lines (I will use it as a "headline component") What I'm having trouble understand the best way to accomplish is how they should come in / grow from the right within their word. Like a right: 0 as a starting point for each character within their word... ? animation-trimmed.mov

Great, thanks. I got it working fine ?