GSAP timeline sometimes works correct and sometimes does not

[tallulahh]

Hey!

I have been playing around with clip-paths and overlays and what I am aiming to do is hover over the word ".image-title" and an image will appear giving the effect that the text only being framed by the image will change to have white outline. (Easier to show than explain..)

Actually, I am pretty sure that the timeline is not the issue here, I think it has something to do with the jQuery event triggers. I was hoping someone could help me understand why sometimes the white ouline text appears and why sometimes it doesn't and how I could fix this? It is tricky because i want the image and white outline to appear ontop of the original text, but the original text needs to be listening for the event triggers.

Thanks for reading!

See the Pen bGgOpXd by tallulahh (@tallulahh) on CodePen

[Shaun Gorneau]

Hi @tallulahh,

 

There are a few things going on here that will compete with each other at times, producing unexpected results. Here are a few tips I can point out to help reduce the chances of unexpected results.

1. When at all possible, rely on the DOM hierarchy to handle stacking order. While it is reasonable to modify z-indexes to change stacking order, many times it's just not necessary. Removing that from the equation greatly reduces the potential for the unexpected. In my fork, I flipped the order of the .image-overlay and the img within .overlay-container.
2. If you expect Javascript to change a CSS property on an element, use Javascript to set its initial presentation value too; don't use CSS to define initial properties (like opacity and visible) that will be tweened. You can see I went through the CSS and ripped out all things z-index, opacity, visible, etc. This will also help with graceful degradation in the event that Javascript doesn't execute.
3. When possible, create a timeline once (not over and over with each event trigger).
4. When possible, don't use two timelines to control the same elements. In your example, a timeline is created for each of the in/out states. But we can create one timeline and play it forward/reverse as needed for the hover event.

Lastly, by dynamically creating variable names for timelines, we can create them (once) and address them repeatedly without the need to keep recreating them and without the bulky logic of switch statements.

 

Have a look here

 

See the Pen zYNyBxp?editors=0010 by sgorneau (@sgorneau) on CodePen

 

Hope this helps!

 

Shaun

 

[tallulahh]

Thanks so much @Shaun Gorneau!

I definitely felt like I was repeating too much code but I'm a bit of a beginner, so thanks for fixing it up.

However, it has lost one main functionality. Originally, any white outlined text overflowing the frame of the image would be hidden, so the outer edges would have original color whilst the middle would be white.

I removed the first timeline animation on ".image-title" and all sorted! Thanks for all the help!!

[Shaun Gorneau]

For that you'd just want to remove the tween on .image-title. I also change the hover event back to a higher parent to account for the bigger area being the active zone.

 

And you'll want to add a media query to handle the wrapping that would occur at smaller screen sizes. Have a look,

 

See the Pen eYgbBVd?editors=0010 by sgorneau (@sgorneau) on CodePen

 

 

[Sunflair]

Thank you! Reading this article helped with a similar question, and reminded me of the basics of defining opacity through out the tl.