How to add different ease for different container

[Aldrin 0 Likes (Newbie)]

How to add different ease to different container for horizontal container as well as vertical container

See the Pen oNENaEL by aldrinbright (@aldrinbright) on CodePen

[GreenSock 18,246 Likes (Superhero)]

3 hours ago, Aldrin said:

How to add different ease to different container for horizontal container as well as vertical container

 

I'm not sure what you mean - can you elaborate? What exactly do you want eased differently - the ScrollSmoother movement? The snapping? It looks like you're trying to apply an ease directly to a ScrollTrigger which doesn't make much sense because that's just tied to wherever the scrollbar is (the user controls that). 

[Aldrin 0 Likes (Newbie)]

I'd like the snapping to be a little faster, it's taking too long.

[mvaneijgen 1,549 Likes (Superhero)]

@Aldrin `snap` can be an object where you can define in detail how you want to animate the snap.  See the docs

      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)
      }

[Aldrin 0 Likes (Newbie)]

when I add this snap object, snapping stops working 

[Cassie 5,121 Likes (Superhero)]

Heya!

 

That wasn't code to copy paste, that was just an example to show you the options. ☺️

Check out the docs and give it a go. if you get stuck we can help nudge you in the right direction.

[mvaneijgen 1,549 Likes (Superhero)]

42 minutes ago, Aldrin said:

when I add this snap object, snapping stops working 

 

That's great! Show us the demo and will let you know what went wrong!

[Cassie 5,121 Likes (Superhero)]

Hahaha, that's the attitude I have towards bug hunting and making stuff.

 

'Oh. It's broken in a different way now... PROGRESS'

[Aldrin 0 Likes (Newbie)]

See the Pen NWyPdBZ by aldrinbright (@aldrinbright) on CodePen

Here's the code, I'm trying to add snap to section one ( I want to increase the snap speed) , and in section two I want the section two to be pinned until the scroll animation is done. when I pin Section two the other pinned section breaks, please help

[Aldrin 0 Likes (Newbie)]

hmmm, It appears that you have all given up on me.....

[GreenSock 18,246 Likes (Superhero)]

6 minutes ago, Aldrin said:

hmmm, It appears that you have all given up on me.....

No, you're just asking a lot here and it's hard to decipher exactly what you want. I noticed several problems: 

1. You're creating your ScrollTriggers out of order. You should always create them in the order they'd appear on the page (top to bottom) -or- set a refreshPriority on them. 
2. You set a duration on the ScrollTriggers but there is no such thing. 
3. You set some strange values, like start: "top " which isn't valid, and you defined an endTrigger with no end value, and ease: true which is invalid. Again, it's hard for me to know what you're trying to do.

On 5/2/2022 at 4:56 PM, Aldrin said:

I'm trying to add snap to section one ( I want to increase the snap speed)

You don't have any snapping on that right now and I don't understand what you would want it to do in terms of snapping. You merely have it pinned and there's no animation. 🤷‍♂️

 

We really can't provide "build-to-order" solutions but we're happy to answer any GSAP-specific questions. 

 

Maybe this gets you a little further toward your goal: 

See the Pen wvyavXR?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Good luck!

[Aldrin 0 Likes (Newbie)]

Sorry, I'm new to this. thank you for the help.....

[GreenSock 18,246 Likes (Superhero)]

No problem. I'm sure once you play a bit more and dig into the docs and some demos, you'll find your footing pretty quickly. 👍