Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Aldrin

How to add different ease for different container

Recommended Posts

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

Link to comment
Share on other sites

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

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

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

when I add this snap object, snapping stops working 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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!

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

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

 

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

  • Haha 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

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

  • Thanks 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.
×