ScrollTrigger Snap array with a variable duration?

[seanom]

Hello again Greensock heroes, I have a question related to ScrollTrigger snapping. 

 

Is it possible to have a variable durations within the same scrollTrigger, snapTo array?
My use case is based on a section that takes up about a 60% of the trigger element the remaining 40% is then split into 4 sections.

 

Specifically I'm looking to do something like this 

 

snap: 
  {
    snapTo:  [0, 0.6, 0.7, 0.8, 0.9, 1],
    duration:[0.5, 4, 0.5, 0.5, 0.5, 0.5],
  }

 

I think the way to go here could be to create two triggers one for the initial 60% and then one that has the subsequent 4 sections. Maybe I'm trying to do too much in one trigger?

 

My initial thinking was to use the observer plugin and scrollTo but I ran into some issues when scrubbing the page. So have been trying to simplify it.

The snapTo array works great, but I could really do with that first snap duration being a little slower.

See the Pen bGmdXPW by Seanom (@Seanom) on CodePen

[seanom]

I've just had a go at adding a second scrollTrigger and this seems to create the desired time for the first section.

But I am curious to know if it's possible with the single timeline. If I add the second instance of a scrollTrigger I'm not yet able to get it a transition between the two. 

See the Pen LYgpmJq?editors=0110 by Seanom (@Seanom) on CodePen

 

[Rodrigo]

Hi,

 

Unfortunately is not possible with the current API. If you want to bake your own solution you'll have to listen to scroll end events and then create and run your own custom snapping logic.

 

If the solution you got in place right now does what you need and doesn't create any other issue, I believe we're in: "If it ain't broken don't fix it" territory  

 

Let us know if you have more questions.

Happy Tweening!