Updated 19 December, 2020 · back to using Svija
Animating Objects in a Svija Page
Animating an object in a Svija page implies three elements:
- an object to animage
- a trigger for the animation
- a description of the animation (Javascript)
The Object to Animate
Any object or group of objects can be animated.
To manipulate an object, it is necessary to know the object’s ID: the name that appears in the Layers panel when the object or group is selected.
To give an ID to an object, double-click on the object in the Layers panel and fill in the desired name.
A reminder of the rules for choosing an ID:
- don’t use the underline
- spaces are converted to underlines
- dashes remain dashes
- other special characters are converted to HTML entities
To differentiate between separate words, camel case is recommended.
Camel case is lower case, without spaces or punctuation, and where the first letter of each new word is capitalized:
- targetObject (instead of target object, target-object, or target_object)
Triggering an Animation
There are many ways to trigger an animation but most animations are triggered by three types of events:
- the mouse pointer is dragged over an object, without clicking (mouseover)
- the mouse pointer is dragged away from an object (mouseout)
- the user clicks on an object (mousedown)
As with the object being animated, it is necessary to know the ID of the object that will serve as a trigger.
It is also possible to trigger animations when the page is loaded, when it is scrolled, etc., but these techniques will be presented in more advanced reference content.
The Animation Script
The “hard part” of animation is the programming.
It’s not particularly complicated, but programming is based on several concepts that are absent from everyday life.
When it doesn’t work, it’s sometimes hard to find the error, or the error messages seem cryptic or unhelpful.
Courage! By continuing with a basic example, you will be able to animate your page.
Before Continuing
The following steps require the creation of a page on your site with two rectangles having the following IDs:
- targetObject (capital O)
- triggerObject (capital O)
Once you have created this page and it is visible online, you are ready to continue the tutorial.
My First Animation
For the first animation, it is necessary to know the IDs of the object being animated and the trigger object, and the event that will trigger the animation:
- targetObject (attributed in the Layers Panel in Illustrator)
- triggerObject (attributed in the Layers Panel in Illustrator)
- the mouse is dragged over the trigger (mouseover)
First of all, we ask the trigger object to listen for the trigger event:
obj = document.getElementById('triggerObject');
obj.addEventListener('mouseover', playAnim);
Then, we declare the animation:
var myAnim = new gsap.timeline({paused:true});
function playAnim(){ myAnim.play(); }
To finish, describe the movement of the animation:
myAnim.to('#targetObject', 1.0, {scale:2.0});
myAnim.to('#targetObject', 1.0, {x:"+=5.0"});
We have described two transformations, but you can add as many as you want. Just keep adding them to the end of the script.
Some explanations:
- to = movement towards a final state (scale:2.0 further down)*
- # = ‘the object having the id’
- 1.0 = duration of the transformation in seconds
- scale:2.0 = increase the scale of the object by a factor of two
- x:”+=5.0″ = move the object to the right by 5 rem (50 pixels)
*If we had written myAnim.from, the object would have started at twice its normal size instead of ending it that state.
Installing the Animation Script
Here is the entire animation script in one block:
obj = document.getElementById('triggerObject');
obj.addEventListener('mouseover', playAnim);
var monAnim = new gsap.timeline({paused:true});
function playAnim(){ myAnim.play(); }
myAnim.to('#targetObject', 1.0, {scale:2.0});
mynAnim.to('#targetObject', 1.0, {x:"+=5.0"});
In the settings of the page you have created, click SHOW in the bar USER SCRIPTS, then:
- click “Add another User Script”
- under “Type” choose “body JS” (Javascript in the body of the page)
- under “Name” enter “an animation”
- in “Content” paste the above script
- click “SAVE”
Refresh the page in question and move the mouse over the trigger object.
The target object moved!
Ok, let’s be honest — there’s a good chance that nothing happened. If that’s the case…
Typographical Rules for Programming
Unlike everyday writing, programming is extremely dependent on text details.
A single incorrect character can cause your program to stop working, often in an incomprehensible manner.
Here are some basic rules to avoid potential problems:
In every aspect of the program (object IDs, filenames, etc.), avoid using:
- accents
- spaces
- quotes
- dashes and underscores
Curly or “Smart” Quotes
If you look at the quotes around the word smart, above, you will see that the opening quote is different from the closing quote.
This type of quotes is referred to as curly quotes or smart quotes, as opposed to straight quotes, which are symmetrical.
Curly quotes kill programming.
If your animation script doesn’t work, the first thing to check is that copying and pasting it did not introduce curly quotes.
Deactivate curly quotes in Textedit
To deactivate curly quotes (activated by default), go under the menu TextEdit, to Preferences:
In the lower right, un-check Smart quotes.
You will then be able to use TextEdit without fear that curly quotes will be introduced by error.
The Web Inspector
You are not the first person to write a failed Javascript program.
Luckily you already have powerful tools at your disposal to help you find the bug.
All major browsers come with a tool to explore the construction of a web page: the web inspector.
In Chrome and Firefox, the web inspector is available by default. To enable it in Safari:
- under the menu Safari, select Preferences…
- click the Advanced tab
- check the case “Show Develop menu in menu bar (last item)
In looking for the error in your script, there are two likely places to check:
- the page source code
- Javascript errors
What to look for in the source code
Looking at the source code permits you to verify that the target and trigger objects are there and correctly identified, and that the animations script is actually included in the page.
To see the source code for your page:
- Safari: alt-cmd-I then the tab “Sources”
- Chrome: ctrl-click the page then “View Page Source”
- Firefox: cmd-U
To work, it is necessary to avoid clicking on a link. Once the source code is visible:
- type cmd-F to search
- search for targetObject and verify that there is a line with id=”targetObject” in the SVG
- search for triggerObject and verify that there is a line with id=”triggerObject” in the SVG
- search for myAnim and verify that your script is present in the page
If one of these elements is missing, verify that the page has been uploaded and that the script is correctly listed in the User Scripts in Page Settings.
Check that the case of the IDs is correct (targetObject and triggerObject).
What to look for in Javascript errors
To see Javascript errors, use the Web Inspector. It’s the same operation in all three browsers:
- alt-cmd-I then the tab Console
For a beginner, it can be difficult to interpret error messages.
If there are none, the problem is with the organization of the page, or with the page settings in Svija Cloud.
If there are errors and they seem to be related to your program:
- check the case of the IDs (in the script and in Illustrator)
- check that a curly quote didn’t end up in your program.
- verify that the entire script is included in the source code.
List of Animations Available
There are many animations available (list). Some of the simpler ones:
- x:10 · move 100px to the right
- y:10 · move 100px down
- rotation:360 · turn 360°
- scale:2 · increase size by 200%
- scaleX:2 · increase size by 200% horizontally
- scaleY:2 · increase size by 200% vertically
- autoAlpha:0.5 · reduce opacity to 50%
Each transformation can replace the red text below:
myAnim.to('#targetObject', 1.0, {scale:2.0});
Animations can be combined, separated by commas:
myAnim.to('#targetObject', 1.0, {scale:2.0, autoAlpha:0.5});
There is also an option to advance or delay an animation in time. The red text advances the animation by 0.7 seconds:
myAnim.to('#targetObject', 1.0, {scale:2.0}, "-=0.7");
To declare a fixed reference point when changing the size or rotating an object, add transformOrigin. The red text declares which part of the object will be stationary when it doubles in size:
myAnim.to('#targetObject', 1.0, {scale:2.0,transformOrigin:"50% 0%"});
The 50% 0% declares a fixed point at 50% of the horizontal axis (X) and 0% of the vertical axis (Y), starting in the upper left corner.
NOTE: when animating elements inside an SVG it is not necessary to specify units (px). Units will automatically be set to rem (1 rem = 10px).
When animating the movement of an entire SVG, it is necessary to specify the units (x:’+=10rem’).
For more information:
Where is my script?
Scripts can be added in the settings for each page or module, but working on a script in a web form can be annoying.
To make it easier, rather than putting the script itself in the “content” settings box, enter the name of a script file:
- my-script-animation.js
Svija will automatically look for the script in the sync folder, in “scripts”:
working folder └─ sync ├─ cloud ├─ desktop ├─ files ├─ fonts ├─ images ├─ mobile └─ scripts └─ my-script-animation.js
By leaving Svija Sync running, it is possible to refine an animation and modify it until the desired effect is achieved.
Animation Triggers
In a complex project with several animations, one can quickly lose track of which objects are animated and which objects trigger animations.
If the trigger is invisible, and the animation doesn’t work, it’s hard to know if the trigger is working or if the mouse actually passed over the trigger.
For this reason, it is recommended that a separate layer called “triggers” be created with brightly colored rectangles to use as triggers.
During the development phase the triggers will be set to 20% opacity, making them easy to find without blocking content.
Once the page is finished, one can simply select all and set the opacity to 0%.
Return to Using Svija
Other things you can do with Svija: