GSAP Torch Reveal Effect

[Matthew Meaklim]

Hello,

 

Excuse the title, not sure how to describe what I'm after really. And apologies if this question has already been asked.

 

I've set up a CodePen to assist... hopefully.

 

What I want is to essentially have the ".revealer" div follow the cursor to reveal the text underneath. I can get the parent div to move about no problem (commented out JS), however I'd also like the child div ".content" to remain in place, else do the exact opposite of what the parent does so that it looks like it remains in place, e.g. if ".revealer" was translated 50px 50px, ".content" would be translated -50px -50px.

 

Perhaps I'm way off with my thinking, but it my head it could work...

 

Many thanks as always.

 

Also, if it helps, the effect is similar to what's shown here, however I just want to reveal the child content, not show new content; http://minhpham.design/.

 

See the Pen GRzOvBe by ilimitadostudio (@ilimitadostudio) on CodePen

[mvaneijgen]

Does this demo help? This is created by one of our users! @alig01, who really poured in lines of code, debugging and probably some caffeine to get this to work. 

 

See the Pen WNLGogV by alig01 (@alig01) on CodePen

[Matthew Meaklim]

Hi @mvaneijgen,

 

That's actually more advanced than what I need, but I can certainly work with it so thanks very much - and kudos to @alig01.

 

Many thanks for the quick response.