Jump to content
Search Community

Jump to label without animation - scrolltrigger, scrollsmoother

LukasZahorec test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Hi all!

 

I have a question, don't have a codepen but explanation is quite simple (hopefully also solution). :) 

 

I have quite long timeline with animation triggered with scrollTrigger, it's SPA. Elements have fixed position, and I'm animating pages while user scroll on some dummy div with height of the number of pages (fixed position on full vw, vh). 

 

I have also a navigation, now what I need is to jump to particular label, or scroll position on timeline - without animating the timeline. With animating it's working fine, but page is quite long and it's a quite a mess when user jumps from one section to another and a lot of animations plays with high speed.

 

If I use seek method, It's work how i want but the scroller stays on the position. Then when user scroll again and he is on new position on timeline then it goes wrong and don't continue on timeline but on old scroller position.

 

Thanks for the help!

Link to comment
Share on other sites

you want to jump immediately to that point, or are you trying to animate to that point without triggering some other animations?

It's hard to tell what's going on in your example without seeing it visually or seeing any code. 

  • Like 3
Link to comment
Share on other sites

 

 

to scroll to a label position without animation try the labelToScroll() method with duration:0 or use a set()

https://greensock.com/docs/v3/Plugins/ScrollTrigger/labelToScroll()

 

i'm guessing the animations you bypass will just be set to their end state when you get where you're going, but again, a minimal demo would go a long way. we don't need to see anything complex.

  • Like 3
Link to comment
Share on other sites

  • Solution
12 minutes ago, Carl said:

i'm guessing the animations you bypass will just be set to their end state when you get where you're going

 

Yes, that looks to be the case - the box needs to be clicked in the demo below.

 

This should be helpful, too...

 

https://greensock.com/docs/v3/Plugins/ScrollSmoother/scrollTo()

 

...and this in particular

 

Quote

.scrollTo( target:Number | String | Element, smooth:Boolean, position:String ) ;

Scrolls to a particular position or element
[...]
Parameters

[...]

smooth: Boolean

If true, smoothing will be applied. Otherwise, it will immediately jump to the position.

 

 

See the Pen LYQRKRr by akapowl (@akapowl) on CodePen

 

  • Like 2
Link to comment
Share on other sites

It's working, but little detail I was missing - I had scrub set to: 1 - in that case navigation didn't jump immediately but in time of scrub. So I set it to true, and now it's working as expected. In my case it's not a problem to have true instead of 1. 

  • Like 2
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...