Scroll to specific section by skipping intermediate multi scroll sections

[VarunS]

Hi,

 

I'm working on creating an event site where clicking on "Register Now" should scroll to the last section (Register Form) and skip intermediate sections. 3rd and 4th boxes (and any other intermediate boxes) should be skipped. The animation should only work on screen sizes above 800px and mobile experience will be default scrolling.

 

Attached CodePen has minimal code that shows what I'm trying to do. I looked at multiple CodePen examples but couldn't find something similar. 
 

Can you please help?
Also, is this the best/smoothest method to accomplish what I'm trying to do or is using Observer instead of ScrollTrigger better?

Thank you!
 

See the Pen azoevoy by varuneg (@varuneg) on CodePen.

[mvaneijgen]

Hi @VarunS welcome to the forum and thanks for being a club member 🎉

 

Your setup seems really complicated, for each section you create two ScrollTriggers and you also seem to be rolling your own snap logic (which is build in to ScrollTrigger https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#snap) 

 

The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging.  
  
Most of the ScrollTrigger effects you see are just moving things on the y-axis instead of scrolling them, then hooking that animation to ScrollTrigger will give the illusion of scrolling, but they are really just animating! Getting to grips with this knowledge will make it so much easier to create all kinds of effects, I've written a whole post about it, check it out:

 

 

Currently in your pen I've disabled your custom snap logic because this takes over as soon as you scroll and thus doesn't allow you to scroll to a specific section. Then I'm keeping track of all your ScrollTriggers and then in the click event scroll to the last and end of that particular ScrollTrigger. 

 

See the Pen gbOOEPe?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

 

I've got another post all about scrolling to a specific point inside a ScrollTrigger. Pay special attention to the first reply by Jack, he has some really handy helper functions that could do a lot of the heavy lifting for you.

 

 

Again your setup seems really complicated and could be done with just one timeline and ScrollTrigger, which could really simplify your setup and will also make it a lot easier to control, then you could just use the build in snap feature to automatically snap to a certain progress value of the timeline. The demo below from the collection page does already 80% what you would need. Hope it helps and happy tweening! 

 

See the Pen gbOOEPe?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

  

[Rodrigo]

Hi,

 

I agree with @mvaneijgen that your setup is way too convoluted, this seems far simpler and easier to understand and maintain:

See the Pen qEBBepM by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[VarunS]

Hi @mvaneijgen and @Rodrigo, thanks for your detailed response and codepen. I'm still looking into all the resources shared by you but I feel like the animation itself is working fine but I'm facing issues when linking it to ScrollTrigger while also trying to have register button work.

 

When I add any snap logic (builtin or custom) the register button doesn't seem to be working

 

BTW, just to give more context, I'm trying to create effects from the site https://wellexpo.qodeinteractive.com/design-conference/

• Snap to next/prev section regardless of small scroll wheel movement or fast scroll.
• Allow keyboard arrow navigation
• Prevent jittery animation if scrolled too fast
• Scroll to "Register Form" when clicked on button

This is what I have now and I'll keep working on it but please correct me if this is way off approach  -  

See the Pen ogNggPm by varuneg (@varuneg) on CodePen.

 

 

Thank you!

[mvaneijgen]

23 hours ago, mvaneijgen said:

Most of the ScrollTrigger effects you see are just moving things on the y-axis instead of scrolling them, then hooking that animation to ScrollTrigger will give the illusion of scrolling, but they are really just animating! Getting to grips with this knowledge will make it so much easier to create all kinds of effects...

This is the most important piece of the puzzle here and that is where you're current setup is getting you in the wrong direction. Your setup is build on top op ScrollTrigger, so you can only ever use ScrollTrigger which in this case is not the best solution. ScrollTrigger is build to hook things to the scrollbar of the visitor, as you can see you can modify the tools to do what ever you like (which is a big plus with all the GSAP tools), but that doesn't mean you've used the correct tool for your effect. 

 

For me everything starts with an animation and although I want it to scroll later or as you state on arrow keys, maybe you want to build in anchor link that got to a specific point or do something on drag events, what you start with is an animation and that way you can add all these features to your animation.

 

I'm going to link you to another post I've wrote, which uses the Observer plugin. This plugin is build for exactly your use case, eg you want to scroll a little (or a lot), but only ever navigate to the (lets call it) next slide. Not only can the Observer plugin watch for scroll events, but also drag events, ect https://gsap.com/docs/v3/Plugins/Observer/ 

 

If you pay extra attention to the post you'll notice it uses the exact same logic as the post linked earlier with "creating a stacking card effect", this is possible because it starts with an animation! Animations are key in GSAP and starting out will make your live so much easer. 

 

 

Again everything is possible with GSAP that is the beauty of it! So your way would certainly work, but it will cost time to implement with a lot of  custom logic and in the end you'll will have a subpar solution, which will be impossible to update/maintain. 

[VarunS]

Thanks for the advise!

Using Observer instead of ScrollTrigger helped. I then used tl.seek() to navigate to form slide/section.