Vivodionisio

Hi! I'm having an issue related to the hiding and showing behaviour of the mobile address bar, and possibly the ScrollTrigger.refresh() method, which I have inside a throttled function: function recalcTweenProperties() { ScrollTrigger.refresh(); } function throttle() { console.log('throttle'); clearTimeout(timerId); timerId = setTimeout(recalcTweenProperties, 200); } What happens is that after a flick of the touch screen, the scroll velocity stops dead as soon as the address bar's hiding or showing animation completes. After that you can continue to scroll without interruption, until you trigger the hide or show animation by scrolling in the opposite direction. Presumably, when the address bar completes its animation and the refresh() method is called, the scroll progress and velocity are being forgotten. Has anyone come across this issue? I did put together a minimal demo but the svelte REPL output is within a container div so that address bar animations aren't triggered. It at least shows the code though: https://svelte.dev/repl/66a7dda8c37a4023b3aa5fb818b7c8ed?version=4.0.1 I wonder that my best recourse is to try and disable the address bar hide animation. Many thanks, Saul

Awesome! Ahh yes, I'll pop them in their own tweens, good call. Thanks again for all the feedback

This is just great. Love the simple/nifty approach to scaling. I've just been modifying my code with your suggestions in mind and I've hit a wall with trying to get the scaling of cursor-outline to animate on mouseleave, in the way that it did before. Seems to be delayed now, perhaps due to running inside a timeline, in reverse. I realise the tweens start at the same time going forward but I can't tell whats happening going backwards. Should they start together in reverse too? Also, there is a little more complexity in the max version, in that the magnetic effect acts on both the custom cursor and the text inside the target. So all the calculations for hypotenuse and angle are happening on mousemove, along with querying the DOM. At this point I can't see how to separate that stuff, as the 'if' condition – hypotenuse * 2 < triggerDistance – determines which text element is pulled on by the cursor. Is there an obvious way to do this that avoids this expense? https://codepen.io/saulnewbury/pen/YzRwPXz Thank you so much for the input.

Ooh, interesting. Thanks for the suggestion Cassie. I'm just wondering about the other properties – width and height, scale etc. – I take it that if I use quickTo for the mouse position, these other properties should these be handled in a separate tween? https://codepen.io/saulnewbury/pen/bGxyZjK?editors=0010

gsap.killTweensOf() on mousemove has done the job. Animation is much smoother as well

Hi Folks, I'm experimenting with a custom cursor, and have run into an issue I'm not entirely sure how to describe. The cursor consists of two circles that follow the mouse, using gsap.to() tweens, each with a different durations, so that circles lag is grater than the other's. Pretty strait forward. However, I've also defined trigger-zones for three target elements on the page, inside of which... The circles should: 1. Expand to the size of the target element, 2. Whilst also changing position from mouse to target element. It is kind of working, but when you move the mouse into the trigger-zone with a 'quick flicking motion', the circles do grow and move into the new position, but the smaller one (whose colour is filled) promptly snaps back to its original size and presumable, its last recorded position before the mouse had entered the trigger zone. Anyone have any ideas what might be causing this? https://codepen.io/saulnewbury/pen/qBQdqqV?editors=1111

Hah, what timing. You've put it much more simply here, and accounted for another problem I hadn't considered. Thank you so much, I will add the clean up Best, Saul

Solution found The issue had to do with the order in which the scrollTriggers start and end values were being calculated and flow sections/divs on the page – stats come after testimonials. GSAP recalculates start and end values of scrollTriggers automatically when the window is resized, but it does it in the order that the code is laid out. When the window grows to the larger screen width, values for Testimonials section are defined after those for Stats animation which have priority because they are outside of the mm.add()). These means that the new height (100vh) given to the testimonials section, move the Stats section relative to the start and end values defined before. I got around this firstly, by calling static ScrollTrigger.refresh() inside the mm.add()m after the Testimonials scrollTigger instance, and secondly, by defining the order that the scrollTrigger values should be re-calculated with the refreshPriority property. Awesome! Here's a demo with solution: https://svelte.dev/repl/0a34b8fb9ed2444b97613e904f9d74fe?version=3.59.1

Hi Rodrigo, Thank you so much. Yes, I see what I did there. I was experimenting with an alternative animation for mobile and when I decided to go with the original it seems I merely reverted the values, ending up with two instances. Removing that duplicate fixed things in the REPL but I'm still having the issue after updating my component. Something else going on. I've created another demo, adding in a preceding testimonials section which is pinned with a scrollTrigger that scrubs through animating cards from point a to point b. I haven't manage to reproduce the same behaviour exactly, but there is an issue, which is perhaps the same cause, or part of it. When resizing the window to a min-width of 821px, the start and end values appear not be getting recalculated so that they end up in the wrong position. I tried using a static ScrollTrigger.refresh() in the match media callback (now removed) , but I think this should be happening automatically when a window is resized? So I'm foxed. Not sure what's happening here. Here's the demo: https://svelte.dev/repl/748d7e8c003540899795fecb9eb690b8?version=3.59.1

Hi, I'm having some trouble understanding why my scrollTrigger isn't working properly when resizing the window (crossing from a max-width of 820 to a min-width of 821). The scrollTrigger animation should move the 'stats' (a, b, c and d) boxes from yPercent of 100 to 0. I have put together a minimal demo using the Svelte REPL, and incase it's part of the issue I've included 'testimonial-cards' which have a scrollTrigger applied, pinning their parent (from a min-width of 821). https://svelte.dev/repl/748d7e8c003540899795fecb9eb690b8?version=3.59.1 Thanks in advance for any help or advice UPDATE: Turns out the testimonial cards and associated scrollTrigger have no effect on the behaviour of the stats cards, so I've been able to make an even more minimal demo : https://svelte.dev/repl/18f36c2136ce4a369dbc8e05f938413f?version=3.59.1

Hi Rodrigo, Thanks for the swift reply! The component I'm working on is a convoluted beast. I have to figure out a way to simplify it. Fortunately I've managed to solve the issue I was having by removing a set() which defined the height of a spacer div (that followed the pinned element), and instead define its height in the style sheet. I have no idea why that's worked at this point. No matter, I have another issue for which I've managed to put together a minimal demo. It's a bit different so I'll start a new topic. Thanks again!

Hi, I'm having a little trouble. I have two implementations of a carousel for desktop and mobile created using GSAP's match media method. The desktop version pins the section with scrollTrigger and scrubs through an animation whilst the other uses Observer to trigger to trigger the animation. The issue is that the Pinned element remains pinned when going from desktop to mobile which shouldn't be pinned. It only occurs however when the play head is midway through the animation*. I'm confused though, because it's my understanding that the pin should be killed off when the media query no longer applies? I was wondering, if anyone might be able to point me to sources related to this kind of issue? Many thanks!

Hi, sorry for the delay. My project proved a bit overwhelming whilst everything in life happened at once. Thanks for your suggestion. This put me on the right track. In the end I followed this example of moving the instantiation of ScrollSmoother to its own component:

Hi @GreenSock, I've created a minimal demo and stumbled on a different problem when the ScollSmoother is added: which is that the page no longer scrolls. Currently I have ScrollSmoother commented out and it works as expected: When going between artpiece pages the exit animation runs, the onComplete callback fires navigate() and the next page mounts with enter animations that include the set up of scrollTrigger for the second img. That then fires when you scroll to the appropriate position. But if you uncomment the effect with the smoother in, you should see the issue arise. https://codesandbox.io/s/hungry-water-i2gf6w?file=/src/ArtPiece.js Many thanks!

Hi Jack, I hit an obstacle making the demo, for some reason I've been unable to import ScrollSmoother, I don't suppose anyone can see why this might be the case? https://codesandbox.io/s/hungry-water-i2gf6w?file=/src/ArtPiece.js (Scratch that; scrollSmoother imported!)