Hi you lovely animators!
I have an odd issue I would be grateful to get your thoughts on.
I have a background image that moves when the mouse moves over it. This is for a listing page where the item cards have this bg image that move on hover.
The issue is they all work fine apart from a couple that doesn't apply the correct translate.
So each bg image is set in css to
transform: translate(-50%, -50%);
Then GASP applies a 3d transform which works by setting a style attribute as follows:
transform: translate(-50%, -50%) translate3d(-27.4375px, 10.8641px, 0px);
Great! That works and respects the css style, but the couple that don't work are applying:
transform: translate(-50%, 0%) translate3d(6.9688px, 5.4241px, 0px);
So the Y translate is being ignored an reset to 0
I have tried updating the GSAP package to the latest version but no luck.
I can't seem to figure this one out, any thoughts?
Is it possible to force GSAP to add the translate at the same time as the 3d translate?
My current code:
gsap.to(bgImage, {
x: ((e.clientX - card.offsetWidth / 2) / card.offsetWidth) * movement,
y: ((e.clientY - card.offsetHeight / 2) / card.offsetHeight) * movement,
duration: 0.5,
ease: "Power4.inOut",
force3D: true,
});
Sorry, I can't afford the time at work to create a CodePen.
Thanks.