Creating a single wider/longer slide from section slides in using Skrollmagic

[nuggetzs]

I am new to ScrollMagic and still learning JS, I am trying to have the second slide in my codepen to last longer when you scroll through it. Right now in my #slideContainer, I've set width to 1000% because this sets the width of the pages to be expanded and have longer scroll when scrolling through them horizontally. 

#slideContainer {
		width: 1000%;
    height: 100%;
    position: absolute;
}

What I want is to only have this effect for a single slide only, in this case, only for Page two. I tried making another #slideContainer, which I named #longerScroll (it is commented out now) where it would be applied in a div for.page2. I tried to wrap .page1 wrapped inside the#slideContainer div and then .page3 and .page4 in a separate #slideContainer div and that didn't work so I am kinda lost. Would I have to change something in my JS and make an additional set of animation for .page2 with #longerScroll? 

See the Pen pozXMEP by cpintor (@cpintor) on CodePen

[ZachSaucier]

Hey nuggetzs and welcome to the GreenSock forums.

 

ScrollMagic isn't a GreenSock product and we don't really support it here.

Maybe this post by our very own Craig can help you:

We really try to keep these forums focused on GSAP-specific questions. It looks like the ScrollMagic author does offer paid support which you can learn about at https://support.scrollmagic.io/.

 

The only thing I can really suggest is trying playing around with the durations, both in GSAP and ScrollMagic.

If you have any GSAP-specific questions, we'd love to help. Good luck with your project!