Structuring massive HTML?

[Creek]

My apologies if this has already been asked - 

 

But GSAP allows content that would normally encompass multiple HTML pages to exist on a single HTML page. 

 

Rather than presenting multiple HTML pages - the user can interact with the elements on a single page - with GSAP timelines then smoothly animating between the various "sections" within the single HTML page. Whereas (as far as I know?) if the user is instead navigating from one HTML page to another, the browser is then forced to "reload"? So there's no smooth animation possible between HTML pages? (My very bad if I'm using the wrong terms and just confusing the issue, or I'm wrong about the reloading.)

 

But if there were a way to smoothly animate between different HTML pages, I think that might be preferable - only so that Google might then register those additional internal links, etc? ie -

 

It would "seem" beneficial to be using multiple HTML docs rather than just the one giant HTML document - if only for SEO, because Google would then register multiple internally linked pages that could then be named "SEO appropriately" - instead of all of the initially invisible content becoming visible as the user interacts with the GSAP timeline, smoothly animating between the various "sections" presented on a single page. 

 

Anyhow - with the "section" approach, I just end up with one massive index.html that contains ALL of the site content - as I did here - 

 

https://www.tibbeecreek.com 

 

I'm currently reworking that entire project from scratch - there are multiple other problems with that site obviously, beyond the convoluted HTML - 

 

But I'm thinking there's likely a MUCH better way for me to organize the HTML content? Hopefully (possibly?) again even into multiple separate HTML documents? Without using PHP or any other server-side program? And I'm just not aware of it? 

 

Or, if not - there's likely a much better Google SEO friendly method for organizing the "one big page" of content? 

 

Just hoping the gurus here might have possible run into similar issues and have developed a more Google SEO friendly approach? 

[Shaun Gorneau]

I think what you’re looking for is

 

https://barba.js.org 

[Creek]

Thanks. If it's okay to ask here - 

 

I don't know what it is I'm looking for? I really like GSAP, as the timeline approach really makes sense. But I sadly do end up with massive single HTML files. 

 

So, does barba.js work really well with GSAP, or - as I suspect? - are they two libraries that have nothing to do with each other? ie - I can't call or invoke or whatever a barba.js interpage animation from within a GSAP timeline? 

 

Basically - you're the guru, I'm just trying to figure out the best way to present small business client websites with engaging animation to keep the visitor "hooked" - relating the "small business" bit because they don't tend to have massive amounts of content. 

 

The problem with using only GSAP is that I end up with only one giant HTML page - whereas apparently with whatever barba.js is, I can have the multiple pages so that obnoxious Google and it's SEO can fill up the search engine with the separate about page, and the contact page - because that's what Google likes to do. And Google runs the Internet, so we must do whatever Google requires of us to the very best of our ability. 

 

From glancing at barba.js, it looks like it's doing what I've requested - animating between different HTML pages. So that's awesome. 

 

So what would you suggest? I'm currently obviously throwing a tantrum inside my head right now about how much I hate Google - but I'm making Google cry, so I'll stop that now? 

 

Are you relating that I likely need to learn barba.js to better achieve the goal I'm putting forward here? I wouldn't likely know that until I'd spent quite a bit of time experiementing with it - as, being a guru, you'd likely know off hand? 

 

On one hand, small business client that Google only indexes by a single HTML page. On the other hand, small business client that Google references with 5 or 6 pages. Based on Google indexing gazillions of pages - the difference between the 1 and the 6 shouldn't statistically matter? But, because it's only one, Google possibly decides to just ignore the site altogether? I have no idea? 

 

But I do know that Google refuses to index the site with the single index.html I referenced above. 

[Shaun Gorneau]

I think maybe you're conflating two separate ideologies, but that is understandable.

 

GSAP, at its core, is made to tween element property values (e.g. x, y, opacity, rotation, scale, etc.)  between numerical values, and to manage sequences of tweens. That's sounds simple, but it's powerful! In essence, it can bring a web page to life; any/all of its elements at defined and calculated times, and at defined and calculated locations ... based on user interaction or all on its own.

 

You can use GSAP (to tween out current page elements) in combination with your own custom JS to load remote page content, swap it in to the current page, change the browser's URL, and then again use GSAP to tween in the new elements. Or an logical sequence of tween current out, remote load, tween new in; e.g. load remote content into a local container and do simultaneous tween out/in.

 

Barba.js is made to handle the transition states from one page to the other without a page reload in combination with an animation library ... for which I would highly recommend GSAP!  

 

From the Barba.js Docs

 

Animation

The important part for a good transition is animation. As Barba is not an animation library, you will need to import one in order to animate elements on the interface to create your transition.

 

 

Have a look at the Barba.js docs, I think it's exactly what you're looking for.

 

Shaun

 

 

 

[Creek]

THANK YOU!!!! Very much looking forward to digging deeper and figuring this out. 

[Shaun Gorneau]

Happy to help!

[Rodrigo]

Hi, 

 

@Ihatetomatoes made this great series of videos about using Barba with GSAP, might be worth taking a look at them:

 

Hopefully this helps.

Happy Tweening!

[PointC]

Wow - is that @Shaun Gorneau dropping by with knowledge? Probably needed to dust off the old GS Mod Badge. 

 

[Creek]

If it's possibly helpful to anyone else - this tutorial appears to require less... knowledge?

 

He appears to be using an older version of GSAP, etc.  The other tutorial is obviously far superior  - this one is just... more elementary? 

Edited April 18, 2023 by Creek
Sorry - Oops Again Again