jwt_animate

Description
This function implements extra features to the sophisticated and extensive GreenSocks (GSAP) tween animation suite. This function performs calculations associated with the viewport size before submitting the task to TweenMax, extracting the duration from the options and putting it into the TweenMax call line. This document will only summarise some of the GSAP commands : the http://greensock.com/gsap  should be reference for the full animate capability.    jwt_animate supports all the Tween options and the extensions described in this document.

Definitions
 The fundamental call line format is :-
         jwt_animate( 'prime_name', {name:'element_name', list::'list_name',  other_options } )
where:-
'prime_name',  is only used as a default for the 'element_name' and/or 'list_name', if these are  missing from the options section in the call line and/or missing from an associated list file. Normally this field can be any text string, say 'X' since it is only used as a default name..
 'list_name',  to be replaced with a name of your choice, It is the name of the instruction list in the <HEAD> section of the html file and/or in the jwt_list.js file that contains a list of options for each of the cascaded commands. The list: option defines the path to all the options.
'element_name',  to be replaced with a name of your choice, is the cross reference to the placed <div> or <img> within the html file which is defined by the id tag of that element. The element_name, if not given in the call line, MUST be defined in an instruction list which is referenced by having list: 'list_name', defined in the options section. If not found here, the element name will ultimately default to the 'prime_name', if that exists. The program cannot run without an element name defined.

Script call line in html
 The fundamental call line can be coded in two ways to define the essential 'element_name' :-
              jwt_animate('X' , {name:'element_name',  other options } )
              jwt_animate('element_name, { other options } )
Note : the 'element_name' in the options section takes priority if bothe are defined
Note :  if there are no other_options defined the the call line can be reduced to :-
              jwt_animate( 'prime_name').

Script using instruction list file (in html <HEAD> section or in an associated list file)
The fundametal call line can be coded in two ways to define the 'list_name'  for cacaded animations :-
               jwt_animate('X' , {list::'list_name'} ) 
               jwt_animate('list_name'
Note :  all the options must be in the list file : any options defined in the call line, including the 'element_name', will be ignored when the list file is referenced. There is one exception to this statement : the case when the list name does not exist.

Examples   for the case when there is a list file in existance named 'roy' and a element withan id='jim' defined in the html file

1)        jwt_animate( 'X', {name:'jim',  other_options } )
2)        jwt_animate( 'roy', { list::'nolist',  other_options } )
3)        jwt_animate( 'roy', { list::'fred',  other_options } )
4)        jwt_animate( 'X', {name:'jim', list::'fred',  other_options } )

5)         jwt_animate( 'X', {name:'jim', list::'roy',  other_options } )
6)         jwt_animate( 'roy', {name:'jim',  other_options } )
7)         jwt_animate( 'jim', { list::'roy',  other_options } )
8)         jwt_animate( 'roy' )
9)         jwt_animate( 'roy', {other_options } )

Explanations.
1) There is no list defined and therefore the callline options will be used.
2) The list option is defined as "nolist" and therefore the callline options will be used.

HERE

<img id = 'element_name' > or alternatively <div id = ''element_name'>content</div> and then the jwt_animation instructions for the identified element. These instructions can be given by adding     <script>jwt_animate( 'element_name' )</script>

The format of the instruction list is very similar to the html call line syntax. In the examples below, several lines of options are given which will be used in cascade operation. Note: the last line in the list does not have atrailng comma.

var jwt_list=new Array();
jwt_list["list_name"]= [
["prime_name", {task:'jwt_animate', width:200, scale:2}],
["prime_name", {task:'jwt_move', moveX:0, moveY:-100, startX:'origin}],
["prime_name", {task:'jwt_move', moveX:100, moveY:'bottom', offsetY:30}]
                                    ]

In a case where it is required to move a different div block or image during the sequece of moves, it is possible to code the list :-

var jwt_list=new Array();
jwt_list["list_name"]= [
["example", {task:'jwt_animate', Xx100, rotationZ:360}],
["flag", {task:'jwt_move', moveX:0, moveY:-100, startX:'origin'}],
["prime_name", {name:'example', task:'jwt_move', moveX:100, moveY:'bottom', offsetY:30}]
                                    ]

Note: Even though the the  'element_name' has been specified in two different ways (for illustration) in this list, it is preferrable thatthe name is declared in the options section as shown in the last line.

Finally, in a case where it is required to use a different function in the sequence of cascaded commands, it is possible to code the list :-
var jwt_list=new Array();
jwt_list["list_name"]= [
[,{name:'example',  task:'jwt_move', moveX:100, step:7'}],
[, {name:'flag',  task:'jwt_animate', x:250, transformOrigin:'0% 50%',rotationZ:'-720deg '}],
[, {name:'example',  task:'jwt_move' , moveX:100, moveY:'bottom', offsetY:30}]
                                    ]

zoom options
description option names default values notes  
id name of the block or image to be increased or decreased in size. name: * must be given *
name of list containing commands to be cascaded list: same name as <div> id
defines the duration of the tween. This option is moved from the options section into the call line prior to submission the TweenMax
duration:
0
units s
x is the tween option that will take a number for the move increment.  "left", center" and "right" are converted to css  "left:" and gsap "xPercent" to do a move to specific locations
x:
0
n  --   units px
"left"
"center" "centre" "middle"
"right"
y is the tween option that will take a number for the move increment.  "top", middle" and "bottom" are converted to css  "top:" and gsap "yPercent" to do a move to specific locations y:
0
n  --   units px
"top"
"center" "centre" "middle"
"bottom"
scaleX is the tween option that will take a number for the X increase in size,"screen" and "ratio" are coverted to a scale value based upon the screen view size.
scaleX
1
"screen"
"ratio"
scaleY is the tween option that will take a number for the y increase in size,"screen" and "ratio" are coverted to a scale value based upon the screen view size scaleY
1
"screen"
"ratio"
a value that is used to replace the "left" "center" "right in the x option. It will give an offest from the move to the name location offsetX
0 units px
a value that is used to replace the "top "center" "bottom" in the x option. It will give an offest from the move to the name location offsetY
0
units px
Most css options are supported, including all the transform commands.
css name

 
Tween specific options
scale:
scaleX: (Y/ Z)
rotation:
rotationX:(Y/Z)
x:
y:
xPercent:
yPercent
:
0 units as defined by GSAP
Defines where the delay is timed from on current task from
"end"
"start"
"end"
*  Defines a change to another function
task: "jwt_move"  e.g. jwt_move
 * these options are only used for cascaded commands in the list file


Required sub-scripts
TweenMax.min defines the GSAP operation
jwt_view determines the screen dimensions and scroll offsets.


  Animation notes


Examples
The jwt_animation_example file has an image, defined by id="picture"  which can be increased or decreased in size . The form is only for demonstration purrposes allowing the options to be changed and a position reset to be invoked.  The options will normally be coded into the script call line but in this example page new options can be entered into the form to explore how the script works and to demonstrate the full capability. 

The jwt_tween_example file contains

The jwt_timeline_example

Cascading commands
The jwt_it script can be used to start the cascade of commands running.
<script>jwt_cascade( 'name', {list:"list_name"} )</script>