How to make this right side snap to top and make scrolling more smoother?

[bntratox]

 

Hello,

 

I want to achieve same snapping & heavy/smooth scrolling effects on this example without the scroolsmoother library, is that possible?

(I want it only on the center black div, not on the whole page)

 

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

[mvaneijgen]

Sure just disable the plugin code and the custom CSS. Be sure to try thinks your self by modifying pens from others, breaking things and getting your hands dirty is the best way to learn!

 

See the Pen XWYojeW?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[bntratox]

2 minutes ago, mvaneijgen said:

Sure just disable the plugin code and the custom CSS. Be sure to try thinks your self by modifying pens from others, breaking things and getting your hands dirty is the best way to learn!

 

 

 

Hello, actually I wanted to post it like that but when I fork it because of the scrollsmoother library is premium my forks didn't worked.

I did this actually in my local server but I want to have similar snapping in the center part.

I mean I want colors to snap top of their container as like in the original one without the library. Is that possible? 

 

Also I want it to scroll smoothly like in the original one, a bit heavy instead of regular scroll of mouse.

[mvaneijgen]

There is no snapping happening in the either pen. You could look in to the snap property with ScrollTrigger, there is a lot more on the documentation page https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Snap:

 

Number | Array | Function | Object | "labels" | "labelsDirectional" - Allows you to snap to certain progress values (between 0 and 1) after the user stops scrolling. So snap: 0.1 would snap in increments of 0.1 (10%, 20%, 30%, etc.). snap: [0, 0.1, 0.5, 0.8, 1] would only let it come to rest on one of those specific progress values. It can be any of the following:

[bntratox]

Just now, mvaneijgen said:

There is no snapping happening in the either pen. You could look in to the snap property with ScrollTrigger, there is a lot more on the documentation page https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Snap:

 

Number | Array | Function | Object | "labels" | "labelsDirectional" - Allows you to snap to certain progress values (between 0 and 1) after the user stops scrolling. So snap: 0.1 would snap in increments of 0.1 (10%, 20%, 30%, etc.). snap: [0, 0.1, 0.5, 0.8, 1] would only let it come to rest on one of those specific progress values. It can be any of the following:

Im so sorry, Im searching for hours and didn't notice there is no snapping the smooth scroll effect made me thought there is also snapping there too. I noticed now there is no snapping.

So I will add snap but I cannot add that smooth slow scrolling without the library right?

[Rodrigo]

Hi,

 

You can add some smooth scrolling using GSAP ScrollSmoother Plugin.

https://greensock.com/scrollsmoother/

 

Also you can add a number for the scrub configuration:

scrollTrigger: {
  scrub: 1, // Number here
},

 

Scrub:

Boolean | Number - Links the progress of the animation directly to the scrollbar so it acts like a scrubber. You can apply smoothing so that it takes a little time for the playhead to catch up with the scrollbar's position! It can be any of the following Boolean - scrub: true links the animation's progress directly to the ScrollTrigger's progress. Number - The amount of time (in seconds) that the playhead should take to "catch up", so scrub: 0.5 would cause the animation's playhead to take 0.5 seconds to catch up with the scrollbar's position. It's great for smoothing things out.

 

Also you can use a more complex snap configuration in your ScrollTrigger instance as well.

Snap Object Config:

• Object - Like snap: {snapTo: "labels", duration: 0.3, delay: 0.1, ease: "power1.inOut"}, fully customizable with any of the following properties (only "snapTo" is required):
  • snapTo [Number | Array | Function | "labels"] - determines the snapping logic (described above)
  • delay [Number] - the delay (in seconds) between the last scroll event and the start of the snapping animation. Default is half the scrub amount (or 0.1 if scrub isn't a number)
  • directional [Boolean] - by default (as of version 3.8.0), snapping is directional by default meaning it'll go in the direction the user last scrolled, but you can disable this by setting directional: false.
  • duration [Number | Object] - the duration of the snapping animation (in seconds). duration: 0.3 would always take 0.3 seconds, but you can also define a range as an object like duration: {min: 0.2, max: 3} to clamp it within the provided range, based on the velocity. That way, if the user stops scrolling close to a snapping point, it'd take less time to snap than if the natural stopping point is far from a snapping point.
  • ease [String | Function] - the ease that the snapping animation should use. The default is "power3".
  • inertia [Boolean] - to tell ScrollTrigger not to factor in the inertia, set inertia: false
  • onStart [Function] - a function that should be called when snapping starts
  • onInterrupt [Function] - a function that should be called when snapping gets interrupted (like if the user starts scrolling mid-snap)
  • onComplete [Function] - a function that should be called when snapping completes

let tl = gsap.timeline({
    scrollTrigger: {
      trigger: ".container",
      pin: true,   // pin the trigger element while active
      start: "top top", // when the top of the trigger hits the top of the viewport
      end: "+=500", // end after scrolling 500px beyond the start
      scrub: 1, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar
      snap: {
        snapTo: "labels", // snap to the closest label in the timeline
        duration: {min: 0.2, max: 3}, // the snap animation should be at least 0.2 seconds, but no more than 3 seconds (determined by velocity)
        delay: 0.2, // wait 0.2 seconds from the last scroll event before doing the snapping
        ease: "power1.inOut" // the ease of the snap animation ("power3" by default)
      }
    }
  });

Hopefully this makes things clearer. Let us know if you have more questions.

 

Happy Tweening!