ScrollTrigger yPercent causing issues with my cursor index

[kprkr]

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!

[GSAP Helper]

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. 

[kprkr]

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.

[Cassie]

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

[kprkr]

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 😅

[Cassie]

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.