Jump to content
Search Community

AniMartin

Premium
  • Posts

    5
  • Joined

  • Last visited

About AniMartin

AniMartin's Achievements

  1. Centering another way sorted my issue! Many thanks all, and in particular thanks Mvaneijgen! I think I will try to recreate the issue in a Codepen at some point for my own sanity and to share the issue.
  2. Thanks so much for your help. I would normally take the time to knock out a CodePen but my deadline is tomorrow morning and I simply can't. I will see what I can do once I smash my priorities task list. Mvaneijgen, You might be onto something. Maybe I can centre it another way!
  3. 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.
  4. Hi @Cassie and @akapowl! Thanks for the warm welcomes and for taking the time to help. Good spot about the different start and end points. Wonder how long it would have taken me to figure that out I should have used the Scrolltrigger tools. Nice DRY refactor there @Cassie, good work! Missing a "." means I have to reset my "How many days since my last face palm" chart You both solved it but Cassie was first. Can I share the solution button? Thanks again peeps.
  5. Hi folks, GSAP is epic, thanks for making it! First time posting here but appreciated these forums for a while now. I am posting because I have a slightly odd problem I can't seem to nail down. I have created a custom scroll bar that is linked directly to the scroll position with a linear ease. The issues is it isn't acting linear. As the circle moves from section 1 to section 2 it is slightly early. Moving from section 3 to section 4 is slightly late but the start, middle and end points are bang on. Very confusing. Anyone know why this might be happening?
×
×
  • Create New...