Still trying my hardest to follow Episode 1 Acorn. I'll get there in the end. Thak you, this is a lot of work for you :)
Printable View
Still trying my hardest to follow Episode 1 Acorn. I'll get there in the end. Thak you, this is a lot of work for you :)
EPISODE 4
This is quite simple: you can run Animations back-to-back with careful use of the animation-delay property.
This level of granularity requires CSS coding that would be over-complex trying to squeeze into a Name value.
The displayed code is in Website > HTML Code (head.
The ClassName (htmlclass="inforapenny") is all that is required for the Name value for the image. Note, ClassNames are case-sensitive so 'inForAPenny' would not work.
Attachment 129812
The animation and delay of each effect are comma-separated.
The duration can follow the animation-name with something like 3.2s or 473ms.
for fuller explanation on all animation properties: https://www.w3schools.com/css/css3_animations.asp.
Acorn
You're cooking on gas Acorn. I can't keep up with you!
Just to ensure you know we are here and following you, here's my experimenting with your great input.
I think you have it Egg!
The off-page button is not needed as you have applied a SlideinLeft animation to the LB shape.
Neither is the link to ani.css for the same reason.
To get the others to replay on "reveal", I might add FadeIn&0 to UL, UR & BR shapes as well.
I would use the full property presentation when adding multiple animations, otherwise
{ animation: pageRotateFlipBI 2.5s ease-in-out 0s 1 forward; } works well.
I can't wait until you start tweening with keyframes.
Acorn
You can't wait until......?Quote:
I can't wait until to start tweening with keyframes.
I tried the link to ani.css in the head first and this didn't work but I forgot to remove it.
The button worked prior to giving me giving it a reveal attribute.
Egg, I entered 'to' instead of 'you'.
Corrected in OP.
Acorn
EPISODE 5
This is all around handling mousing out of an animation; Xara's approach chops it dead so it is very abrupt and disconcerting.
The CSS Code in the example file, Attachment 129866, adds an animation into default ClassName and a different one into its :hover pseudo-attribute.
All prior constructions still apply.
The end result is chaotic but harder to force jumps.
A further example to implement:
This throws in an immediate hover colour change, which could have been set up as a slower transition by adding ' transition: all 5.37s;' at the end of the first-bracketed HeadShake code.Quote:
.HeadShake {
animation: headShake;
animation-duration: 3.27s;
animation-iteration-count: 2;
}
.HeadShake:hover {
animation: heartBeat;
animation-duration: 1.62s;
animation-iteration-count: 4;
animation-direction: alternate;
animation-fill-mode: forwards;
background-color: green !important;
}
All timings are random and there for you to tweak.
Acorn
Acorn, I'm just today looking at the posts in this thread and at the files you attached. This is really an awesome way to "force" the Xara software to do precisely what you want. Thanks, kudos and congrats!
Acorn, your development in this thread is impressive and very useful. I had the opportunity to experiment with it for a while yesterday so that I could grasp the potential.
I have a couple of concerns if you’re willing to entertain them.
I have been using Xara’s built-in animation effects on the website I’m developing, specifically reveal animations. Some of them include triggers, and all of them are set to reveal “Once only”. As best as I can determine using your method, both of these features still require use of the Web Animations dialog box.
For the trigger feature, I selected the animation set to “Instant”. The result is that the specifications set up through CSS classes that you developed work without interference. Using animation-iteration-count (as in your inforapenny class) does not stop the reveal from repeating if the element moves out of and back into the viewport. The trigger function undoubtedly relies on a JavaScript Intersection Observer meaning it would be more complex to extract it from the Xara set up and use the “manual” approach that you gave us.
I don’t know if the reveal “Once only” feature relies similarly on JS, or if it could be accomplished through CSS. I was able to get the desired effect by using the Web Animations dialog and selecting the same reveal function specified in the htmlclass name (e.g., FadeIn) with Speed (and Delay) set to 0s. As I think you point out in the thread somewhere, the times defined in the named classes override the times in the dialog and the reveal works perfectly. Fortunately, the “Once only” feature is entirely compatible.
Are either, or both, of these issues part of your Setting up better Animations initiative? It would be quite powerful to be able to eliminate the Web Animations function from our Xara sites entirely and rely on our own coding.
Again, thanks for the effort and great results.