How to Create a fullpage scroll with vertical and horizonal scroll

[websty]

Hello everyone! I want to create a full-page scroll website with vertical and horizontal scroll, to make a presentation. I tried to find a reference on codeopen, but I found only full page vertical scroll without horizontal scroll. Will be better to create a function based on 2 CSS classes. I prefer to use GSAP because I would like to animate hero texts, buttons, and images, and in order not to harm optimizations, do not use dozens of libraries.

Reference: https://alvarotrigo.com/fullPage/extensions/scroll-horizontally.html

[mvaneijgen]

Hi @websty welcome to the forum!

 

Check the below pen. Keep in mind that everything ScrollTrigger is doing is just animating something on scroll, so first focus on the animation before you introduce ScrollTrigger. If you want check this post https://gsap.com/resources/st-mistakes/ 

 

If you need any help please provide a minimal demo, so that we can take a look at your code.

 

Hope it helps and happy tweening!

 

See the Pen bGexQpq by GreenSock (@GreenSock) on CodePen

 

 

[websty]

7 minutes ago, mvaneijgen said:

Hi @websty welcome to the forum!

 

Check the below pen. Keep in mind that everything ScrollTrigger is doing is just animating something on scroll, so first focus on the animation before you introduce ScrollTrigger. If you want check this post https://gsap.com/resources/st-mistakes/ 

 

If you need any help please provide a minimal demo, so that we can take a look at your code.

 

Hope it helps and happy tweening!

 

 

 

 

 

This is 90% what I need. The fact is that horizontal scrolling here has a short pause before changing a section, and vertical scrolling does not include the entire section (is this really the maximum that can be done?)

[mvaneijgen]

1 minute ago, websty said:

This is 90% what I need.

Great! Just fork the pen and tweak it to your liking, when you get stuck post back here with your example and tell us what you're having trouble with. When we can see your code it is easier to understand your thought process and we can thus better help you understand the tools 

 

2 minutes ago, websty said:

is this really the maximum that can be done?

Nope, this is just an example. That is the beauty of GSAP, you can build everything you like, the only thing that is holding you back is your own creativity. 

 

I really advies you just to fork the pen and try your hand at tweaking it. In this example GSAP is just moving all the panels to the left, check it out I've removed all unnecessary code and ScrollTrigger, so it is maybe easier to understand what it is doing on scroll (just scroll down a bit)

If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/

 

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

[websty]

Yes, I'm new to GSAP, I have so far learned basic animations such as from and fromTo. Perhaps I need to focus on studying the scroll trigger to learn to understand these functions fully. In any case, I am grateful for the answer, if anyone has an example like in my reference it will be easier for me to study it. But if by that time I have mastered the scroll trigger, I think I will be able to do such a scroll myself.

[mvaneijgen]

I think studying GSAP more is more help full, again all ScrollTrigger is doing is animating a timeline play head (picture a video player) from the beginning to the end. 

 

Check below I've just copied the setup twice and changed the second timeline to move .from() instead of .to() I've changed nothing else, and now it scrolls from right to left!

 

See the Pen PoVmQQa?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

 

Really, just fork any of the pens and start tweaking some things, the best way to learn is to get your hands dirty. Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working.

 

Again good luck and happy tweening! 

[websty]

I thank you for your time and effort! However, I can’t figure out how to remove the condition that the section scrolling animation starts the moment I release the mouse roller.

What I mean, now for a full scrolling animation to occur one section at a time, I have to scroll the mouse roller a little and stop, and then with a short pause the section is fully scrolled, but if I am active while scrolling, I will not see this animation of the full section scrolling.

I tried to make a screenshot of the cast demonstrating what I mean.

Demo 

Sorry for my English, i hope is clear in video

[mvaneijgen]

Ah I see the confusion here. GSAP has multiple plugins that do similar things. I thought you were looking for ScrollTrigger, this animates elements based on the scroll position of the scroll bar, so every animation is tight to visitor scrolling action. There is also the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/ this watches for events of which scroll is an option and this will than just do an animation based on the logic you've set. Check out the example below or the whole collection will all kinds of demos https://codepen.io/collection/KpNYOd Is that what you're looking for?

 

See the Pen oNdNLxL?editors=0010 by GreenSock (@GreenSock) on CodePen

[websty]

Fantastic, this is what I would like, it turns out I need to study Observer first for the task I need and only then study the scroll trigger. Super, I'll study your codeopen first and try to repeat the full logic as in FULLPAGE.JS. I greatly appreciate your help! Have good day, I am going to study Observer.

[mvaneijgen]

Hi @websty glad you marked the topic as "solved"! Hope your project is going well.

 

I just remembered that I had helped a other user on the forum with an example where they uses the Observer plugin and created a timeline of the effect they are going for and placed labels on that timeline to which they animate on scroll. Personally I like this approach more, because you can first focus on the animation and use that exact animation with the Observer plugin, because you just move the play head to `.nextLabel()` and `.previousLabel()` 

 

Check out the topic below 

 

And the final result pen, again hope it helps and happy tweening! 

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