Jump to content

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

The GS JS Tour App

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

This might be asking for too much, but in an effort to learn some advanced HTML5 I'm trying to rebuild the the very cool tour app on the GS JScript Jump Start Page

I've built the basic framework and have been trying to add one slide at a time to see how it works and also to try to keep it functional as I go along.
At this point I have the first 2 slides and the dropdown menu installed.  I'm not getting any of the code in tour.js to work.  I've uncommented all of the console comments but I'm not getting any output to the debug console (FF).  I am getting an error that 'slideshow' is not defined in the html file, and I'm assuming that it should be getting the 'slideshow' object from tour.js.  I've also tried adding breakpoints after the 'loadSlides()' function in tour.js, but in both Firebug and the FF Console, the code doesn't stop and offer the 'step in' option.
Admittedly, I'm new to this process (still a Flash refugee), but if anyone has a tip or two to move me along, I'd greatly appreciate it.

Link to comment
Share on other sites

Upon further investigation, I see that tour.js actually populates the divs in the tour container, so by the time I saved the code it was in its final form and bound for failure.

See if I can figure that one out (though I wouldn't turn down any hints)...

Link to comment
Share on other sites



Well my best guess is that the sliders animations reside in a master timeline, and each slider has it's own timeline to show the code and sample. Also depending on the example type another timeline could be also in the mix, probably not nested.


As far for each individual slide things get more simple (I'm leaving the examples out just in case). Each slider is a parent element and has child elements inside, if you see with detention the samples slides have the same effect, their child element's do a staggerFrom a given left value and opacity:0 or near 0. For the text slides they share a lot of animations, paragraphs come from below and opacity:0, so again a from() instance and a staggerFrom when list elements are present.


As you can see is not very hard and that sample shows how deep you can go with just a single timeline and labels, the rest is just getting to know how every animation looks like.



Link to comment
Share on other sites

What I was referring to is that the 'tour' in the html file is a simple hierarchy of divs which are dynamically populated by code in 'tour.js'.  All the tour content is loaded from external files (the examples), the drop down menu, the code overlay and the button properties are all assigned when the tour is dynamically created.  I used to do stuff like this in Flash using AS and xml, now I want to learn how to do it in JS...

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.