Jump to content
Search Community

Best approach to a complex scroll website

gauel test
Moderator Tag

Recommended Posts

Hello,

I'm working on a relatively complex project website that will have several sections of interest.

Since I'm still kinda new to the GSAP library, I wanted to have opinion of others about the approach.

Website will basically consist of the first part being a three.js fullscreen animation that will be controlled with scroll and the rest of the page will be DOM elements with just transforms and tweens.

I would like to make the first three.js part to snap to certain moments but after that to disable this behaviour and go with normal scrolling.

I was thinking about creating a timeline for each section to deal with all the transforms there and maybe creating a global scroll timeline with labels to be able to scroll to a specific moment? Or would it be better to have just one timeline and all the scrolltriggers there?

Or should i just use the ScrollTo plugin without the use of the timeline? Or can I jump to a label when I have several timelines?

These are the things where I'm not so sure what would be the usual approach in such a complex solution. Specifically with the snapping and several timelines on the page.

Attached is rough idea of the viewport movement which explains the structure and the snap points on the website.


Sadly my project is build with svelte, tailwind etc. so I cant provide codepen easly.

Thank you for any help.

 

Snímek obrazovky 2023-01-27 173718.png

Link to comment
Share on other sites

Hi @gauel and welcome to the GreenSock forums!

 

I would definitely use a single Timeline for each section and then add those to a master timeline and this master timeline should be the one controlled with ScrollTrigger. On that note I strongly recommend you to not use ScrollTrigger right at the start of your project, just focus on your animations, be sure that they work in the way you intend and once you're happy with that, you can add ScrollTrigger to the mix. This is because we've seen a lot of users add an extra layer of complications with ScrollTrigger when they run into enough issues with their CSS and GSAP animations.

 

You can also mix the ScrollTo Plugin with ScrollTrigger with no issue at all, check this example:

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

 

2 hours ago, gauel said:

These are the things where I'm not so sure what would be the usual approach in such a complex solution. Specifically with the snapping and several timelines on the page.

Complex projects require custom solutions and one of our mantras around here is test-test-test. Depending on where/when you want to snap your ScrollTrigger there are different solutions either using labels or progress (snap points). Be sure to check the documentation:

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

Also we have some starter templates for using GSAP with Svelte and SvelteKit:

https://stackblitz.com/@GreenSockLearning/collections/gsap-svelte-starters

https://stackblitz.com/@GreenSockLearning/collections/gsap-sveltekit-starters

 

You can fork them and create a minimal demo if you want.

 

Good luck with your project and if you have any GSAP related question let us know.

Happy Tweening!

Link to comment
Share on other sites

Oh wow, hello and thank you @Rodrigo for your help!

Sounds like a great approach to split the work into animations first and then connecting that all together 😊

Also thank you for the starters, didnt know about them. I actually already have the website started with the basic structure, components for sections but this really helps a lot. 

So If I understand correctly, I would create a timeline for each section with all the animations in that timeline and after that create a global timeline from the top to the bottom of the page, add those sub-timelines in there and fire them on specific moments? I didn't even know i could nest timelines like that 😊 GSAP is so powerful

Link to comment
Share on other sites

5 minutes ago, gauel said:

I didn't even know i could nest timelines like that

Timelines are just containers for animations and other timelines as well, which brings a lot of tools to the table for controlling and playing with them. Be sure to have a look at the docs:

https://greensock.com/docs/v3/GSAP/Timeline

 

Also take a good look at the position parameter since that gives you super powers to order and sequence your instances inside a timeline.

 

Happy Tweening!

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