[x] Inside img container, add an img element for svg part, set its width to a percentage relative to the size on the document (use brackets to give a good idea), then add class of svg-snippet (hidden visibility, position absolute).
[x] (Repeat for other svg parts)
State
[x] Add jQuery
[x] Adove the GSP JS Library script, create state.js.
[x] Inside start.js, make instances of new Timeline, store in variable called tl.
[x] Call the .from method, for the svg parts for the dog, and position into place, set background colour of img container, and set text of text container
Further Scene animation
[x] Add event listener for svg image parts in html for svgs in img elements; doghead, dogbowl, mirror, otherdoghead, list, detailedlist, clock.
[x] Add events.js below GSP JS Library script.
[x] Write a function that when called, checks the next scene, then calls another function.
[x] Create a function called optionsScene, that creates new instance of TimelineLite, then positions elements into place, sets text.
In the working prototype, this interactive feature will be limited to the following presentation-
User is presented with an introduction about dealing with treatment options
User can click on the screen to experience a transition into a different scene, displaying treatment options
The leftmost option (practical) is represented as a mirror, and can be clicked to transition into a following scene which introduces practical treatment
From here, the user can click on the screen to trigger a new scene that presents a more detailed list to the user.
The user can then click on the screen, to trigger a new scene that presents the locations for available treatment.
Related #9
Technical Tasks
Images
State
First Scene animation
Further Scene animation