fionchadd Posted April 12, 2023 Share Posted April 12, 2023 Hi there, I'm trying to build a grid of items and have an image display when each item is hovered and follow the mouse. I have it almost working, but sometimes some of the images aren't appearing centered on the cursor and I'm not sure why. This doesn't seem to happen all the time or with all the images but here's a screen recording of that codepen showing it happening: https://drive.google.com/file/d/1SLffibOCOd7ISCWE5dziqm2gs32h39eI/view?usp=sharing Do you have any idea why this is happening or how I can ensure the images are always centered on the cursor? Thanks! Hannah See the Pen NWOGGKE by fionchadd (@fionchadd) on CodePen Link to comment Share on other sites More sharing options...
Solution GreenSock Posted April 12, 2023 Solution Share Posted April 12, 2023 Try doing this initially: gsap.set("ul img", {x: 0, y: 0, xPercent: -50, yPercent: -50}) You're setting your initial transforms directly in CSS only, but we always recommend setting transforms via GSAP so that it's consistent, performant, and unambiguous. My guess is that you started setting transforms via GSAP before the image(s) loaded, thus the translateX(-50%) translateY(-50%) was on an element that had no width or height, thus when GSAP did its parsing that's what got applied and then the inline transform overruled the CSS selector style. 2 Link to comment Share on other sites More sharing options...
fionchadd Posted April 12, 2023 Author Share Posted April 12, 2023 Ah amazing, thank-you! I hoped I'd be missing something obvious Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now