Animate.css and WoW

Before you dive into details, you can try animate and wow to trigger it on scroll. So you can just add classes to your elements, like hinge

<html>
  <head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js">
  </script>
  <script>
    new WOW().init();
  </script>
</head>
  <body>
    <div class="animated fadeInRightBig">
      Content to Reveal Here
    </div>
  </body>
</html>

Transform property

div {
  transform: scale(2,3);
}

Note that element still occupy initial size. If you wrap with <span> than you need to set display: inline-block (width and height can only be applied to inline-block or block).

2D transforms:

  • translate(50px, 100px) is 50px right and 100px down
  • rotate(20deg) clockwise
  • scale(2,3) width 2 times and height 3 times bigger
  • skewX(20deg) skewY(-10deg) and skew(20deg,-10deg)
  • matrix(6 params)

another usefull property is transform-origin: 50% 50% 0 which move the base of transform, on x, y and z axis (for 3D).

3D transforms:

  • rotateX(20deg) around X axis (horizontal)
  • rotateY(20deg) around Y axis (vertical)
  • rotateZ(20deg) around Z axis (toward user)
  • translate3d scale3d rotate3d

usefull property is perspective: 400px is how many pixes is 3D element placed from the view and perspective-origin: 10% 10% bootom position on x and y axis.

Transition property

Transition allows that element change property smoothly, over given duration. Some of the timing functions could be: ease, ease-in, ease-in-out, linear.

div {
  transition: width 2s ease-out 1s;
  // or
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: ease-out;
  transition-delay: 1s;
}

usually we change properties on hover.

Animation property

so you don’t need user action to animate…

div {
  animation: example 5s linear 2s infinite alternate;
  // or
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;

  animation-fill-mode: forwards;
}

@keyframes example {
  0% { width: 10px; }
  25% { width: 100px; }
  100% { width: 110px; }
}

Inkscape

Usefull shortcuts:

Svg

You can create SVG in Inkscape (Gimp can not export in SVG). If you open existing svg or copy paste some paths, in Inkscape you can Edit -> “Resize page to selection” to crop to fit size to include only paths. When you export you should optimize online https://jakearchibald.github.io/svgomg/ or inline

svgo file_name.svg --pretty --disable=cleanupIDs

or download inkscape extension https://github.com/juanfran/svgo-inkscape and use Save as "optimized with svgo" and uncheck Plugin 2 -> CleanupIDS if you want your grouped ids to remain, so you can target them in css.

In rails you can use svg inliner https://github.com/jamesmartin/inline_svg In inkscape we can use multiple layers with same name, so id is autogenerated, and cleaned with svgo, so better is to use groups.

  • main <svg width="123" height="123" viewBox="0 0 123 123">
    • view box has four params: x, y, width, height (those are units inside svg)
  • group <g id="petals" fill="#f00"> group elements
  • text <text x="0" y="200" dx="10">Some text</text> x is distance from left, y from top, dx is another drift
  • circle <circle cx="1" cy="1" r="5" stroke="green"/> cx is center x, r is radius.
  • rectangle <rect x="1" y="1" width="10" height="10" rx="1" style="" /> rx is radius of corner
  • ellipse <ellipse cx cy rx="10" ry="20"/> cx is horizontal radius
  • line <line x1="0" y1="0" x2="10" y2="20" />
  • polygon and polyline <polygon points="200,10 250,190 160,210"/>
  • path: M - moveto, L - lineto, Z - closepath, H - horizontal, V -vertical lowercase letters is relative position, uppercase is absolutely. <path d="M 50 0 L 75 200 L 225 200 Z" />

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#Curve_commands C cubic curve C x1 y1, x2, y2, x, y first two are control points, (x,y) is end of curve. C followed with S S x2 y2, x y is shorten version of C which is reflection. Q quadratic curve Q x1 y1, x y is simpler since both slopes are equal. Also it could be followed with T T x y which will use same reflection.

Elliptical arcs are complex to write A rx ry x-axis-rotation large-arc-flag sweep-flag x y

Reuse components with <defs> and <simbol>. http://vanseodesign.com/web-design/svg-definition-reuse/

Attach another element with <marker> https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker

CSS Animations

You can animate using 3 ways: with css, with <animate> and with javascript. video

SVG Animate with css

For SVG there are custom css which can be inline like fill="blue" or in css

  • fill: blue color of element area
  • stroke: pink color of line, text or outline
  • stroke-width: 5 thickness or line, text or outline
  • stroke-linecap: butt round square ending of open path
  • stroke-dasharray: 10 length of dashes and spaces
  • stroke-dashoffset: 10 when to start dash or space, this is used for line animation along the path
  • transform:rotate(20deg) translate(x,y)

