Conditional Masking

[Alex J.]

Hey there awesome people on the Internet, 

Recently, I came across this awesome Menu Interaction on hover over at https://www.baunfire.com/. 

 

This got me thinking if this is something we could possibly do using GSAP? The challenges which I am facing is: 

- How to make it smooth (the add class on mouseenter and removeclass on mouseleave might end up making the interaction laggy).

- How to have that right to left opacity 0 effect. (I have seen those with images using gradient, but this is the first time I am seeing something like this on Text). 

 

Thank You ) 

[Carl]

it looks to me that they may just be animating the clipPath property.

With gsap you would play() and reverse() a tween as opposed to adding and removing classes

 

Here is a basic example using hover

See the Pen oNGzKWR by snorkltv (@snorkltv) on CodePen

 

Here is a more advanced sequences that uses a custom effect using gsap.registerEffect()

See the Pen rNMvpLq?editors=0010 by snorkltv (@snorkltv) on CodePen

 

Hopefully the first demo is enough for you to modify for your needs. If you need help with the second example check out my courses (link in signature) I have a detailed lesson on how it was built. 

 

[Carl]

Also, the first example may also work with a hard-edge gradient fill on the text that gets animated. I may have to explore that further some day.

[Alex J.]

Hey @Carl Thank you so much for sharing so much information and codepen demo. 

 

I tried using the class approach with the above method (to apply the animation to particular menu item from the list), but for some reason it's not working for me. 

 

Here's a codepen link to the same: 

See the Pen rNGWLzj by alexjain (@alexjain) on CodePen

 

Another issue which I am thinking off the back is How can we have the FG visible on load and reverse all other menu items when hovered over a menu item. And make all the FG visible again once no menu item is being hovered over (like with baunfire's menu).

 

Btw I just started watching your GSAP 3 Express Series, loving it. Wish I could binge watch it, but unfortunately it only allows me to watch certain videos per day. 

 

Thank You ) 

[Carl]

Glad to hear you are enjoying GSAP 3 Express! Currently the Free Trial of the course and a handful of bonus lessons get released over the course of a week. Students who want to learn more faster have the option of unlocking all my courses (over 130 lessons) for less than $10 a month. 

So far it has provided a nice balance of allowing thousands of students to learn GSAP for free while I still make some money (necessary). 

 

One of my lessons covers how to loop through multiple elements and assign them an animation. When you interact with that element its animation will play or reverse. If you choose to "open" an element we use a variable to track which element is currently open so we can close it

 

See the Pen BaLWxLW by snorkltv (@snorkltv) on CodePen

 

In your approach you are creating an animation BEFORE you are applying your classes that you are using to select the target of the animation. 

 

When you add and remove classes it has zero impact on tweens that you created prior.

 

We typically don't build out full feature requests here, but since you invested the time in providing a demo that was "ready to go" and this could make for a good lesson I made some modifications to account for your recent requests.

 

It may be a bit much for someone just starting out but it builds off the the the techniques in the demo above. 

In the "mouseover" event I'm looping through ALL the menu items and reversing the animations of all the elements that are not being rolled over. 

This is really only necessary to accommodate your request that on initial load all menu items are fully visible.

 

See the Pen vYeybEG?editors=0011 by snorkltv (@snorkltv) on CodePen

 

Note, I'm not adding or removing any classes but you can add that in if for some reason it's necessary. Hope this helps!

[Alex J.]

Thank you so much @Carl Love how you go steps further to help while explaining everything so gracefully. You make learning GSAP even more fun and easy!

[Carl]

Thanks for the nice note. Glad the demos helped.