Animation advice for light bulb

[Winslow]

I currently  have two full viewport background images of the same light bulb so when you scroll with fixed position it looks as one. However I have a third image that I overlay "making" the light come on. I have spent many hours researching different animations (opacity, which kind of works however I then got into keyframes, Brightness filters, and currently trying to actually add the background image via JS.) I found a logo with kind of "metal" sparkle, flash animation which i tried however it used a lot of perspective and it would take me lot's of time to fine tune the detail for my situation. 

 

I would just prefer starting the image without any "light affects scrolling headings up and gradually brighten as you are scrolling or over time. If someone who may have accomplished this or something similar might be willing to give some advice on animating this I would be forever grateful.

 

See the Pen yLeLgxo by B0nef1sh (@B0nef1sh) on CodePen

[ZachSaucier]

Hey B0nef!sh. How are you imagining the three images to relate? With the two that you have already, it kind of looks like the light comes on when the second one is visible. What more/else/difference are you wanting? 

[Winslow]

Yes this is how I started but was wanting to "fade" it in. Starting out with no visibility to the last img and then getting brighter and lastly maybe adding blend mode screen, scaling, filter . I tried filter brightness, opacity, and like I stated, adding the last image in via JS but cannot figure out how to gradually increase.

 

The current setup just reveals a "turned on" light.

 

Regard

[ZachSaucier]

I would use GSAP's ScrollTrigger instead of ScrollMagic (I find it to be more powerful and easier to use; not to mention the smaller file size). I would just fade in the light when scrolled:

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