Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ndrs81

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

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 post
Share on other sites

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 post
Share on other sites

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. 

 

  • Like 1
Link to post
Share on other sites

 

Hey Zach,

 

Convincing idea to use SplitText for a marquee. Great!

 

See the Pen eYdMZeB by mikeK (@mikeK) on CodePen

 

Happy splitting ...

Mikel

 

  • Like 3
Link to post
Share on other sites

Here's my simple two cent approach which just clones the h1. YMMV.

 

See the Pen ExgExxL by PointC (@PointC) on CodePen

 

Happy tweening.

:)

  • Like 4
Link to post
Share on other sites

 

Hey PointC,

 

Sure, a clone is the simple concept.
If necessary, additional animation aspects can be created with split text.

 

Mikel

  • Like 1
Link to post
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 post
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 post
Share on other sites
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.

Link to post
Share on other sites

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)

Link to post
Share on other sites
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 post
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.

×