ektorp

Thanks so much once again @Rodrigo ...your assistance is very much appreciated.

Hi @Rodrigo - Thanks again for your assistance with this issue. I've made some updates to have the element animate and ease into place. As you mousemove and mouseleave, everything moves nice and smooth. The only outstanding issue is on the mousemove event. On the initial mousemove event, the ball nicely animates into place. And this continues as you mousemove and mouseleave the ball. But once you come back to it and mousemove it again, the ball just jumps into place without the animation or easing. The user experience is not ideal. Is this an issue you can assist with? Again, your help and assistance is greatly appreciated. GSAP Clamp Mouse Follow (codepen.io)

@alig01 @Rodrigo Thank you both for your input and feedback. The getBoundingClientRect and GSAP’s clamp utility were both key points for this solution. Thank you so much for your help and assistance.

Hello team Greensock - I am looking to do a fairly basic hover cursor follow within bounds using GSAP. I've looked around the forums and have seen many cursor followers but none within bounds. If you view the attached codepen and scroll down EXACTLY to the middle screen, it is working as expected. The issue is that once you scroll the page up or down, and then hover over the circle call to action, the hover interaction basically falls apart. I am using gsap.getProperty and gsap.quickTo to set the intended coordinates but there is apparently an issue. If you scroll up or scroll down and then hover over the CTA, you will see how things get misaligned and offset. The circle should never fully flow outside of the box container as it currently does. I believe it is some miscalculation and/or misuse of gsap.getProperty and/or gsap.quickTo. Any help with getting this resolved would be greatly appreciated. This is the approach I took with this specific interaction. I am open to other ideas of how this can be done. The GSAP website under the UI page has a very similar interaction that I am looking to achieve. Many of the GSAP website interactions are often included on Codepen but I was not able find one for this use case. On the GSAP UI page, under the "Create complex UI in a snap (Or click)" section, the bottom center element with the circle is basically what I am looking to do, without SVG, just standard divs: https://gsap.com/ui/

Thank you so much @GreenSock! That did the trick. And yes, a very annoying Safari bug indeed. Thanks again so much for the quick fix for this. Happy Thanksgiving 2023 to all at team Greensock! Hope it's a great one.

Thank you for @mvaneijgen and @Rodrigo for your responses. The issue is viewable on Mac OS Safari Version 17.1 and on mobile Safari as well. To clarify the issue, the scaling of the image itself is not the issue. That is actually working fine. But this image scaling is causing the content element in the slides to hide, show, and flicker when it shouldn't. The video below shows the issue. The content block element should consistently remain in place but it is not, again, only on Safari browsers. Screen Recording 2023-11-22 at 9.42.45 AM (1).mp4

Hi team GSAP - I have a standard Swiper carousel with a simple scaling effect using GSAP. Everything works as expected on all browsers except Safari desktop and mobile. Viewing the Codepen in Safari, you will see that once you click or swipe through the slides, the slide content element flashes in for no reason. This content element abruptly displays when it shouldn't. This is somehow being caused by using GSAP to scale the active slide image. If you view this on any other browser, you will see the expected behavior. I am hoping there is a simple browser work around to get this resolved for Safari. Any help with getting this resolved would be very much appreciated.

Hi @Rodrigo As you suggested, I just tried importing GSAP and ScrollTrigger at the top of the entry file and registering ScrollTrigger and that did not work. Yes, it does appear to be more of an issue with Vite than GSAP. I am continuing to look into this more at the Vite level. Thank you for your response and suggestions.

Hi @Toso I am using standard imports as shown below. I believe these are correct. I do believe it is with the way Vite handles plugins which I am further investigating. import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; Hi @Rodrigo I am using vanilla JS with GSAP and ScrollTrigger and there does appear to be known issues with ScrollTrigger and Vite. This post below is similar to what I am experiencing in what OSUBLAKE states: "There is definitely something horribly wrong with how SvelteKit and or Vite handles imports. In production is not even importing ScrollTrigger. " I tried OSUBLAKE's solution but that did not seem to work for me. I am continuing to looks for possible solutions for this is odd use case.

