Jump to content
Search Community

ScrollTrigger with fixed backgrounds and decoupled slides

deodat test
Moderator Tag

Go to solution Solved by ZachSaucier,

Recommended Posts

Hello!

I'm trying to build a slider with fixed backgrounds and slides with content that come with a vertical transition (at the end of this post).

 

I'm not sure I've chosen the good strategy, I begun with this ScrollTrigger demo codepen : 

See the Pen rNOebyo by GreenSock (@GreenSock) on CodePen


The result isn't totally fluid... 

I'd like to know what you would have done to achieve this?

 

I'd like to trigger the slide change (background's fading and content transition) each time I begin to scroll. I tried something with the ScrollTo plugin but it was pretty janky when I started to use my trackpad   

See the Pen GRjNjxx by deodat (@deodat) on CodePen

 (now I'm trying to set a variable to avoid scrolling when the animation isn't completed).

Thanks a lot in advance for your advices and ideas!

Deodat

See the Pen ZEpXpLB by deodat (@deodat) on CodePen

Link to comment
Share on other sites

  • Solution

Hey deodat. I'm afraid I don't understand what you're asking. 

 

The first demo in your post doesn't do any real scroll jacking, it leaves the user in complete control over the scroll (except at the very start/end when it loops to the other side). Both of your demos on the other hand attempt to scroll jack, taking the control away from the user. ScrollTrigger isn't really built to do that. I recommend that you read the posts in this thread for more info including the warning that we don't really recommend restricting scroll in this way as it's error prone no matter how you do it. 

 

Link to comment
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.
×
×
  • Create New...