Jump to content
Search Community

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

ndrs81 test
Moderator Tag

Go to solution Solved by ZachSaucier,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

Hey ndrs81 and welcome to the GreenSock forums. You're right, GSAP is great at this sort of thing and this sort of thing is impossible to accomplish with CSS alone. 

 

There are a few different aspects in play to create this effect:

  1. The text is animated with a constant velocity while the container is hovered.
  2. Each letter wraps around to the end (right side) when it goes off screen in the beginning (left side). This can be done using GSAP's built in modifiers plugin as this thread covers.
  3. When the container is un-hovered, the velocity is animated to 0 over time.

There are a couple of ways to set up steps 1 and 3. I chose to do it using GSAP's timeScale functionality but you could do it by animating a velocity value instead.

See the Pen bGwvGaq?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I recommend taking your time to go through the code I wrote (I added a lot of comments) and use the GSAP documentation anytime you come across something in GSAP you haven't seen before. 

 

You might also learn from my article about animating efficiently

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

45 minutes ago, mikel said:

If necessary, additional animation aspects can be created with split text.

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. :)

 

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 3 weeks later...
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! 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...