en en en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en ms en en en en en en si de en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en sv en en en en en en en en en en en en en en en en en en en en ms en en en en nl en en en hu en de en en en en en en en en en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
not working as it should (I guess). Here is the code I was working on. If I use the gsap.utils.selector() then the animation of .s1 is triggering whenever the .s1 is coming inside the viewport but if I use this then the animation of .s1 is triggering when .s2 comes into the viewport as it should. Please help.
Here is the original code that I was working on
Hey there! Welcome to the forums
I'm not quite visualising what you're trying to explain. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue?
Please don't include your whole project. Just some colored   elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.
As you're using React you may find CodeSandbox easier to use.
Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions.
Share on other sites
SteveS    170 Likes (Specialist)
When you are going to add a ref to a dom element, always instantiate it as null.
If you are in react 18, disable strict mode, as it causes double rerenders.
Add an empty dependency array to your effect hook to make sure it only runs once.
Put your tweens in a useLayoutEffect if they aren't working as expected, especially when using ScrollTrigger.
Instead of using the element as a simple trigger through scrollTrigger: ".selector" provide a config object and put on markers:
scrollTrigger: { trigger: ref.current, //or whatever selector you are using markers: true }
So that you can see how the triggers are actually interacting with your setup.
Share on other sites
Create an account or sign in to comment
You need to be a member in order to leave a comment
Sign up for a new account in our community. It's easy!
Register a new account
Already have an account? Sign in here.
Sign in to follow this   Followers 2
Go to topic listing
Recently Browsing   0 members
No registered users viewing this page.
gsap.utils.selector() not working properly
“Reading through the GreenSock docs; been amazed like 14 times so far! How can a library be SO complete? Been using that for about 2 years now but man... This the first time I feel this way about a library.”
“I think I love GreenSock as much as bacon.”
“GreenSock has encouraged me to play with the code, to dream up new and exciting things to do.”
“GSAP hosts what is in my experience, the most welcoming, patient and helpful support forum I've ever come across. I've yet to see a question flat out ignored and the patience you all have in putting people on the right track, if not flat out solve their p”
“After searching around the web for alternatives, I found GreenSock to be the most performant.”
“The depth of GSAP blows me away like all the time. It seems like I stumble on something new and amazing every time I peek at the docs.”
“I absolutely love working with GSAP. It’s been one of the most enjoyable things I’ve ever studied and the team do a fantastic job of making it first of all but also in the fantastic forums. I’ve managed to learn so much from that so I’ll always be gratefu”
“Aside from GreenSock’s laser-focused attention to detail, GSAP is fast, reliable, flexible, exceptional value (read: free in most cases) and, very importantly, supported.”
“The GreenSock animation platform is one of the most useful sets of tools in existence when it comes to web animation.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.