ndrs81 Posted January 1, 2021 Share Posted January 1, 2021 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 More sharing options...
Solution ZachSaucier Posted January 2, 2021 Solution Share Posted January 2, 2021 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: The text is animated with a constant velocity while the container is hovered. 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. 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. 4 1 Link to comment Share on other sites More sharing options...
ndrs81 Posted January 2, 2021 Author Share Posted January 2, 2021 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. 1 Link to comment Share on other sites More sharing options...
mikel Posted January 2, 2021 Share Posted January 2, 2021 Hey Zach, Convincing idea to use SplitText for a marquee. Great! See the Pen eYdMZeB by mikeK (@mikeK) on CodePen Happy splitting ... Mikel 3 Link to comment Share on other sites More sharing options...
PointC Posted January 2, 2021 Share Posted January 2, 2021 Here's my simple two cent approach which just clones the h1. YMMV. See the Pen ExgExxL by PointC (@PointC) on CodePen Happy tweening. 5 Link to comment Share on other sites More sharing options...
mikel Posted January 2, 2021 Share Posted January 2, 2021 Hey PointC, Sure, a clone is the simple concept. If necessary, additional animation aspects can be created with split text. Mikel 1 Link to comment Share on other sites More sharing options...
PointC Posted January 2, 2021 Share Posted January 2, 2021 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. 1 Link to comment Share on other sites More sharing options...
ndrs81 Posted January 2, 2021 Author Share Posted January 2, 2021 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 More sharing options...
ndrs81 Posted January 3, 2021 Author Share Posted January 3, 2021 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 comment Share on other sites More sharing options...
BetteHoward Posted January 4, 2021 Share Posted January 4, 2021 You're done really great work, with good colors. Link to comment Share on other sites More sharing options...
svenx Posted January 25, 2021 Share Posted January 25, 2021 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 comment Share on other sites More sharing options...
ndrs81 Posted January 25, 2021 Author Share Posted January 25, 2021 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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now