Animated sections that freeze until the story has ended

[muuvmuuv]

Hey,

 

I'm currently working on a project with GSAP and scrollmagic. I want to create sections that has scroll animations inside with scrollmagic. So a section freeze for the time other animations came into. Is this section over it should smooth scroll to the next section. I call that somehting like scrollytelling.

 

1. each section has a story like on scroll there are elements that coming in part a part.

2. if a section has ended the story it should scroll to the next section without effects, like a normal onpager

3. it should be navigatable via next/prev buttons and dots for each section

4. all sections sould be responsive, so I can create querys for tablet/desktop/XL-desktop screens

 

Here the stack where I have a screenshot and detailed information: Stackoverflow

I attached a codepen with sections and the beginning of my scrollmagic.

 

Maybe someone has done a similar project or could help me a bit. I want to show first results until the end of next week.

 

Here is a image how it should look:

 

See the Pen PbXXXr by muuvmuuv (@muuvmuuv) on CodePen

See the Pen by PbXXXr (@PbXXXr) on CodePen

[Carl]

Sorry, I'm not very familiar with ScrollMagic.

We really have to focus our efforts on questions that relate directly to the GSAP API.

This seems more like you need help setting up your project and managing multiple ScrollMagic scenes which is a bit beyond the type of support we can offer.

[muuvmuuv]

Sorry, I'm not very familiar with ScrollMagic.

We really have to focus our efforts on questions that relate directly to the GSAP API.

This seems more like you need help setting up your project and managing multiple ScrollMagic scenes which is a bit beyond the type of support we can offer.

 

I think it is both. The tweening is done by gsap with timelinemax. I figured out that I can set a Pin and so the section is waiting for the other animations until they are done.

 

Hopefully it was just a try to get some pro mention about my idea and a hint to the right direction