Fade in HTML sections on scroll

[mfosmfos]

Hi,
 
I'm trying to animate in HTML sections containing some content on scroll using scollmagic but all my sections are being animated at the same time.

 

See codepen i've created. 

I'm very fresh with JS so likely i've overlooked something or its not possible the way I'm implementing it.

 

My idea is that each section shares the same animation, but just fired as and when it comes into the viewport.

 

Clearly i've missed something.

 

Hope someone can help.

 

Thanks.

 

 

See the Pen LNxOoY by mikefoster (@mikefoster) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

You will probably get much better help in the Scrollmagic forums.

 

Yes, you are creating one animation that fades in all the elements at the same time. 

You will need to create unique animations for each element with unique triggers.

I imagine it will be fairly easy with a loop or you can just manually create each one. 

I'm just not that familiar with ScrollMagic.

 

Definitely go through Petr's tutorials: https://ihatetomatoes.net/5-days-with-scrollmagic/