SVG TEXT ANIMATION
animation for beginners
WALK THRU::
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
KEYFRAMES::
https://thoughtbot.com/blog/css-animation-for-beginners
TRANSFORMS::
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
PLAY WITH LINKS::
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
MORE EXAMPLES::
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function
[code language=”css”]
SyntaxSection
The <transform-function> data type is specified using one of the transformation functions listed below. Each function applies a geometric operation in either 2D or 3D.
Matrix transformation
matrix() Describes a homogeneous 2D transformation matrix.
matrix3d() Describes a 3D transformation as a 4×4 homogeneous matrix.
PerspectiveSection
perspective()Sets the distance between the user and the z=0 plane.
otationSection
rotate() Rotates an element around a fixed point on the 2D plane.
rotate3d() Rotates an element around a fixed axis in 3D space.
rotateX() Rotates an element around the horizontal axis.
rotateY() Rotates an element around the vertical axis.
rotateZ() Rotates an element around the z-axis.
Scaling (resizing)Section
scale()
Scales an element up or down on the 2D plane.
scale3d()Scales an element up or down in 3D space.
scaleX() Scales an element up or down horizontally.
scaleY() Scales an element up or down vertically.
scaleZ() Scales an element up or down along the z-axis.
Skewing (distortion)Section
skew() Skews an element on the 2D plane.
skewX() Skews an element in the horizontal direction.
skewY() Skews an element in the vertical direction.
Translation (moving)Section
translate() translates an element on the 2D plane.
translate3d() Translates an element in 3D space.
translateX() Translates an element horizontally.
translateY()Translates an element vertically.
translateZ() Translates an element along the z-axis.
[/code]
GLOSSARY::
https://webplatform.github.io/docs/tutorials/css_animations/
TEST VERSIONS::
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
TRANSITIONS::
https://css-tricks.com/using-multi-step-animations-transitions/
TRANSITIONS v2::
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
TRANSITIONS EXAMPLES
https://www.w3schools.com/css/css3_2dtransforms.asp
LIST OF PROPERTIES THAT CAN BE TRNASITIONED::
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
Transition-timing-function
Specifies a function to define how intermediate values for properties are computed. Timing functions determine how intermediate values of the transition are calculated. Most timing functions can be specified by providing the graph of the corresponding function, as defined by four points defining a cubic bezier. You can also choose easing from Easing Functions Cheat Sheet.
EASING PRIMER::
https://css-tricks.com/ease-y-breezy-a-primer-on-easing-functions/
div {
transition:
}
transition-timing-function: ease
transition-timing-function: linear
transition-timing-function: step-end
transition-timing-function: steps(4, end)
EASING CHEATSHEET::
https://easings.net/en
TRANSFORMS::
https://www.the-art-of-web.com/css/css-animation/
DIRECTIONS::
https://webplatform.github.io/docs/tutorials/css_animations/#Changing-Direction
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction
JAVASCRIPT
https://css-tricks.com/controlling-css-animations-transitions-javascript/
Adding the animation event listeners
We’ll use JavaScript code to listen for all three possible animation events. This code configures our event listeners; we call it when the document is first loaded in order to set things up.
[code language=”css”]
var element = document.getElementById("watchme");
element.addEventListener("animationstart", listener, false);
element.addEventListener("animationend", listener, false);
element.addEventListener("animationiteration", listener, false);
element.className = "slidein";
[/code]
This is pretty standard code; you can get details on how it works in the documentation for eventTarget.addEventListener(). The last thing this code does is set the class on the element we’ll be animating to “slidein”; we do this to start the animation.
Why? Because the animationstart event fires as soon as the animation starts, and in our case, that happens before our code runs. So we’ll start the animation ourselves by setting the class of the element to the style that gets animated after the fact.
Receiving the events
The events get delivered to the listener() function, which is shown below.
[code language=”css”]
function listener(event) {
var l = document.createElement("li");
switch(event.type) {
case "animationstart":
l.innerHTML = "Started: elapsed time is " + event.elapsedTime;
break;
case "animationend":
l.innerHTML = "Ended: elapsed time is " + event.elapsedTime;
break;
case "animationiteration":
l.innerHTML = "New loop started at time " + event.elapsedTime;
break;
}
document.getElementById("output").appendChild(l);
}
[/code]
This code, too, is very simple. It simply looks at the event.type to determine which kind of animation event occurred, then adds an appropriate note to the
<
ul> (unordered list) we’re using to log these events.
The output, when all is said and done, looks something like this:
Started: elapsed time is 0
New loop started at time 3.01200008392334
New loop started at time 6.00600004196167
Ended: elapsed time is 9.234000205993652
Note that the times are very close to, but not exactly, those expected given the timing established when the animation was configured. Note also that after the final iteration of the animation, the animationiteration event isn’t sent; instead, the animationend event is sent.
The HTML
Just for the sake of completeness, here’s the HTML that displays the page content, including the list into which the script inserts information about the received events:
Watch me move
This example shows how to use CSS animations to make H1
elements move across the page.
In addition, we output some text each time an animation event fires,
so you can see them in action.
https://codepen.io/pen/?&editable=true
Detecting the start and completion of a transitionSection
You can use the transitionend event to detect that an animation has finished running. This is a TransitionEvent object, which has two added properties beyond a typical Event object:
propertyName
A string indicating the name of the CSS property whose transition completed.
elapsedTime
A float indicating the number of seconds the transition had been running at the time the event fired. This value isn’t affected by the value of transition-delay.
As usual, you can use the addEventListener() method to monitor for this event:
el.addEventListener(“transitionend”, updateTransition, true);
You detect the beginning of a transition using transitionrun (fires before any delay) and transitionstart (fires after any delay), in the same kind of fashion:
[code language=”css”]
el.addEventListener("transitionrun", signalStart, true);
el.addEventListener("transitionstart", signalStart, true);
[/code]
Note: The transitionend event doesn’t fire if the transition is aborted before the transition is completed because either the element is made display: none or the animating property’s value is changed.
Mastering CSS Principles: A Comprehensive Guide, on Smashing Magazine
https://www.smashingmagazine.com/mastering-css-principles-comprehensive-reference-guide/
Learning CSS3: Useful References and Guidelines
https://www.smashingmagazine.com/learning-css3-useful-reference-guide/
CSS Tricks
https://developer.mozilla.org/en-US/demos/detail/css-tricks
CSS Spider Man
http://www.optimum7.com/css3-man/
CSS ANIMATION TOOLS
While knowing the CSS itself is great, plenty of tools are popping up that will help you animate. The 12 principles apply regardless, but if you’re worried about the code, these great tools let you try out CSS animation without getting too technical.
Sencha Animator – http://www.sencha.com/products/animator/
Adobe Edge – http://labs.adobe.com/technologies/edge/
Tumult Hype (Mac only)
DESIGNING ANIMATION:
https://www.smashingmagazine.com/2015/06/practical-techniques-on-designing-animation/
Understand how this curve is used to control animations
https://cubic-bezier.com/#.17,.67,.83,.67
DOCUMENTARY:
https://www.smashingmagazine.com/2013/04/css3-transitions-thank-god-specification/
– good breakdown
https://drafts.fxtf.org/web-animations/
https://www.smashingmagazine.com/2013/03/animating-web-gonna-need-bigger-api/
https://www.smashingmagazine.com/2011/09/the-guide-to-css-animation-principles-and-examples/
LIBRARIES::
https://www.sitepoint.com/our-top-9-animation-libraries/
https://cssauthor.com/css-animation-libraries/
https://thoughtbot.com/blog/css-animation-for-beginners
https://codeburst.io/getting-started-with-transition-and-transform-in-css-abb065272d10
https://cssstylekit.com/blog/css-animations-keyframes-animations-and-transitions/
https://webdesign.tutsplus.com/tutorials/the-state-of-css-animations–cms-28764
COOL EXAMPLES
https://www.creativebloq.com/inspiration/css-animation-examples
https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
FRONT END
https://freefrontend.com/css-animation-examples/
PERFORMANCE
https://www.keycdn.com/blog/animation-performance
CURTAINS.js
https://www.martin-laxenaire.fr/libs/curtainsjs/
https://css-tricks.com/animate-images-and-videos-with-curtains-js/
2D AND 3D WEB STUFF
https://www.pixijs.com/
THIS MIGHT BE AWESOME!!!
https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API
EAMPLE FROM WORK
Quick Explanation
https://spectre.nakedsword.com/_html/parallax/parallax_3_buttons_tall.html
https://spectre.nakedsword.com/_html/parallax/parallax_3_buttons.html
Shows how I am using font size to affect the floating pieces in the animated windows –
https://spectre.nakedsword.com/_html/parallax/parallax_3_buttons_tall_withcontrols.html
TO Spectre:
https://spectre.nakedsword.com/_html/parallax/arrowbanner_add_to_spectre.html
TEST PAGES::
https://spectre.nakedsword.com/_html/parallax/arrowbanner_clickslideout_1_first.html
make browser smaller / larger / the ns logo does not scale – animated images don’t respond like regular images – they have to be made proportional to everything else they are working with –
“With a bit of planning, animations can work just as well at small sizes as they do at large sizes. Don’t use pixel units, and make sure every width, height, and distance value are defined based on one or two variables based on the container/viewport dimensions or by font size.”
so basically the way the site is working now had to be rethought if we were going to use these at all FUNNNNNNN –
https://spectre.nakedsword.com/_html/parallax/arrowbanner_clickslideout_1.html
– very simple – but still responsive – plays until clicked –
https://spectre.nakedsword.com/_html/parallax/arrowbanner_clickslideout_1b.html
– tricked to think that window is larger than it is – makes animation appear in different position – appear to start later
https://spectre.nakedsword.com/_html/parallax/arrowbanner_clickslideout_1c.html
– can have something layered above / below running arrow
https://spectre.nakedsword.com/_html/parallax/arrowbanner_clickslideout_1d.html
– item fade in – initial arrow can wait then start sliding –
https://spectre.nakedsword.com/_html/parallax/arrowbanner_clickslideout_1e.html
– item fade in – initial arrow can wait then start sliding – reversed background gradient behind –
https://spectre.nakedsword.com/_html/parallax/arrowbanner_clickslideout_1f.html
– fade in / wait / slightly stronger gradient / movement on arrow when it is clicked (forwarding directly to join – could wait until that animation finsishes)
Possible to run the arrow animations independently of the main one – sequence needs to be finalized – and it has to repeat when it ends – without user interaction – so it is moving –
https://spectre.nakedsword.com/_html/parallax/arrowbanner_clickslideout_2a.html
https://spectre.nakedsword.com/_html/parallax/arrowbanner_clickslideout_2b.html
Arrow Moving
https://spectre.nakedsword.com/_html/parallax/parallax_3_buttons_short_withcontrols_2.html
https://spectre.nakedsword.com/_html/parallax/parallax_3_buttons_short_withcontrols.html
No Control Examples
https://spectre.nakedsword.com/_html/parallax/parallax_3_buttons.html
https://spectre.nakedsword.com/_html/parallax/parallax_3_buttons_tall.html
With Control Examples
https://spectre.nakedsword.com/_html/parallax/parallax_3_buttons_withcontrols.html
https://spectre.nakedsword.com/_html/parallax/parallax_3_buttons_tall_withcontrols.html
Sword Idea
https://spectre.nakedsword.com/_html/parallax/nssword.html
https://spectre.nakedsword.com/_html/parallax/swords.html
BRAINS::
https://spectre.nakedsword.com/_html/parallax/font_size_sizer.css
https://spectre.nakedsword.com/_html/parallax/font_size_sizer_withcontrols.css
RESOURCES::
https://css-tricks.com/scaling-responsive-animations/
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Step by step:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
https://thoughtbot.com/blog/css-animation-for-beginners
https://css-tricks.com/snippets/css/keyframe-animation-syntax/
fade in sequence
https://stackoverflow.com/questions/23985018/simple-css-animation-loop-fading-in-out-loading-text
remove and restart
https://stackoverflow.com/questions/28580947/jquery-animate-css-animation-only-working-once-animation-not-resetting
I think the cleanest solution is to wrap the functionality of removing the element and re-inserting it in the same position in the HTML tree in a global function. Then, when you want to restart an animation, you just remove the class, call the reset function (grabbing the newly-inserted element from the return value), and then add the animation class(es) back to start the animation again.
For example:
function reset($elem) {
$elem.before($elem.clone(true));
var $newElem = $elem.prev();
$elem.remove();
return $newElem;
} // end reset()
$(“#button”).click(function () {
var $this = $(this);
$this.removeClass();
$this = reset($this);
$this.addClass(“fadeInDown animated”);
});
http://jsfiddle.net/jqm4vjLj/6/
This solution provides maximum responsiveness, since the old in-progress animation is automatically ended when the animating element is destroyed, and the newly-inserted element’s animation begins immediately.
https://css-tricks.com/restart-css-animation/
Fade In / Out Multiples
https://stackoverflow.com/questions/23985018/simple-css-animation-loop-fading-in-out-loading-text
http://matthew.wagerfield.com/parallax/
https://daneden.github.io/animate.css/
ARGUMENTS FOR USEFULNESS OF MOTION
https://constructive.co/insight/web-animation-delightful-or-distracting/
hhttps://inmarkmg.com/agency/social-media/increase-user-engagement-with-motion-and-animation/
https://www.edge-creative.com/2018/04/10/increase-engagement-website-animated-content/
https://www.smashingmagazine.com/2017/01/how-functional-animation-helps-improve-user-experience/
https://designmodo.com/wix-review/
[display-posts category=”animation, animation-overview, animation-morecheats” category_display=”true” category_display=”post_tag” category_display=”taxonomy_name” image_size=”medium” wrapper=”div” wrapper_class=”display-posts-listing grid” meta_key=”_thumbnail_id” pagination=”true” pagination=”33″]
[display-posts category=”wordpress”]
[display-posts]