Here is some example of text shadows: https://www.w3.org/People/Dean/svg/texteffects/index.html https://www.w3schools.com/graphics/svg_feoffset.asp

  • to add blur ``` asd

</degs>


But better is to add another original item after filtered (so filtered is in
background).

If you want to apply multiple times (so it is bolder) you can use `feMergeNode`

</defs>

Simple Glow Simple Glow

* to show text along the path use

<%= t 'site_title' %>

![text along path](/assets/text_along_path.png "Text along
path")

* pure text in pure css can be different color with help of fill transparend and
  background
  https://mawla.io/team/

.colorize-text-background background: radial-gradient($color-a, $color-b 60%, $color-c %20) -webkit-background-clip: text -webkit-text-fill-color: transparent


  You can also animate saturation or sepia using filter
  https://www.cssfilters.co/

# SVG Mask

* jpeg does not support mask (png does but is not optimized for big images), to
use jpeg and png mask and one svg to combine them

</mask> ``` * fill in text with png mask [video](https://www.youtube.com/watch?v=B5ol4ss-mi4&index=9&list=PLWjCJDeWfDdeYtU0NMvYvfqqFA1Jsh3NM) ``` </mask> </defs> Mars ``` * fill in text with jpg image [video](https://www.youtube.com/watch?v=lSNnVbfvJJ0&index=11&list=PLWjCJDeWfDdeYtU0NMvYvfqqFA1Jsh3NM) ``` Novosadski Kup ``` * default color is black and that means it is transparent. To cover everything except text, that fill rectangle and keep text as black (transparent). <https://codepen.io/SimonEvans/pen/weoLLB> * another example of video inside text https://css-tricks.com/responsive-knockout-text-with-looping-video/ * curved text ``` TEXTTTTTTTTTTTTTTTTT ``` # Animate with <https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion> Examples can be seen on https://css-tricks.com/guide-svg-animations-smil/ To move along the path but only on portion of the path, use: ``` ``` ## Animate SVG with javascript There is nice library to move elements along path <https://github.com/lmgonzalves/path-slider> To move arrow and increase line you can also use js libraries: [snap.svg](https://github.com/adobe-webplatform/Snap.svg) <https://codepen.io/mattsince87/pen/snqLy> <https://codepen.io/duleorlovic/pen/zpmXOw> [animejs](http://animejs.com/) <https://maxwellito.github.io/vivus/> <https://codepen.io/Zaku/pen/ALChE> live coding https://www.youtube.com/watch?v=-zLiw1GeEGo * smooth transitions between different svg [flubber](https://github.com/veltman/flubber) * radial or any path progress bars <https://daverupert.com/2018/03/animated-svg-radial-progress-bars> * star heart animation with morphing https://css-tricks.com/creating-star-heart-animation-svg-vanilla-javascript/ # Example of nice landing page with animation * https://scrumpy.io cat is working on laptop * http://taotajima.jp/works/ images and video on hover # Tips [scalling](https://css-tricks.com/scale-svg/) raster images like jpg, png and gif have defined size and aspect ratio of width to height. You can auto scale to cover `width="100%"` (or to cover `height="100%"`). all images has default size 300px wide 150px tail. if we change width or heigh of svg, inner image will stay the same (similar that font is the same if we scale div). We can scale to fit with and without distorting. CSS `width: 100%` will overwrite width attribute on top svg element. `viewBox="x y width height"` for example `viewBox="0 0 100 100"` defined top left corner as (0,0) and bottom right as (100,100). `preserveAspectRatio="xMidYMin slice"` or `preserveAspectRatio="none"` if you want to preserve aspect ratio. # Angular Include `ngAnimate` and for `ngRepeat` use `ng-enter` and `ng-enter-active` [old doc](https://code.angularjs.org/1.2.22/docs/api/ngAnimate/service/$animate). We could just also watch `ng-leave`, `ng-move` with ngRepeat, `ng-add` and `ng-remove` with ngClass, `ng-hide` with ngShow. There is nice [ng-fx](https://github.com/AngularClass/ng-fx) [egghead](https://egghead.io/lessons/angularjs-introduction-to-ngfx-for-angular-animations) so you can use their animations. To install just run `bower instal ng-fx --save` and include `ngFx` in your module file. Just add some of [the supported](https://github.com/AngularClass/ng-fx/blob/master/animationList.txt) animations like `div(ng-repeat="item in items" class="fx-zoom-left fx-speed-500 fx-ease-sin fx-stagger-10")` # Anime.js [Animejs](http://animejs.com/documentation/) is nice tool that can animate any css properties (opacity, color), transforms (translate, rotate), any dom attribute with numberical value (svg points). http://bouncejs.com/ # Victor create svg from ruby use ruby to create svg https://github.com/DannyBen/victor `rect`, `circle`, `polygon`, `path`... you can generate in browser https://kuboon.github.io/victor-opal/ note that animation is visible only in browser ``` require 'victor' svg = Victor::SVG.new width: 100, height: 100 svg.build do css['.animate'] = { animation: 'move 1s', 'animation-fill-mode': 'forwards', } css['.animate.left'] = { transform: 'translate(-100px,0)', } css['.animate.right'] = { transform: 'translate(100px,0)', } css['@keyframes move'] = { '100%': { transform: 'translate(0, 0)' } } rect x: 0, y: 0, widht: '100%', height: '100%', fill: '#ddd' g font_size: 40, font_weight: 'bold', font_family: 'arial', fill: 'blue' do text 'TRK', x: 10, y: 40, class: 'animate left' text 'BOT', x: 10, y: 80, class: 'animate right' end end svg.save 'logo.svg' system 'x-www-browser logo.svg' ``` Source of the `logo.svg` ``` <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> API BOT ``` # Examples and Tricks * decorative text animations <https://tympanus.net/Development/DecorativeLetterAnimations/> * letter effects short to long words <https://codepen.io/duleorlovic/pen/mXwyGj> * infinite loader <https://codepen.io/duleorlovic/pen/rJwaZL> * animated download button <https://scotch.io/tutorials/build-a-download-button-full-of-micro-interactions> * indent list items ``` ul { list-style: none; } li { transition: all 0.1s ease-out; } li:hover { margin-left: 8px; } ``` UI animation tips https://uxdesign.cc/good-to-great-ui-animation-tips-7850805c12e5 https://24ways.org/2010/intro-to-css-3d-transforms/ https://www.youtube.com/watch?v=aVcs-zQ1q4U https://codepen.io/maattt/pen/RWxOjd https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes