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!)

Hi Jack, So, I've made the changes, thanks for that direction. And I'm working on a minimal demo. I realise I failed to mention the issue has only occurred in production (deployed to Netlify). It's been working fine in development. After some more investigation I have a clearer picture: the ScrollTrigger was actually running too soon. This was possible to see by quickly scrolling down a given artPiece page after loading. Navigating to an artPiece initially doesn't cause this since it navigates from the collectionPage which is only 100vh, so that the scroll position is above the trigger element on the next page. Subsequent navigation to artPiece pages from the picker at the bottom of the artPiece page means that the scroll position will be past the start of the trigger. That's where the issue lies. I missed this because all pages are wrapped by a component which calls window.scrollTo(0, 0) each time the location object changes. I have no idea why the problem wasn't an issue in the dev environment. I've gotten around it for now by adding a window.scrollTo() to the onComplete callback of the artPiece exit animation, so that the scroll position is above the trigger when the next page loads. This works just fine in both dev and production. However a new problem occurs at this point when adding scrollSmoother to the picture. Again, when navigating from collectionPage to artPiece page all is well, but when navigating between artPiece pages, scrollTrigger does't appear to fire at all (the overlay doesn't scale to 0 and reveal the image behind). I'm not sure whats happening. Anyway, here's how I scoped the variables: // Artpiece component const ArtPiece = () => { const { slug, id } = useParams() const artpiece = useRef() const q = gsap.utils.selector(artpiece) const smoother = useRef(null) And here's my exit animation: function handleExit(path) { gsap.set('body', { overflowY: 'hidden' }) gsap.to([q('.detail'), q('.main-image')], { opacity: 0, duration: 1, delay: 0.8, onComplete: () => { // smoother.current.paused(true) smoother.current.scrollTop(0) // window.scrollTo(0, 0) navigate(path) } }) } As stated, if I comment out scrollSmoother and use window.scrollTo instead of gsap.scrollTop or gsap.scrollTo, every thing works beautifully. Hopefully I can replicate this issue in a minimal demo. Thanks, Saul

Hi, I'm using react-router-dom to render out ArtPiece pages dynamically. In the ArtPiece component I have a ScrollTrigger animation (along side other tweens) inside a useLayoutEffect() with react-router-dom's location object passed as a dependancy: useLayoutEffect(() => { const ctx = gsap.context(() => { // Some other tweens that don't use ScrollTigger (these work fine).. // Said tweens (with ScrollTrigger) // Detail Image Overlay gsap.fromTo( q('.detail-image-inner h4'), { opacity: 0 }, { opacity: 1, scrollTrigger: { trigger: q('.detail'), start: 'top 60%', toggleActions: 'play none none none' } } ) gsap.fromTo( q('.detail-image .overlay'), { scaleY: 1 }, { scaleY: 0, duration: 1.5, ease: CustomEase.create( 'custom', 'M0,0,C0.05,0,0.149,0.279,0.19,0.374,0.36,0.772,0.528,0.988,1,1' ), scrollTrigger: { id: 'detailReveal', trigger: q('.detail .overlay'), start: '10% 80%' // toggleActions: 'restart none none revert' } } ) }) return () => { ctx.revert() } }, [location]) I also have ScrollTrigger at work on this page in a separate useEffect() should it be relevant: useEffect(() => { smoother.current = ScrollSmoother.create({ wrapper: '#smooth-wrapper-artpiece', content: '#smooth-content-artpiece', smooth: 1 // smoothTouch: 0.1 // normalizeScroll: true }) return () => { smoother.current.revert() } }, []) The location object in the dependancy array is doing its job of triggering the effect every time an ArtPiece page mounts. But for some reason the ScrollTrigger is only doing it's thing the first time an ArtPiece page is navigated to (after an initial refresh). On subsequent navigation to the same or other ArtPiece pages, the ScrollTrigger has no effect. Does anyone know if there is an obvious reason for this? Or could this be a limitation where it comes to using gsap with React? Thanks in advance for any help offered

Hi Jack, thanks for your swift reply. This does provide a good solution. Although this was an issue I ran into when making a minimal demo for demonstrate a different problem, which I have just solved, with no small amount of luck - I'm still trying to understand it. I'll mention it best I can, should it be helpful to anyone else. It had to do with wanting each page to begin at scroll position 0. To achieve this I wrapped routes in a function which fired a scrollTo(0, 0) method each time the location's key changed. This worked just fine until I added ScrollSmoother to a set of dynamic ArtPiece pages. Now it appeared the ScrollSmoother was interfering with the scrollTo function. Not when refreshing the page however; only when navigating from there to other's in the dynamic set. I figured the ScrollSmoother from the previous page was hanging around and remembered about putting a unique key on the Routes component, so that dynamic pages (that render out the same component) such as my ArtPiece component, will be treated as components in there own right, separate from one another. Now i believe a new ScrollSmoother is being created for each ArtPiece page. In any case, it's working! Hoorah. Sorry for the low res description.

Hi, I was wondering if anyone might have a solution to the problem of resetting ScrollTrigger animations when returning to a page, so that the animations can run again? Currently you'll see in App.js that I've wrapped the react-router-dom Routes component in a ScrollToTop component which scroll's the window back to the top each time the location key changes. But since the page started at the bottom (where it was left before navigating away) the ScrollTrigger animations have already run. I've attached a minimal demo Thanks in advance for any help or advice. https://codesandbox.io/s/blissful-chihiro-erft2s?file=/src/Page1.js

Hi @PointC, It's very simple at this point, which I quite like, though I do have some ideas for making it a bit more interesting. In any case, for now it'll have to do... https://saulnewbury.com/ Feedback very welcome : )

Hi @PointC, Aha! Yes, thanks for the explanation. That's making sense, I can see how I'm making timelines with each mouse event so that enter and leave events don't correspond, hence the 'repeat' behaviour, and how you've avoided this, calling the timeline creation function just once for each button, and storing the value ahead of time. Nice! I believe I’ve been using the motionPathPlugin for animating the buttons (icons) into position. Did you mean I could be putting it to further use? It is indeed the stickman project, which is part of the portfolio website I'm building. I only have a couple of pieces to showcase at the moment, but hoping it'll help me land my first employed position as a developer ? I'd be thrilled to show you once it's done : )

Hi @PointC Yes, exactly! Thats what I was trying to remedy. I think you this is the one! I used buttons for the minimal demo, but for the real thing I’m using icons as part of a larger SVG which also includes the path for the motion tween. I’ve done it this way to preserve the relative positions of the elements for responsive purposes. Can I ask how it is I’ve been creating new timelines on each mouse enter? And how your approach isn’t doing that? I thought I was just triggering the timeline. And also, when you called this.anim.reversed(!this.anim.reversed()) in your response to my initial query, I was a bit confused as to how the timeline was being triggered as it seemed to me this would merely change the reversed value to its opposite? I realise you’d assigned the function to btn.anim – did that line of code also call the function, and in turn run the animation code? Thanks for all your help!

Thats a very nice solution, and exactly what I was going for, and I had forgotten about the utils method so I appreciate the reminder! Thanks @PointC! Unfortunately I realise my problem is actually a little more complex so I've made a new pen (flowing on from yours) to include an initial animation for the buttons along a motion path. Now the reverse animation is behaving more like a repeat... I don't suppose you can see what's causing that? https://codepen.io/saulnewbury/pen/zYRRgBL?editors=1111

Hi, I'v been trying to implement a typing animation on mouse enter, but having some trouble with getting it to play in reverse on mouse leave. I don't suppose anyone can see where I'm going wrong here? Thanks in advance for any feedback.

Hi @PointC and @GreenSock, I'm going to live with the occasional flicker. Many thanks for taking a look and the clarification!