Spotlight animation

[brain_dev]

Hey guys!

I have a hero image with a city skyline (vector drawing). I want to recreate the bat signal on top of one of the buildings. I'm using an image as the spotlight (could make an SVG as well, whatever works best). I know how to create it in CSS but I'm brand spanking new to gsap so I was wondering if someone could point me in the right direction where I can recreate the same animation using gsap 3. The only way I managed to do it was to use a timeline and change the rotation, x, and y values every 10 degrees lol which is dumb. Any input would help, thanks!

See the Pen vYyKRWa by gabbydiaz (@gabbydiaz) on CodePen

[ZachSaucier]

Hey brain_dev and welcome to the GreenSock forums.

 

Sorry, but what's your question?  I am not sure which part you're seeking help with. Are you seeking the GSAP equivalent to your CSS animation?

[PointC]

This SVG demo is from another thread but perhaps it'll give you a start.

See the Pen XWXvpBd by PointC (@PointC) on CodePen

[brain_dev]

On 2/9/2021 at 9:25 AM, ZachSaucier said:

Hey brain_dev and welcome to the GreenSock forums.

 

Sorry, but what's your question?  I am not sure which part you're seeking help with. Are you seeking the GSAP equivalent to your CSS animation?

Yes pls, and thanks.

[ZachSaucier]

Here's one way of setting it up (there are multiple):

See the Pen yLVaQzB?editors=0110 by GreenSock (@GreenSock) on CodePen

[brain_dev]

@ZachSaucier perfect, thanks so much for your help.