Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Chris Prieto

Best Practices for Multi Page Websites

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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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. 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×