Jump to content


Structuring a site

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

Big disclaimer: Tho this isnt specific to greensock i do hope to contribute what i learn to the community...

if there is a better space for this question im open to hearing.



Here is the first page of a simple 3 page site. Would putting each "page" inside of a DIV and then transitioning in and out the elements of that div with GS be one way to go structuring a GSap based site. Though it doesnt animate I started that route at the link above. Let me kno if im on the right track





Link to comment
Share on other sites

I dug up some good sites thats was done in js last year but through doing a view source im not able to find the js file to see how they structured it.


I also notice that these js sites some of them are like verticall long scrolling sites, to each his own but im looking for something that doesnt have the scrolllling vertical feature.


After looking at the batman site, i def see the markup is written out in divs that correspond to each section of the site, so that what i did at least is not too far off from structuring the markup, now ill see if I can only get a peek at the js..

Link to comment
Share on other sites



Your site is looking good, keep up the good work. A suggestion will be to keep using backgrounds, the New York background you're using is quite nice, maybe you could create a separated tween for the background and the content, so they can get into position at different speeds.


Regarding some of the sites you posted the batman one has a js file:


but you're talking over 4000 lines of code so you'll need some patience.


You could look at this site for more ideas, hey've done a pretty good job too:



Here is the main js it's "only" 1300 lines so it's a little more simpler than the batman one :mrgreen:



In order to access the js files from a site you need to use developer tools (for webkit based browsers) or firebug (for firefox), those are very useful tools when it comes to see the structure of a site or app. Now in terms of that I wouldn't recommend you to spend a lot of time reading other developers code, but to check the pages and see what is happening and think how could that be done with GSAP, it could take more time but you'll learn quite more in that way. Also there are quite a few forums and sites with tutorials to learn how to do a specific task, then you put them all together (here is where the timeline is your best friend and ally) and voila!! you got your site.


As far as structuring a site with GSAP I'm more of the idea of using GSAP to present your site to the visitor and let them use the site in a fun way but always keeping in mind why that person landed on the site, so it's not all about the animations, it's also about the content, a good balance between both is the winning formula, and the beauty of GSAP is that the possibilities are almost infinite in order to create a amazing way to present the content.


It's really a one step at a time type of thing so my best advice would be to be patience and just create single samples (there are tons of those in the forum) and then you'll be able to enhance their complexity, and keep in mind that there's always someone here in the forums willing to help you.




  • Like 2
Link to comment
Share on other sites

  • 1 month later...

Thanks Rodrigo for your detailed tips! One step at a time indeed.


I found an example of a site that has simple transitions. Though its built with jquery I think I can get replace the animate calls with tweenmax and timelinelite calls and come up with a structure 



I would post the example but since its not built with greensock I rather wait to show my version of it with GSAP for the purposes of the forum



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.