Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
nuggetzs

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

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to post
Share on other sites

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!

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×