Jump to content
GreenSock

Chris Prieto

Best Practices for Multi Page Websites

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Less specific help case here and more a general query into how files are structured/organized when doing bigger builds. As of late I've been using the approach provided ya'll folks in my various code pens. I generally keep vars/timeline vars/scrollmagic scenes at the top, then preloader and intro animation, then timelines/media query watcher goodness and lastly misc helpers/stuff. However this has been for single pages with tons of scroll based animations.

 

I've recently figured out how to use barba.js with wordpress and am now trying to figure out best approach to structure all this for multiple pages with animation.

I generally am just building eye candy websites and dont use vue, react or angular. Should I just have one massive js file? Should it be broken up into a few different files? Should those files be broken up based on functionality? ie: scroll.js, gsap.js, misc.js, barba.js

 

I will assume like most code related issues there is many ways to skin this cat. Mostly looking to see how the big boys do it and incorporate the parts that make sense to me. Any pointers or suggestions will be greatly appreciated :D

Link to comment
Share on other sites

This sounds like you're talking about a "medium" sized website which can be a little awkward to handle because there's definitely not a "right answer" and a lot of it boils down to preference. 

 

When I see this type of situation, I immediately think: what needs to be loaded on every page (the overall framework) and what is more so specific to certain pages. Then I personally would put the general stuff in its own JS file, etc. and load page-specific JS files as needed. I may or may not use a static site generator to do this (it depends on the nature of the site). 

 

Another person might do roughly the same thing but use a component based framework to do so (which is essentially a more complex static site generator). It boils down to 1) what are your needs, 2) what are you most comfortable using, and 3) what sort of timeline are you working on (because if time doesn't matter so much you can play around with different ways or teach yourself a new way, etc.). 

  • Like 3
Link to comment
Share on other sites

@ZachSaucier Indeed in the Medium range of things. Deff not looking for the right solution just curious how others tackle it when using many animations throughout multiple pages. Your second paragraph covers it well. I think I am overcomplicating it in my head. I also didn't know if people somehow made the whole site one big ass animation and jump around the timeline kinda like I would do in flash back in the day.

 

To answer questions

1. nothing too much, just needs to move too much most of the time

2. static html pages or wordpress themes, css, just enough js to be dangerous and okay grasp on php 

3. currently none, working on our personal site so I am able to mess around

 

I'm gonna start fussin' around tho and see how it works out.

Link to comment
Share on other sites

2 minutes ago, Chris Prieto said:

I also didn't know if people somehow made the whole site one big ass animation and jump around the timeline kinda like I would do in flash back in the day.

Hopefully not :) In almost all cases it's best to load more content when it's needed, not load it all at the start.

 

3 minutes ago, Chris Prieto said:

I'm gonna start fussin' around tho and see how it works out.

Keep us updated! Page transitions are fun when done right. 

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