Scrolltrigger and multiple pin

[Superloop]

Hi!

I'm trying to do the following thing but I'm doing wrong :
1- scroll and pin scene1 when its bottom is 100%.

2- then I want to rotate the text of scene1 and when finish, show scene2 with opacity over the scene1. I also would like to unpinned scene 1 when the opacity of scene2 is finished.

3- then I want to scroll horizontal scene2 until the end and rotate the text of scene2.

4- when scene2 arrives to the end, I want to show scene3 with opacity and pin it, like step 2 with scene2. When it's pinned I want to scale the text of scene3.

 

Anybody could help me and tell me what I'm doing wrong or what I didn't understand about ScrollTrigger?

 

Thank you very much!

See the Pen zYajrWM by marctaule (@marctaule) on CodePen

[Cassie]

Hey there! Do you still need help with this?

I read the step-by-step and compared and it seems to be doing what you're after? If you fixed it, great job - But if you do need more help could you explain what is happening that's undesirable? Thanks!

[Superloop]

Hi @Cassie,

I have updated the above example with a more or less real example. With this example I think it's easier to explain my problems

 

See the Pen zYajrWM by superloop (@superloop) on CodePen

 

My problems:

- Scene 1:

• Between scene 1 and 2 (when I scale the building) I would to pause the scroll (user can scroll but not change the scene) for 1-2 seconds and then change to scene 2. I don't know if it's possible.

- Scene 2:

• it is very fast and I would like to make it slower. I tried to change the end position but I have not succeeded
• When I finish scene 2 and go to scene 3, I would like to keep pinned the scene 2 after scene 3 has opacity 1, not before.
• I would like to make parallax (different speed) with the trees.

- Scene3:

• I would like to make scene 3 slower, but not the initial opacity, just the opacity of the cars.

I hope you can help me.

Thanks!

[GreenSock]

3 hours ago, Superloop said:

• Between scene 1 and 2 (when I scale the building) I would to pause the scroll (user can scroll but not change the scene) for 1-2 seconds and then change to scene 2. I don't know if it's possible.

I'd strongly recommend against that. As a user, that's extremely unintuitive. If I scroll, I want the site to honor my request, not force me to sit there for an extra few seconds watching an animation. Plus, you'd run into logic problems - how would you map the scrollbar position properly if you're basically unhooking it during that time? Think about if someone scrolled REALLY fast so that the scrollbar hits the bottom but you're forcing them to still stay at that one part for a few seconds toward the top...you'd either have to keep making the page longer and longer so that the scrollbar still has the proper room left (which of course causes problems when you want to scroll back up) -OR- you risk the user running out of scroll space and being "stuck" because the scrollbar is all the way down but they still have more content to scroll through. Both are pretty terrible UX.

 

Technically it is possible to force the browser to refuse scrolling (you can use ScrollSmoother's .paused() feature or wire up some custom logic with Observer), and that has no logic issues but users might think something is broken if they are trying to drag the scrollbar and it refuses to move, for example. 

 

3 hours ago, Superloop said:

• it is very fast and I would like to make it slower. I tried to change the end position but I have not succeeded

 Please read this: 

https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub

 

To make it longer, just adjust the "end" value. Right now you've got "bottom top" but you could use a relative value like "+=5000". 

 

As for your other questions, I'd strongly recommend slowing down and isolating questions into a different forums thread for each. The more you focus and isolate things and create very minimal demos just for that one piece, the greater your chances of getting solid answers. These forums aren't generally for "here is my list of requirements...please show me how to accomplish it all". We're happy to answer any GSAP-specific questions, though (like API questions). 

 

By the way, ScrollSmoother has a feature that makes it very easy to create parallax effects (use the data-speed attribute). You can do it manually with just ScrollTriggers too, of course. 

 

Good luck with the project! 👍 And thanks for being a Club GreenSock member! 💚

[Superloop]

Thanks @GreenSock!

You're right, I wasn't specific with my questions

You are right about the scroll speed. Maybe I needed to test it to see that it won't work properly for the user, but with your thoughts it's clear to me.

 

Thanks again!