Vertical pinned scroll inside container

[reker_7]

Hey! There is a problem with the implementation of animation on my site, it is necessary to make scroll sections with attachment to the top of the page, then in this section should change the photo. then overlay the next section on top and scroll through the photo in it.
Can you tell me how to track the completion of the horizontal slider to continue flipping sections.

Example of section scrolling

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

Example of horizontal scrolling of pictures in them:

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

Here is the current implementation code:

See the Pen dyQJeXK by Reker7 (@Reker7) on CodePen

[mvaneijgen]

Hi @reker_7 welcome to the forum!

 

Yes these are both great demos! But that doesn't mean you can just merge them both and be done with it. You have to cherry pick the functions you want from them and start from scratch in your own demo. Right now, in your demo there are ScrollTriggers up on ScrollTriggers that conflict each other.

 

My advise to anyone starting out would be you hardly need more then one ScrollTrigger for any given effect and the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.

 

Check out the video above it really has a good demonstration on how you work with GSAP/ScrollTrigger. I've taken notes from this video to implement in your pen. I've placed comments in the JS to explain certain parts better. This surely isn't the final result you're looking for, but it demonstrates how little code is needed to have an animation connected to ScrollTrigger. Hope it helps and happy tweening! 

 

See the Pen rNQprpV?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[reker_7]

Thanks for the detailed answer and so detailed, read the video, finally got to implement what I needed! The only thing I couldn't figure out yet is how to shorten the distance to the first block:

See the Pen RwqxYBm by Reker7 (@Reker7) on CodePen

Thank you for your time! Your answer gave very important information for me)

For some reason the display of the example in CodePen is different for me and when I click on the link (((

[mvaneijgen]

Well right now it is a forEach loop which runs the same code for each section. If you don't want this to happen you could write a custom animation for each section.

 

Personally I like it this way, just write out your timeline like you want things to happen, this way you can see a pattern emerge and when you can see that it allows you to optimise the code, now you know what it should do.

 

As you can see only the first one is different, so give all the sections you want to repeat a custom class and don't put that on the first one, then you can animate the first slide manually and the repeating slides with a loop. Again hope it helps and happy tweening!  

 

See the Pen jOQYeKz?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[reker_7]

Thanks for your time! And for the very useful information. The topic can be closed)

[reker_7]

I'm so sorry. I can't realise smooth switching of slides. I've already tried different variants of "ease" and timeScale properties, but I can't get to the truth, or I'm wrong and slowing down the switching of slides should be done through scroll, in my case Locomotive Scroll is connected, but when trying to configure it, all animations are broken

[Rodrigo]

Hi,

 

There might be something else in your setup causing this since there are examples that combine ScrollTrigger pinning with Locomotive, like this by @akapowl:

See the Pen NWBOKYB by akapowl (@akapowl) on CodePen

 

Without a minimal demo there is not a lot that we can do to help.

 

Hopefully Paul's example helps you getting started.

Happy Tweening!

[reker_7]

See the Pen RwqxYBm by Reker7 (@Reker7) on CodePen

 

 

Hey! Here's an example of the animations I'm currently working with, the problem is the sharpness of the slide switching.

[Rodrigo]

Hi,

 

What exactly is wrong with your latest example? Looks just like the one @mvaneijgen provided yesterday and that was marked as the solution of the thread.

 

Finally your latest example is not using Locomotive Scroll as you mentioned in your previous post 🤷‍♂️

 

Happy Tweening!

[reker_7]

made changes to the example, the problem is the speed of switching slides and overlaying the next section, it's too fast) 

See the Pen RwqxYBm by Reker7 (@Reker7) on CodePen

[Rodrigo]

You could increase the amount of pixels for your end point:

const tl = gsap.timeline({
  // Create one timeline for all your animations
  scrollTrigger: { // This timeline will get controlled by one ScrollTrigger
    trigger: ".allMySections",
    start: "top top",
    end: "2000px top",// here
    scrub: true,
    pin: true,
  }
});

This is from the docs regarding the end property:

String | Number | Function - Determines the ending position of the ScrollTrigger. It can be any of the following:
String - Describes a place on the endTrigger (or trigger if one isn't defined) and a place on the scroller that must meet in order to end the ScrollTrigger. So, for example, "bottom center" means "when the bottom of the endTrigger hits the center of the scroller". "center 100px" means "when the center of the endTrigger hits 100px down from the top of the scroller" (assuming vertical scroll). You can use keywords like "top", "bottom", "center" (or "left" and "right" if horizontal: true) or percentages like "80%" or pixel values like "100px". Percentages and pixels are always relative to the top/left of the element/viewport. You can also define a single relative value like "+=300" which means "300px beyond where the start is", or "+=100%" means "the height of the scroller beyond where the start is". "max" is a special keyword indicating the maximum scroll position.
Number - An exact scroll value, so 200 would trigger when the viewport/scroller scrolls by exactly 200 pixels.
Function - A function that gets called whenever the ScrollTrigger refreshes and calculates its positions (typically upon creation and any time the scroller resizes). It should return a String or Number, as described above. This makes it easy to dynamically calculate values. Like all callbacks, the function receives the ScrollTrigger instance itself as the only parameter.
This is a static position that is calculated when the ScrollTrigger is created and when the scroller is resized, based on where things are in the normal document flow. It is not constantly recalculated, so for example if you animate the trigger/endTrigger, it won't constantly update the start/end values accordingly because ScrollTrigger is highly optimized for performance. You can call ScrollTrigger.refresh() to force things to be recalculated. The default is "bottom top".

 

It would be a good idea to watch this video @Cassie made:

 

Hopefully this helps.

Happy Tweening!

[akapowl]

11 hours ago, Rodrigo said:

 

Hopefully Paul's example helps you getting started.

 

That one actually isn't an example of mine - it's just a fork of the example in the .scrollerProxy() docs @Rodrigo  

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.scrollerProxy()

 

I added that info to the title of the pen now.