[Keep hover animation (scrolling text or image) continue for a short time on mouse-out.]

59 minutes ago, svenx said:

Hi there,

 

My name is Gaz, I am the Co-founder and Technical Director at Think3! Our actual approach was to use a clone feature similar to what @PointC has showcased done. You can actually see a better implementation here on another site that we built https://theukswapshop.co.uk/ (without mouse events)

Great job Gaz on both sites. Nice use of subtle animations throughout. Keep up the good work! 

[Keep hover animation (scrolling text or image) continue for a short time on mouse-out.]

8 hours ago, mikel said:

 

Hey Zach,

 

Convincing idea to use SplitText for a marquee. Great!

 

 

 

 

Happy splitting ...

Mikel

 

Very cool with the green text effect. Thanks.

[Keep hover animation (scrolling text or image) continue for a short time on mouse-out.]

1 hour ago, PointC said:

Yep - for sure. I was just referring to the OP's demo and SplitText seemed like overkill for the desired result whereas a quick clone seemed like a quick and easy approach. Always lots of options with GSAP.

 

 

Hey Craig, thanks a million as well for your input. Super concise! It works great even when you leave and quickly re-enter with the mouse, no stutter whatsoever. Amazing.

[Keep hover animation (scrolling text or image) continue for a short time on mouse-out.]

Truly amazing and so elegant. Thank you for writing this up and doing it so clearly, bravo.

Great article on css-tricks btw. I've bookmarked it for future reference.

Thanks again and happy new year. 

 

[Keep hover animation (scrolling text or image) continue for a short time on mouse-out.]

Not entirely sure if this is a GSAP thing, although I suspect it is: https://think3.co.uk/services/ On hover on one of the 'cards' the animation still continues for a short period of time. How would I go about and emulate behaviour like this? Any information in the right direction would be super helpful. I've been breaking my brain over this, but maybe I'm missing something obvious or not using the right key-words to search. Normal CSS behaviour with keyframes just starts the animation on hover but goes back to the start of the animation (original position) on mouse-out. Thanks a bunch!

 

See the Pen RwGQXdQ by ndrs (@ndrs) on CodePen