Jump to content
GreenSock

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

Hover multiple elements show text in div with SplitText

Go to solution Solved by ZachSaucier,

Recommended Posts

Hi All,

 

Second project!

 

I'm creating a contents page that has 10 panels. When hovered, each panel needs to populate a single div below with specific text - which is currently inside attributes of the specific <section> (".Slate-item").

 

(Eventually, each panel will also increase in width and play a video on the hover, but one thing at a time!).

 

I've 'almost' got it working, but there's an small issue, which I think may be caused by the way i'm structuring the code.

The current iteration is the closest I've got to getting it working.

 

The idea is you hover over the panel and three pieces of text are show, The first text -- "title" -- is effected by SplitText, and the other two -- "producer" abd "country" -- just fade in.

 

The issue I'm seeing is, if I hover over each panel one at a time, it seems to work fine. If I quickly drag my mouse over a couple of the panels a few times and then stop over a panel, the "title" text comes in fine, but there's a delay before the other two pieces come in and sometimes they don't fade in, they just appear.  

I had seen a delay before in a previous iteration, and the more times I hovered over a panel, the longer the delay became, but I don't think that seems to be happening now. It seems reasonably stable in its wrongness!

 

I'm not sure if it's because I'm creating the SplitText on the mouse event or if it's the structure of the code.

 

I had hoped to get to the end of this without leaning on you guys, but i'm just not seeing where i'm going wrong at the moment so if anyone can see what's happening, I'd appreciate it.

 

Cheers!

See the Pen OJRrwPR by darkgr33n (@darkgr33n) on CodePen

Link to comment
Share on other sites

  • Solution

Hey darkgr33n. As you likely know already, the issue is that you have unresolved conflict. I'm guessing you want to kill off the old timeline if there's a new one. Something like this:

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

 

Side notes:

  • It probably makes sense to use a single timeline instead of 3 for each so it's easier to manage. You can have sub-timelines if you want to.
  • I'm not sure why you're creating your timelines paused then immediately playing them.
  • You should use the position parameter instead of delay when putting tweens in timelines because it's easier to manage.
  • You've got a lot of unused variables. You also attach variables to the objects themselves a fair bit, which I'm not sure if you need to do. Take note of how I structured your variables.
  • Like 2
Link to comment
Share on other sites

17 hours ago, ZachSaucier said:

Hey darkgr33n. As you likely know already, the issue is that you have unresolved conflict. I'm guessing you want to kill off the old timeline if there's a new one. Something like this:

 

Hey Zach,

 

Thank you mate, again! Very much appreciated, and spot-on!!

 

Quote

Side notes:

  • It probably makes sense to use a single timeline instead of 3 for each so it's easier to manage. You can have sub-timelines if you want to.
  • I'm not sure why you're creating your timelines paused then immediately playing them.
  • You should use the position parameter instead of delay when putting tweens in timelines because it's easier to manage.
  • You've got a lot of unused variables. You also attach variables to the objects themselves a fair bit, which I'm not sure if you need to do. Take note of how I structured your variables.

 

It does make sense to use a single timeline! Ignorance is the reason I had setup one for each.

 

No reason for the pause - other than, as mentioned, I started by trying to get the hovered panel to be twice the width and then reversing on mouseleave and had copy/pasted when i was building the text timelines. Again, a lack of knowledge of the impact is at fault there ;)

 

Noted! As part of me trying to work it out, attaching the variables to the objects seemed to work better than what i had done previously, and i had looked at your replies to various posts and had pulled that through, without really understanding the impact. 

I've learnt loads since I started the first project, but my knowledge is rather patchy in places! 

 

I'm going to work on getting the hovered panel to expand to twice the width next so may be back with another question, but for now, thank you ;)

 

Cheers!
 

 

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