Looking further into this, this appears to be an issue with ScrollTrigger and Vite. In the post below, someone seemed to have a similar issue. https://github.com/vitejs/vite/issues/12141 He seemed to have resolved and then posted a solution. But his post seems to have been deleted now going to a 404. Has anyone else experienced ScrollTrigger issues with Vite? Again, my example is as simple as possible. ScrollTrigger is simply not being called apparently because of Vite. Any help or support with this would be greatly appreciated.

Thank you @Toso for your response. Yes, I understand that not having a codepen demo makes it difficult to resolve but I unfortunately do not have a codepen for this use case. And yes, as the example I gave shows, I have simplified it as much as possible with one element with a simple position left animation. This simple example works as expected on desktop and desktop reduced browser sizes. It simply does not work on an actual device. It is not an actual code issue as my example could not be more simplified. I believe it is something with tree shaking or with my build system, ViteJS, doing something with ScrollTrigger that needs to get resolved. I am hoping someone else has run into a similar issue with ScrollTrigger not working only on actual device.

Hello team Greensock - I would like to request a possible solution for an issue I am having with general ScrollTrigger use on mobile devices. For example, to demonstrate I have a very basic set up with a simple ScrollTrigger animation as shown below. This works as expected on desktop and mobile with the dev tools device toolbar. But for some reason, viewing this on an actual device, the ScrollTrigger animation does not run. There are no known errors - it simply does not play only on an actual device. Debugging a bit, I find that if I remove the ScrollTrigger from the animation, the gsap animation does then play. But by adding the ScrollTrigger, it doesn’t not start the animation. Adding the ScrollTrigger to the animation prevents the onStart event from being called. I have looked further into other possible solutions but have not found anything. All of the necessary libraries are being loaded and registered with gsap.registerPlugin(ScrollTrigger, SplitText). Again, everything works fine on desktop and small desktop views. It simply does not work on an actual device with all browsers on iOS - Safari., Chrome, Firefox, and Edge. I unfortunately do not have a codepen to show this but this is the somewhat critical issue I am facing. If it helps, I am using ViteJS as my dev build tool. It may be a possible issue with tree shaking but I have not found a solution for this. I know this may not be a typical issue but I am hoping it may be something simple that I am missing. Any help or suggestions with this would be greatly appreciated. gsap.to(".hero-img", { left: 100, onStart: function() { // This gets called on desktop but not on an actual mobile device console.log(“onStart"); }, // If I remove the ScrollTrigger, the animation does then play // But adding this ScrollTrigger prevents the animation with no errors scrollTrigger: { trigger: ".hero-img", toggleActions: "restart pause resume reverse", start: "top 25%", }, });

This will work great. Thanks so much @Rodrigo Your assistance is very much appreciated.

Hi @Rodrigo Thank you for the response. Yes, I am aware of the horizontalLoop helper function. I just thought I had found a more simplified solution...with a minor gsap issue that could possibly get worked out. The horizontalLoop function clearly works well as is. My actual need is to have 2 marquees with 1 running left and 1 running right as my updated Codepen shows. Can this be easily achieved with horizontalLoop()? Any assistance with this would be very much appreciated Rodrigo.

Hello team Greensock - I have a GSAP marquee that fits my needs fairly well. The only issue is that it is using some basic jQuery that I need to avoid. I attempted to simply replace the jQuery with gsap.set( ) calls, but this seems to be causing a slight imperfection. If you view the jQuery version (top marquee), it loops smoothly as expected. But when I then replace just a couple of jQuery calls with gsap.set() (bottom marquee), the first initial left block item seems to knock off unexpectedly causing an unsmooth loop. In initMarqueeBottom(), you can view just the 4 lines of modifications with native JS and gsap.set(). The jQuery calls are commented out for reference. Is there something I have missing with gsap.set() that is causing this issue? Once again, any help is greatly appreciated.