How does the SNAP functions work with different heights?

[RWalter]

hi,

I am just starting with my first GSAP project and I have problems with the implementation. I ask myself the question, how do I basically set up the project?

- Is the HTML structure ok for the project?
- Do I put images in the background better as <img> or as background-image?
- How does the SNAP functions work with different high sections?

...

 

In the end it should look like this:

 

Maybe you can have a look at my current state and give me some feedback.

 

Thanks in advance

See the Pen KKZxopV by typesonic (@typesonic) on CodePen

[Cassie]

Hi there!

We're happy to answer GSAP-specific questions. But this looks like a large undertaking with a lot of different questions. We can't really offer free custom consulting here.

 

It looks like you might be trying to do masking?
 

There are a huge amount of ways you can configure snapping, based on what you're trying to do! Docs info added below.

I would personally not worry about snapping until you have everything else sorted, then add it in.

 

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: Number - snap: 0.1 snaps in increments of 0.1 (10%, 20%, 30%, etc.). If you have a certain number of sections, simply do 1 / (sections - 1). Array - snap: [0, 0.1, 0.5, 0.8, 1] snaps to the closest progress value in the Array in the direction of the last scroll (unless you set directional: false). Function - snap: (value) => Math.round(value / 0.2) * 0.2 feeds the natural destination value (based on velocity) into the function and uses whatever is returned as the final progress value (in this case increments of 0.2), so you can run whatever logic you want. These values should always be between 0 and 1 indicating the progress of the animation, so 0.5 would be in the middle. "labels" - snap: "labels" snaps to the closest label in the timeline (animation must be a timeline with labels, of course) "labelsDirectional" - snap: "labelsDirectional" snaps to the closest label in the timeline that's in the direction of the most recent scroll. So if you scroll a little bit toward the next label (and stop), even if the current scroll position is technically closest to the current/last label, it'll snap to the next one in that direction instead. This can make it feel more intuitive for users. 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

This looks quite ambitious for a first project., but sometimes that's a great way to learn. My advice would be to start really small. Attack one bit at a time! That might mean just creating a demo with some coloured sections and getting the 'masking' working first. Then adding text, then adding snapping.

 

Good luck!

[Cassie]

There are also tons of great demos here to learn from!

https://greensock.com/st-demos/

[RWalter]

1 hour ago, Cassie said:

Hi there!

We're happy to answer GSAP-specific questions. But this looks like a large undertaking with a lot of different questions. We can't really offer free custom consulting here.

 

It looks like you might be trying to do masking?
 

There are a huge amount of ways you can configure snapping, based on what you're trying to do! Docs info added below.

I would personally not worry about snapping until you have everything else sorted, then add it in.

 

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: Number - snap: 0.1 snaps in increments of 0.1 (10%, 20%, 30%, etc.). If you have a certain number of sections, simply do 1 / (sections - 1). Array - snap: [0, 0.1, 0.5, 0.8, 1] snaps to the closest progress value in the Array in the direction of the last scroll (unless you set directional: false). Function - snap: (value) => Math.round(value / 0.2) * 0.2 feeds the natural destination value (based on velocity) into the function and uses whatever is returned as the final progress value (in this case increments of 0.2), so you can run whatever logic you want. These values should always be between 0 and 1 indicating the progress of the animation, so 0.5 would be in the middle. "labels" - snap: "labels" snaps to the closest label in the timeline (animation must be a timeline with labels, of course) "labelsDirectional" - snap: "labelsDirectional" snaps to the closest label in the timeline that's in the direction of the most recent scroll. So if you scroll a little bit toward the next label (and stop), even if the current scroll position is technically closest to the current/last label, it'll snap to the next one in that direction instead. This can make it feel more intuitive for users. 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

This looks quite ambitious for a first project., but sometimes that's a great way to learn. My advice would be to start really small. Attack one bit at a time! That might mean just creating a demo with some coloured sections and getting the 'masking' working first. Then adding text, then adding snapping.

 

Good luck!

hi Cassie, thanks a lot for your links and tips! I will think again how to build the project step by step. 

[Cassie]

Have fun! check back in if you get stuck.