It’s very helpful to put all animation triggers on a single layer, grouped under the name “triggers”, with opacity set to zero (individual triggers are opaque). Then, when debugging animations you can just add:
document.getElementById('triggers').style.opacity = 0.2;
to be able to see your triggers while working.
When creating animation triggers in Illustrator, use
myAnimationPlay();
instead of
myAnimation.play();
You’ll need to add (with the animation JS):
function myAnimationPlay(){
myAnimation.play();
}
The reason is that you can then insert alerts, secondary functions etc. in the triggered function — things you may not anticipate when first setting it up.
The name of a GSAP animation cannot contain a dash, but can contain an underscore. Adobe Illustrator objects can contain a dash but not an underscore (they’re converted to “_x5F_” when exported). Except that a dash in the name of a clipping path will break any attempt to animate it. For this reason it is a good rule to use camelCase when naming objects in Illustrator and javascript when working on animation.
To avoid a brief flash of wrong content on loading, try to design animations that look correct before starting (using to and from appropriately). For example, mouseover effects should be hidden by default rather than being hidden by the animation.
Adobe Illustrator elements that will be animated cannot be named with an underscore because the underscore is converted to “_x5F_” when the SVG is exported.
(1/2) A common animation technique is to create a clipping path in Illustrator, then animate the clipping path rather than its contents. It is necessary for the clipped object to be a group, not a simple path, for the animation to work. (2/2) The simplest clipping group consists of three elements, visible in the layers palette:
<Clip Group> <Rectangle> <Rectangle>
The underlined text is the clipping path. Do not use a dash in the name of this path if you need to manipulate it, or the animation will break.
Because dashes in clipping paths break animations, and underscores are converted to entities, CamelCase is recommended in naming elements in Illustrator that will be manipulated.
To skip to the end of an animation:
animation.progress(1, false);
Use animations in a way that avoids slowing down navigation
When scaling images using scaleX and scaleY, it seems as though the scaling is sometimes a percentage of the initial size, and sometimes a percentage of the file pixel size. More research is needed.
Adobe Illustrator’s menu item “Export for Screens” strips all links and mouseovers from the resulting SVG and cannot be used for generating animated SVG’s. More research is needed.
Blend modes in the AI transparency panel are not transferred into the SVG files.
Opacity masks (AI transparency palette) are broken in Edge and Chrome (other browsers not tested)
Clipping mask animations are broken in Edge. Microsoft’s Edge browser categorically refuses to animate clipping masks (to animate revealing an object). The workaround is to animate ensemble of the clipping mask and the clipped object and to apply an opposing animation to the clipped object:
objectOuter (layer or group)
<Clip Group>
clipping path
<Group>
objectInner (group)
path1
path2
...
In order to create an effect of moving a clipping mask, you animate the clipping mask and its contents (objectOuter), and then apply the opposite animation on the inner object:
myAnim.to ('#objectOuter', 1, {x:"10rem"});
myAnim.to ('#objectInner', 1, {x:"-10rem}, "-=1");
The result is that the clipping mask moves and the inner object remains stationary. It’s helpful to remember that the desired animation is applied to the outer object. The inner animation is just required to cancel it out. NOTE: the clipping path must be named or the animation will not work.The example above would break unless “clipping path” was renamed to something else.
When animating something that is masked with a clipping path, the element to be animated must be part of a group. If it is not part of a group, the clipping path will be moved with the animated element.
Animating placed .ai or .pdf files does not work. The problem is that they are embedded in the SVG with a clipping path that cannot be directly manipulated. The solution is to select the placed file, then “Embed Image(s)” from the Links palette menu. This does not apply to placed bitmapped images.
Note: placed .ai and .pdf files are embedded in the SVG source and are not treated as placed files in the final SVG.
In general be aware that Illustrator auto-creates names for clipping paths etc., and if there is more than one SVG in a page (main page and menu), there can be conflicts. For example, we wanted to include a placed logo in the menu at ozake.com but the auto-generated clipping paths conflicted with clipping paths in the main document and the behavior of the logo became completely unpredictable. Both the main document and the menu contained lines like:
st6{clip-path:url(#SVGID_2_);}
and they interfered with one another. The solution is to embed artwork and to give unique names to every element.