kprkr Posted February 9, 2023 Share Posted February 9, 2023 Hi all, I recently built a static page, and am now going back through and adding GSAP to some elements. However, I have run into a bit of a problem when it comes to GSAP elements moving (Parralaxing) and using my cursor-index, I was hoping someone can point out what I am doing wrong. So, I have a "project card" that contains a span that, when hovered, has a tooltip show up at the cursor. This all works perfectly pre-GSAP movement. const tooltip = document.querySelectorAll('.project-tooltip'); document.addEventListener('mousemove', fn, false); function fn(e) { for (var i=tooltip.length; i--;) { tooltip[i].style.left = e.pageX + 'px'; tooltip[i].style.top = e.pageY + 'px'; } } However, I would like every other card to move/scroll faster, and so I added a ScrollTrigger to a few cards like so: gsap.registerPlugin(ScrollTrigger); let mm = gsap.matchMedia(); mm.add("(min-width: 769px)", () => { //Project Card Paralax (loops over each card with class "paralax_project-small") let projectCard = document.querySelectorAll(".paralax_project-small") projectCard.forEach(element => { let Card = element.querySelectorAll(".paralax_project-card") let tlParalax = gsap.timeline({scrollTrigger: { trigger:element, // markers:true, start:"top 80%", end:"bottom 40%", toggleActions: "restart none none reverse", scrub:0.5 }}); tlParalax.to(Card, {yPercent: -25}, 0) }) }) The faster-scrolling for every other card looks great. But, the problem now is, any card that has this yPercent: -25 ScrollTrigger, causes the tooltip to appear somewhere completely different. (Most of the time off-screen) So, I was wondering if gsap is somehow conflicting with the cursor position, or the overall calculation of the cursor itself. And, is there any way around it or is it an issue of using one or the other? Thanks! Link to comment Share on other sites More sharing options...
GSAP Helper Posted February 9, 2023 Share Posted February 9, 2023 It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen To me this sounds like a CSS positioning issue coming from being inside a container with transforms applied. Link to comment Share on other sites More sharing options...
kprkr Posted February 9, 2023 Author Share Posted February 9, 2023 Ah yes, apologies for not attaching one sooner. Here is the link - See the Pen rNrEeea by JAParker443 (@JAParker443) on CodePen So, i have 4 boxes. Box 1 and 4 are gsap-positioned (acting as the "end" state). 2 and 3 are static. As you can see, hovering over boxes 2 and 3, the label shows a tooltip. Hovering over box 1 shows the tooltip in an offset (unintentionally) place, And hover box 4 the tooltip is off screen somewhere. Not sure if this is clear enough to the problem so let me know if I need to add more detail. Link to comment Share on other sites More sharing options...
Solution Cassie Posted February 9, 2023 Solution Share Posted February 9, 2023 Ah, yep. Browser limitation. Unfortunately you can't have fixed children of a transformed container. https://stackoverflow.com/questions/2637058/positions-fixed-doesnt-work-when-using-webkit-transform without GSAP, showing the same result See the Pen mdjZOjj by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
kprkr Posted February 9, 2023 Author Share Posted February 9, 2023 Thanks for confirming that @Cassie I was afraid that may be the issue. Is there any clever way around this? Seems a shame to have to pick between the transforming ability or the tooltip feature. Though, I can appreciate this is just soemtimes the way it is 😅 1 Link to comment Share on other sites More sharing options...
Cassie Posted February 9, 2023 Share Posted February 9, 2023 Well, no way around this particular behaviour. Plenty of ways to get the desired result though, you're just going to have to think a little 'outside the box' (Literally.) i.e. don't nest the tooltip inside the transformed container, or use position absolute. 1 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