Jump to content
Search Community

Applying A TimeLine To A Number Of Elements When Hovered

OneManLaptop test
Moderator Tag

Recommended Posts

Hey folks. So I've been trying to apply a tween to a series of columns, which plays when the columns are individually hovered. I've completed this process several times for other projects, but for this project, I'm trying to not only tween the element I'm currently hovering over, but the elements I'm not and this is creating some unexpected and random behaviour.

 

I've created a code pen with a reduced example which demonstrates the problem:

 

The expected behaviour, is that when the user hovers over a column, the "Link" word fades out on all the surrounding columns, but remains for the one which is currently hovered. So for example, if the user hovers over the column containing Link 2, then the Link 1, Link 3 & Link 4 text on the other columns should fade out, but the Link 2 text should remain. When the user is no longer hovering over any columns, the "Link" text should return to an opacity: 1 value for all columns.

 

The effect actually works as intended if you scroll the mouse over a single column from the bottom up, but when you move the mouse pointer over to the other columns from the left or right, then the "Link" text fades in and out on non-hovered columns, becomes stuck on the hovered element and just generally behaves very erratically.

 

I am assuming the problems will stem from the tween being interrupted part way through and I have attempted to use .isActive() and .progress() to try and catch and finish the tween before it is triggered again, but these attempts failed and weren't fit for demonstration.

I don't take this community for granted and I only ask for help when I'm genuinely stuck and I feel I've reached the limits of my own ability to fix things (watch it be something incredibly obvious now), so I am genuinely grateful to anyone who is prepared to take the time to help me with this. Thanks. 😀

See the Pen XWKBBpG by OneManLaptop (@OneManLaptop) on CodePen

Link to comment
Share on other sites

Hey David. 

 

23 hours ago, OneManLaptop said:

I am assuming the problems will stem from the tween being interrupted part way through

Yep, that's a part of it. There are some logical issues. You have a lot different pieces going on here. 

 

I think it would help you if in situations like this you started from the beginning and built your animations piece by piece from the start so that you have a full grasp of what's going on. I also I recommend that you handle all of the animations using GSAP instead of mixing GSAP with CSS transitions so that you have full control over your animations. I also recommend that you don't try to affect other feature sections in the timeline of a feature section.

 

Here's how I'd set it up:

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

 

P.S. I noticed you used TimelineMax, the old ease formatting, and the second parameter for the duration. We recommend using the new syntax as it is simpler and lets you use some of the new GSAP 3 features like defaults :) We also recommend using the position parameter over delay for tweens in timelines.

  • Thanks 1
Link to comment
Share on other sites

Hey Zach, really appreciate the response and your helpful pointers.

 

I did initially have GSAP handle all the animation, but I noticed that the GSAP flex tween seemed to give the animation a two step timing jump which native CSS transitions didn't have, so in this instance, I opted for a blend.

 

As to the actual problem, I will indeed rebuild it as you say and separate the parts of the timeline out so that they're not fighting each other. Makes sense.

 

As you can tell, I do often try to run before I can walk with the programming side of things. I'm basically a CSS / layout guy who fell in love with GSAP and that's pushed me to become familiar with javascript, but it can be a struggle.

 

Anyway, thanks again for the response. :-)

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