Jump to content

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

Need Help With Advanced Site Tabs GSAP

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

Hi single0speed,


Welcome to the forums!


I am not sure what you mean by "advanced tabs". To me it sounds like your question is more related to UX flow and how to implement it than to animating something.


There's very limited resources by the GSAP guys for support, it's not feasible to be troubleshooting everything, they have to focus on the GSAP API and related questions.


Do you think you could setup a basic example of what you are looking to achieve, it's ok if it's not fully functional but it might help us understand what you are after and how GSAP can help you.

  • Like 2
Link to comment
Share on other sites

Hey Dipscom


Ill look into UX Flow today.


Normal tabs allow you to split content on one page Ill put a link.



Link to comment
Share on other sites

Hi single0speed,


As as I know there's no problem in offering little paid gigs here. This is not a bid/hire forum but there's the odd offer/request for help that bubbles up and I never seen anyone's being told off for that.


Hum... I don't think it's a GSAP question, it feels more like a general structure sort of question. I would be a dozen other questions before even considering giving you suggestion, some of them would even be about you and your skill set.


Having said that, I am on the lookout for some small scale pet project. I would be willing to try and help you if I can. Why don't you send me a private message with some contact detail?

Link to comment
Share on other sites

It looks like you want to have a tab system that instead of pulling in static content. It pulls in dynamic content via AJAX. is this correct?

Link to comment
Share on other sites

Maybe, I am stuck between a rock and a hard place. I want the 3 tabs to load instantly so i guess my only option is a single page that contains the information of 3 pages at all times. But those 3 pages that that one page loads can be all different.


But you are right, a lot of the site will be AJAX. It is just not commonly done so i have my concerns 


I mean maybe a total ajax would be the way to go, its got me tossing and turning  :oops:

Link to comment
Share on other sites

Sounds like you're trying to invent something that already exists, a single-page application (SPA). Here's a simple demo of a 4-page SPA using Angular 1.

See the Pen yebjQM?editors=0010 by osublake (@osublake) on CodePen


To see a SPA in action, check out Virgin America's site.



I like to use Angular as a SPA framework, but for routing and state management, I use UI-Router. It also include a nice visual debugger.






Demo of that...



My simple 4-page demo is kind of boring, so I added in some http services to hit an API for CodePen. 200 lines of code later, and I have a pretty good site.





See the Pen 77b85cc0ac6660292ed27472419c204d?editors=0010 by osublake (@osublake) on CodePen




  • Like 5
Link to comment
Share on other sites

Great stuff, Blake. Amazing.

  • Like 1
Link to comment
Share on other sites

SPAs are all about user flow, and what you're asking is totally doable. Your image looks just like the visual debugger for UI-Router. Take a look at more advanced demo for it...
What's loaded, or not is totaly up to you. SPAs are based on an MV* pattern (MVC, MVVM), and the view (your html) is just a reflection of the view model. So you can destroy it, move it around, reload it, show it another tab, whatever. It's all created on the fly. The view is a just a facade. It's a dumb object. There usually isn't any logic in it. Everything is a reflection of the view-model. So in Angular, controllers are the view-model, and it describes what should be displayed.
A SPA framework should also handle caching, so some things can be loaded only once, and used throughout your app's lifespan. For example, you may want to get a list of all the names of all the states in the US. That list isn't going to change, so you can cache that request. Other things may need to be loaded fresh all the time, like a list of new auctions. It's all very flexible.
And you may not need to load everything via AJAX. Sockets would be particularly useful for an auction to get live updates on the current bid price.


Check out this chat demo with some draggable action. Open it up in multiple browser windows.   :-D


See the Pen c8fb3db6ce219285b6ecadfb8638d865?editors=0010 by osublake (@osublake) on CodePen


That's using a real-time database called Firebase.


  • Like 2
Link to comment
Share on other sites

Interesting. Hmm seems like I need to learn a few more coding languages or earn much more to hire a expert  :?.  Web Sockets seem like they could work well.

Link to comment
Share on other sites

A 1 million page SPA isn't out of the question. That's what they were designed for. There probably isn't much of speed difference in loading dynamic content over static. The speed gains come from not having to reload an entire page and rebuilding everything from scratch.


And creating a search isn't that hard, but this will depend on your database. Most SPA's use a NoSQL database, so everything is usually stored in a JSON format making it easy to search. So you don't have write super long queries or do a lot of table joins. MongoDB is probably the most popular NoSQL database. I like using Firebase because of the real-time data.


And a lot of filtering of a search can be done client side, speeding things up. So here's a really simple example based on your hard drive example. This isn't how you would really set an app up, but it shows you what's possible. The controller is the view-model, and it describes what should be displayed. Assume that a user did a search for hard drives, and it returned data for the categories and the different hard drives. Now we can display that data, and even do a local search based on the name of the hard drive.


See the Pen b482beeb19b0768c32e66dcda76985db by osublake (@osublake) on CodePen



That's a really simple example. You can chain multiple filters together. Here's a demo with 5000 records. Just press the refresh data button and have at it.




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.