Scale and Fade Out/In 5 full screen Backround Imgs on Scroll

[devwise]

I am using Scrollmagic with Greensock in hopes to achieve a transition effect with 5 full screen background images.  Each image is positioned behind the other using absolute positioning and z-index I would imagine...and possibly a fixed position on a container div?...not sure about this.

 

On scroll the backgound images should scale up to 1.2 and then fade out, to have the next background image fade in as well as scale up to 1.2.

 

How can this be achieved, and have enough scroll headroom to scroll through each div.....when I tried I could get the first div to fade into the next, but I would run out of scroll...it was scrolling only the size of one div then hitting the bottom of the page.

 

Really trying to figure this out.  I really appreciate any feedback anyone may have.

[mikel]

Hi @devwise,

 

Welcome to the GreenSock Forum.

ScrollMagic is a well-documented library. And you will find many suggestions there.
Please set up a test case to see where it is stuck with your code.

 

Here's just an attempt to handle your case, as I understand it, without using another library.
But to trigger the animation once caused by scrolling is tricky.
The timeout solution is certainly not the best.

 

See the Pen 6ca806db93773e99641258d10cf9a580 by mikeK (@mikeK) on CodePen

 

After lunch: why not just a flag?

 

See the Pen 94a2ec315c171a50b816af65f345e7de by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[devwise]

Thank you for your feedback Mikel.  I will try implementing your example as well as look on the Scrollmagic documentation.  I recall trying position fixed on the container div, and for some reason this was sending the div to the top of the whole web site.....not just the viewport.  Not sure why...could it have something to do with the window.scrollTop()?

 

Anyhow I will attempt to solve this starting with your example and post back with some code If I run into any issues.  

 

Thank you again!