JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1325 Bryant Ave, Mt. View, CA 94040 T 650-940-4650 x0090
2 Required Classes: English and Digital Media 3rd/Elective Class:  + Animation or Design or Film

Back to list of all examples

Useful Stuff About:

Intro and Outro Animations

Webpages can more elegantly appear rather than just appear suddenly. You can alternatively use jquery to make your pages load into the browser with

These buttons below are available on your PIP to navigate to each article on your PIP to see an introduction to the project. They could also be ANY buttons that you create for ANY of your websites.

Narrative 1
Narrative 2


These buttons below would be SINGLE buttons on each of your PIP Articles that allow the viewer to navigate to your website. You can more elegantly navigate away from this webpage with


Note: The Projects buttons is an example of a Projects button that would be added to all your project websites so that the viewer can go back to your Project Info Page from your project websites. It must have an id="btnProjects" in order for the script to work.


Click here to download a practice file.


<!--Copy this Intro and Outro Animations block of code and paste it in UNDER your transit.js line in your html page-->
<script src=""></script><!--REQUIRED for INTRO & OUTRO animations-->
//variables for INTRO animations - CHANGE AS DESIRED
var fadeTime=4000, flyTime = 1000, delayTime=250, easingMethod = "easeOutQuint";//time is in milliseconds
var p1name="Self-Portrait", p2name="Narrative1", p3name="Documentary", p4name="Conceptual",
  p5name="profile", p6name="narrative2", p7name="innovator", p8name="portfolio";
//variable for OUTRO animations - REQUIRED to put in your own username
var username="UsernamE";
$(document).ready(function() {//UNcomment one or a combo of the following below INTRO animations
function executeOutroAnimation(){//UNcomment one of the following below OUTRO animations
<!--End of Intro and Outro Animations block of code-->