limbo

Thanks. That works really well.. until you quickly move your mouse over the target trigger. Then the playback is ruined. Any catch all defence for this sort of mouse event?

Hello I've stared at this for far too long. Seems simple enough to get it to this point but can't get it over the line... How would you reset a hover animation once it's completed (onmouseLeave)? Took me a bit of headscratching to get it to a point where I could run the animation on any given link (native forEach method - ALL the other similar examples I could find were using jQuery)... But this little issue is stumping me... I've tried resetting via "clearProps" but could't get it working as expected. The production site timeline is a fair bit more complex than this but wanted to keep the example as simple as possible. Any help/pointers would be appreciated. Ta. (updated with final code)

Hello Jack I did try tag:"span", — but as I'm using lines it doesn't seem help or make any difference in that respect. Thanks for the suggestion though.

Last addition to this. On longer text passages... with some webfonts... with text over multiple lines... in safari (v/OS as above)... depending on line length and ragged edge paragraphs... sometimes words will find a home on the next line when .revert() has finished. Very ugly. The only way I could get round this was target safari and add <br> via the CMS where I needed them in the passage and be super mindful via media queries (I'm already detecting Safari as it is). Will also need to the run the splittext + revert again on resize. This won't work well for dynamic passages — where I'd imagine youd need to do something more fancy with line count. TLDR; Safari + SplitText + (some?) Custom webfonts are not kindred spirits

Just to add - as this tiny fractional jump was being stubborn after .revert Some custom webfonts (the one I was using, of course) will force what looks like ligature adjustments (fi or ff for example) in Firefox and Safari (OSX Big Sur), regardless if these are set or unset with the CSS: font-kerning: none; -webkit-text-rendering: optimizeSpeed; text-rendering: optimizeSpeed; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-font-feature-settings:normal; font-feature-settings:normal; The only workaround I could find was to set css letter-spacing to a tiny increment like 0.01em. Ta, Liam

This was a great read. Thanks ?

Thanks (and that was quick ?) All makes complete sense. ?

Pen: https://codepen.io/liamcrean/pen/rNWxodR?editors=0010

Hello I'm fairly new to GSAP (and loving it BTW) and completely new to the forums (?). Using it in all commercial projects now. I'd like to set up a series of 'layers' on the page that scrub, using batch (So I only need to call the animation on a single class). This is what I have: ScrollTrigger.batch(".layer.anim", { onEnter: (elements, triggers) => { gsap.to(elements, { ease:'power1.inOut', delay:0.25, opacity: 1, stagger: 0.25, scrub:1, // added this, no joy.. duration:0.6, y:0 }); } }); I'd hoped adding 'scrub' to this would allow each layer to run onEnter... Does anyone have any ideas they can share for this? Thanks.