EPISODE 2
Episode 1 covered a little background as to how Xara has implemented CSS animations.
We covered how the existing code could be directly accessed through using the ClassName htmlclass in Utilities > Names.
A went a stage further by assigning a ClassName to a shape and placing its CSS code into Web Properties > Website > HTML Code(head).
So for one shape we had:
- Name: htmlclass="animated hinge ani_time ani_delay"
- Website > HTML Code(head):
- .ani_time { animation-duration: 25317ms; }
- .ani_delay { animation-delay: 2392ms; }
- The timings were arbitrary to demonstrate how granular our control could be.
- You could also use Xara's duration ClassNames: xr_ad01 through to xr_ad50.
- Xara has never allowed accurate timing control through its use of a slider to set the duration.
- ISSUE#1: What was lost was the firing up of the animation when the shape came into view.
- ISSUE#2: We also traded out the animation-timing-function used by Xara.
ISSUE#1
Xara uses coding to deliver the concept of an Intersection Observer. As this code exists, there is no need to develop one all over again.
We therefore need two Dialogs open to achieve this:
- (Xara) Utilities > Web Animation > Reveal/Scroll > Reveal animation > Animation: Fade In & Zero Speed.
- (Bespoke) Utilities > Names > Apply name: htmlclass='...'.
The animation effect in #1 is played quickly, followed by your override in #2.
If you prefer, use the same animation in both #1 and #2 as then only your longer duration will override the timing set in #1.
ISSUE#2 is still occurring, which is why I prefer Fade In & 0 as a first approach.
Do experiment with Mixing and Matching. Try:
- (Xara) Utilities > Web Animation > Reveal/Scroll > Reveal animation > Animation: Rotate/fade up right & Speed: 1s.
- (Bespoke) Utilities > Names > Apply name: htmlclass="animated slideInRight xr_ad50".
ISSUE#2
Our third Dialog is Web Properties > Website > HTML Code(head), used the once and containing:
<style>
.EaseIn { animation-timing-function: ease-in; }
.EaseOut { animation-timing-function: ease-out; }
.EaseInOut { animation-timing-function: ease-in-out; }
</style>
You can now simply include (EaseIn, EaseOut, EaseInOut) in the htmlclass construction.
All the tweaks have been added to the Red shapes:
CSS - Controlled Animations II.xar
Acorn
Bookmarks