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.

Ok, thanks @mvaneijgen. I will look into the snap property. I was sure there was a better ScrollTrigger way of handling this. Thanks again.

Hi Team Greensock - I have a basic page with various content sections. As each section reaches the 50% mark, it snaps to the top. This seems fairly straight-forward. The issue is that after the snap to top animation completes, it’s drifts off a bit and doesn’t completely stop when it should. To resolve this, on animation complete, I disable the page scrolling via CSS (overflow-y: hidden), to stop the page drift. And then a half a second later, I re-enable the page scrolling. This seems to give me the results I want…but I am now finding that this only works on MacOS. Because on Windows, when you disable page scrolling, it literally removes the visible browser scrollbar. So with my current set up, as you scroll the page, and as the animation completes, the scrollbar hides and then re-appears causing a jerky page shift which is clearly undesirable on Windows. If you comment out line 11 for disableScroll() you will the issue with the page drifting that requires this set up. I just need an acceptable cross browser way to quickly disable and then enable the browser’s page scrolling that works and looks smoothly. Is this something that ScrollTrigger can support? Or is there another ScrollTrigger way of handling this situation? As always, any help would be greatly appreciated.

Thank you team Greensock for the feedback and tips. This definitely got me pushed in the direction I needed. Thanks again.

Hi - I am in need of a draggable range slider. Searching through the great Greensock forums, I found an example that fits my base need quite nicely. The extra enhancement I need is to basically have 2 of the range sliders on the page where the interaction with one will affect and update the other - basically, an onscreen duplicate. For this, I believe I would just need to loop through the 2 elements and create the Draggables. Where I have gotten it so far is if you drag any of the 2nd bottom knobs it updates the 1st top range slider as needed. But if you click the 2nd bottom range bar it only properly updates the 1st top. And if you drag the 1st top knobs, it only affects the top range slider. I am not sure if Draggable is not looped correctly to make the necessary updates or if something else is being missed with the Draggable set up. Again, I just need 2 of the exact same range sliders on the page where an interaction with one will properly update the other. Any help and assistance with this is greatly appreciated. Here is the original example if there is a simpler way to duplicate the range slider. https://codepen.io/bdang/pen/NWaEeBY

Thanks Jack. I completely missed the event bubbling with this. It makes perfect sense. Thanks for the simple explanation and example solution.

Hi - I simply want to set an animation based on whether or not it is currently animating. I see GSAP's isTweening but it does not seem to be working as expected. In my simple CodePen example, I simply want to click the button and then show the box, and then click anywhere on the document or page, to then hide or fade out the box. If you click the button super fast multiple times it does then seem to work. So I think there is some basic step in this simple request that I am missing. Any help would be greatly appreciated.

Great, thx for confirming @OSUblake. I know this simple...I just find this a bit easier and faster than the native JS syntax, especially when already using GSAP. Another nice benefit here is not having to manually loop through various groups of content elements and set values. GSAP does this with a single line of code.

@GreenSock Yes, I have found myself using GSAP a lot lately with just setting various CSS properties as shown above - the typical things we did with jQuery. I am not using jQuery much anymore like many of us and using GSAP like this is super useful as a utility type library, of course in addition to animations. Is GSAP commonly used this way and is it recommended or are there any possible considerations to keep in mind with this approach? By this approach, I mean using GSAP to extensively manipulate DOM elements by showing, hiding, and instantly setting any CSS property to an element, and not necessarily animating it.

Thank you akapowl for the great but simple resolve for this. I knew it was something quite fundamental. And thanks for confirming the CSS transition issue as well...it's much appreciated.

Hi team GSAP, I am running into a (I believe) a basic issue with ScrollTrigger animating a clip-path on scroll. Viewing the code pen, the start and end triggers are set correctly. But as you scroll, the clip-path is not animating...it is just jumping at the end point. The intention is to have it start to reveal the whole image starting on 95% and completing at 50% with scroll scrubbing in place. I believe it is an issue with how the clipPath is set up because if I simply replace the "clipPath" animation property with "opacity" it works fine. Another interesting thing that came up is that if I add the css "transition" property on the element it does animate it at the end point. This is a bit strange as I do not recall GSAP ever requiring default properties directly in the CSS. Any help with this would be greatly appreciated.