Updated 1 April, 2020
Animation Tips
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.
(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:
<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.
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)
clipping path
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.
obj.style.pointerEvents = ‘visiblePainted’;
obj.style.cursor = ‘pointer’;