cselin

Forgot to come back, but my work ultimately decided this particular bit of lighthouse feedback was not worth actioning, so we left things as they were. Thanks for the replies though!

I don't have a demo as this is more of a general question. I have a site using Observer to control a few things on the page, such as when a header appears or disappears depending on scroll direction. In Google's Lighthouse, I get this feedback: The link - https://developer.chrome.com/docs/lighthouse/best-practices/uses-passive-event-listeners/?utm_source=lighthouse&utm_medium=devtools - Suggests that the 'passive' flag should be added to scroll event listeners. Is there a way that Observer could be modified to comply with this Lighthouse report issue? Has this been discussed elsewhere? This isn't something critical for me but I have some clients that are passionate about their lighthouse score so would be good to come back to them with further information if this cannot be changed.

Initially I had 2 different tweens for in and out, which did confuse the issue. But I think reversing the same tween is definitely going to remove headaches, if I understand things right. Thanks for your help!

Yes, that's basically what I want to do! Thanks for clarifying how these features work, i really appreciate it. It does still seem to have issues if you move between hovered objects too fast, like getting stuck with the follower object half-open, but I guess this is the kind of issue that leads to you suggesting that greensock is available for paid consulting, haha. Thank you!

^ For this example it was not working until I changed the pageX and pageY variables to clientX and clientY. I now have the mouse following working much better, but I'm not sure how to organise the actions on my tween to make the follower change size and text without issues occurring. If on mouseOut I just nuke the timeline with "followerAnim.time(0).pause(); followerAnim.invalidate();" things work pretty well, but I'd still like a transition out so it's not so sudden. However, when I try to play the timeline in reverse to shrink it back it doesn't work as expected. Updated codepen: https://codepen.io/cselin/pen/wvXmQxB Just hoping there's something obvious that I'm doing wrong here - I don't thinkI I fully understand how to manipulate the timeline with reverse and invalidate. If there is some good reading on this anyone knows, that would be appreciated as well.

Thanks so much for your replies! I had somehow missed the existence of quickTo! Wow that was fully a copy and paste from elsewhere I didn't notice. I didn't even notice when simplifying for my minimal demo! Thanks for all your advice, I'll put it into practice and it should drastically improve this animation : )

Hello all. I have been looking at this for too long and I'm sure there are elegant ways to do this, I've just fried my brain overcomplicating it. I have a little div that follows the cursor around. When you hover over certain objects, that little div will get bigger, animate its colours, and obtain some text from that object, eg 'click me!' When you hover out again, it should return to its original state. I'm trying to make it so the onleave animation returns it to its original state visually, and runs a little faster than the onenter. Also, it should only appear when the user is hovering over the document, so that there is never just a random dot onscreen if the user's cursor leaves the window. I've really let this get away from me. I've been trying to handle issues I've encountered, eg. - When quickly moving from one hoverable box to the other, unexpected things occur - Initially I just had one timeline animating then reversing, but I couldn't then seem to be able to unset the properties of follower -The animation just seems really jump and janky - and I feel like with every extra animation and option I've added in, it's become worse! My designer has asked me to look at the team slider on https://www.magnetism.fr/en/about/ as an example and copy that basic animation. However I've noticed even that example has some issues with the animation not completing when you move the cursor too far. I appreciate any advice you could give me on how to approach this problem better!

Thank you, that works perfectly! And I appreciate the tip about using a parent, that does make sense especially since the perceived top and bottom points of this element are changing position, i can see that as an easy thing to get myself tripped up on in future.

I think there are probably a lot of different ways to solve this, so i might be barking up the wrong tree. But writing out what I want to achieve often helps with problem solving, so here i go! I need to create a website where the main content area is enclosed in a 'card' looking block. When the user loads the page, the <main> will be a little bit faded and a little bit shrunk, so the bg colour is visible to either side of the block. Here's what should happen: Once the user scrolls, assuming the <main> is visible on screen, it will animate to opacity 1 and scale 1 Once the user scrolls to the footer, the <main> animates back to opacity .9 and space .9. These reverse as appropriate. So I've got the <main> itself triggering the animations when it appears at the appropriate places on screen. This is super simple and works well! However, the thing I am stuck on is what's bolded above - only animate <main> to opacity 1 and scale 1 once the user scrolls down. that is, the designer doesn't want the page to load in and have the animation instantly initialise. Currently, as in my codepen, the animation somtimes initially triggers even if I haven't scrolled (this obviously depends on the viewport size). I'm sure I could write some kind of vanilla JS to check for window.scroll and then only set up the scrolltrigger stuff when that's done, but it feels janky, like there must be a cleaner way to manage this in GSAP itself? Or maybe a different way to solve the problem altogether that I'm not seeing? Appreciate any help!

Aha, that's perfect! Thank you!

I've got a lot of progress bars on a page that I am animating as they appear with scrollTrigger. I would like to use from() to just tell them all to animate from 0 up to their value. However, this doesn't seem to work - it results in progress bars with their value set to 0. The codepen is as simple as I can get it! I'm aware I could also do something like : <progress value="58" max="100" data-value="58"> 58% </progress> And pair it with gsap.fromTo(this.progressTargets, { value: 0 }, { value: function (index, target) { var value = target.dataset.value; return value; }, stagger: 0.25, duration: 1.5, }); But it feels like I'm adding unnecessary cruft into the html markup. Does value need to be used in a different way to other properties? I can tween it using fromTo() with no problem if I define the values, it just seems to not work as I'd expect with from().