Jump to content
Search Community

How to add different ease for different container

Aldrin test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

@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)
      }
  • Like 3
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...