From 067a061702815738e66396e88210fe090f5ebdd5 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Wed, 8 Mar 2023 12:02:05 +0400 Subject: [PATCH 1/8] Create anima mixins --- src/scss/_mixins.scss | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss index 1c77848..9dd8416 100644 --- a/src/scss/_mixins.scss +++ b/src/scss/_mixins.scss @@ -5,6 +5,12 @@ } } +@mixin anima-default($class, $property, $value) { + [class*="ani-"][class*="-#{$class}"] { + #{$property}: #{$value}; + } +} + @mixin global($class, $property, $value) { .#{$class}, .#{$class}-all > * { @@ -27,6 +33,21 @@ } } +@mixin anima-states($class, $property, $value) { + [class*="ani-"][class*="-#{$class}"][class*="-it"], + [class*="ani-"][class*="-#{$class}"][class*="-all"] > *, + [class*="ani-"][class*="-#{$class}"][class*="-on"]:hover, + [class*="ani-"][class*="-#{$class}"][class*="-on"]:focus, + *:hover > [class*="ani-"][class*="-#{$class}"][class*="-in"], + *:focus > [class*="ani-"][class*="-#{$class}"][class*="-in"], + [class*="ani-"][class*="-#{$class}"][class*="-each"] > *:hover, + [class*="ani-"][class*="-#{$class}"][class*="-each"] > *:focus, + [class*="ani-"][class*="-#{$class}"][class*="-many"]:hover > *, + [class*="ani-"][class*="-#{$class}"][class*="-many"]:focus > * { + #{$property}: #{$value}; + } +} + //********** KEYFRAMES **********// @mixin keyframes($key) { @keyframes #{$key} { From 8241f96638225108e7824b91e8972557930018d9 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Wed, 8 Mar 2023 12:02:40 +0400 Subject: [PATCH 2/8] Add new vars for tags & rename anima var --- src/scss/_vars.scss | 39 ++++++++++++++++++++++++++------------- 1 file changed, 26 insertions(+), 13 deletions(-) diff --git a/src/scss/_vars.scss b/src/scss/_vars.scss index 3ae2f40..7a65a8a 100644 --- a/src/scss/_vars.scss +++ b/src/scss/_vars.scss @@ -67,26 +67,32 @@ article { h1 { --ani-title-font-size: calc(var(--ani-body-font-size) * 2); + --ani-title-margin: 20px 0; } h2 { --ani-title-font-size: calc(var(--ani-body-font-size) * 1.8); + --ani-title-margin: 15px 0; } h3 { --ani-title-font-size: calc(var(--ani-body-font-size) * 1.6); + --ani-title-margin: 10px 0; } h4 { --ani-title-font-size: calc(var(--ani-body-font-size) * 1.4); + --ani-title-margin: 5px 0; } h5 { --ani-title-font-size: calc(var(--ani-body-font-size) * 1.2); + --ani-title-margin: 0; } h6 { --ani-title-font-size: var(--ani-body-font-size); + --ani-title-margin: 0; } h1, @@ -99,11 +105,6 @@ h6 { --ani-title-text-transform: capitalize; } -a { - --ani-a-outline: 0; - --ani-a-text-decoration: none; -} - ul { --ani-ul-margin: 0 0 10px; --ani-ul-padding: 0; @@ -117,24 +118,36 @@ table { --ani-table-vertical-align: middle; } +figure { + --ani-figure-margin: 0; +} + +img, +video { + --ani-img-max-width: 100%; + --ani-img-height: auto; + --ani-img-object-fit: contain; +} + code, pre { + --ani-code-font-size: 1em; --ani-code-margin: auto; --ani-code-overflow: scroll; --ani-code-padding: 10px; --ani-code-text-align: initial; + --ani-code-white-space: pre-line; --ani-code-width: 100%; } -figure { - --ani-figure-margin: 0; +p { + --ani-p-margin: 5px; } -img, -video { - --ani-img-max-width: 100%; - --ani-img-height: auto; - --ani-img-object-fit: contain; +a { + --ani-a-color: var(--sky); + --ani-a-outline: 0; + --ani-a-text-decoration: none; } button, @@ -227,7 +240,7 @@ button, } /********** ANIMATION **********/ -[class*="anima-"] { +[class*="ani-"] { --ani-animation-duration: 2s; @each $type, $option in $animation-options { From a472ea0a32d4af6466b26ea225758dd4f9b7697a Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Wed, 8 Mar 2023 12:02:50 +0400 Subject: [PATCH 3/8] Add new props to tags --- src/scss/_tags.scss | 33 ++++++++++++++++++++------------- 1 file changed, 20 insertions(+), 13 deletions(-) diff --git a/src/scss/_tags.scss b/src/scss/_tags.scss index 390be25..2132a95 100644 --- a/src/scss/_tags.scss +++ b/src/scss/_tags.scss @@ -43,17 +43,13 @@ h3, h4, h5, h6 { + margin: var(--ani-title-margin); font-family: var(--ani-serif); text-align: var(--ani-title-text-align); text-transform: var(--ani-title-text-transform); font-size: var(--ani-title-font-size); } -a { - text-decoration: var(--ani-a-text-decoration); - outline: var(--ani-a-outline); -} - ul { margin: var(--ani-ul-margin); padding: var(--ani-ul-padding); @@ -68,26 +64,37 @@ table { font-family: var(--ani-monospace); } +figure { + margin: var(--ani-figure-margin); +} + +img, +video { + max-width: var(--ani-img-max-width); + height: var(--ani-img-height); + object-fit: var(--ani-img-object-fit); +} + code, pre { - font-size: 1em; overflow: var(--ani-code-overflow); margin: var(--ani-code-margin); padding: var(--ani-code-padding); width: var(--ani-code-width); font-family: var(--ani-monospace); + font-size: var(--ani-code-font--size); text-align: var(--ani-code-text-align); + white-space: var(--ani-code-white-space); } -figure { - margin: var(--ani-figure-margin); +p { + margin: var(--ani-p-margin); } -img, -video { - max-width: var(--ani-img-max-width); - height: var(--ani-img-height); - object-fit: var(--ani-img-object-fit); +a { + text-decoration: var(--ani-a-text-decoration); + outline: var(--ani-a-outline); + color: var(--ani-a-color); } button, From 5dcd3f9cff55a09a0f8efe88964a3603378f2ad9 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Wed, 8 Mar 2023 12:03:18 +0400 Subject: [PATCH 4/8] New naming to prevent conflict --- src/scss/_maps.scss | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/scss/_maps.scss b/src/scss/_maps.scss index d1f6dd6..d00802f 100644 --- a/src/scss/_maps.scss +++ b/src/scss/_maps.scss @@ -219,11 +219,9 @@ $animation-duration: ( $animation-timing-function: ( "linear": linear, - "in": ease-in, - "out": ease-out, - "inout": ease-in-out, - "start": step-start, - "end": step-end + "easin": ease-in, + "easout": ease-out, + "inout": ease-in-out ) !default; $animation-iteration-count: ( @@ -245,7 +243,7 @@ $animation-options: ( ) !default; $animation-direction: ( - "alt": alternate, - "rev": reverse, + "alte": alternate, + "reve": reverse, "altrev": alternate-reverse ) !default; From fc4beeadbb457c60a9cf201ab227a37b3cd57660 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Wed, 8 Mar 2023 12:03:36 +0400 Subject: [PATCH 5/8] Create new anima classes for concat --- src/scss/_classes.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/scss/_classes.scss b/src/scss/_classes.scss index d208cc5..7b0a099 100644 --- a/src/scss/_classes.scss +++ b/src/scss/_classes.scss @@ -262,22 +262,22 @@ } /********** ANIMATION **********/ -[class*="anima-"] { +[class*="ani-"] { animation-duration: var(--ani-animation-duration); } /********** ANIMATION NAME **********/ @each $key, $value in $transforms { - @include states("anima-#{$key}", "animation-name", $key); + @include anima-states("#{$key}", "animation-name", $key); } /********** ANIMATION OPTIONS **********/ @each $type, $option in $animation-options { @each $key, $value in $option { - @include default("anima-#{$key}", "animation-#{$type}", "var(--ani-animation-#{$type}-#{$key})"); + @include anima-default("#{$key}", "animation-#{$type}", "var(--ani-animation-#{$type}-#{$key})"); } } @each $key, $value in $animation-direction { - @include default("anima-#{$key}", "animation-direction", $value); + @include anima-default("#{$key}", "animation-direction", $value); } From a8b17cf0ed4515d6274221fe694c812a963074c6 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Wed, 8 Mar 2023 12:03:56 +0400 Subject: [PATCH 6/8] Add missing examples & update syntax to index --- index.html | 218 ++++++++++++++++++++++++++++++++++++----------------- 1 file changed, 148 insertions(+), 70 deletions(-) diff --git a/index.html b/index.html index 9bf7e67..d841fc1 100644 --- a/index.html +++ b/index.html @@ -222,28 +222,74 @@

Anima

Animation Name

+

All states must be concat with the name, like this :

+
    +
  • +

    + for default animation on the element itself, + put this class on it : +

    + class="ani-grow-it" +
    • +
  • +

    + for default animation to all children, + put this class on the parent : +

    + class="ani-grow-all" +
    • +
  • +

    + for hover/focus animation on the element itself, + put this class on it : +

    + class="ani-grow-on" +
    • +
  • +

    + for hover/focus the parent then animate one child, + put this class on the child : +

    + class="ani-grow-in" +
    • +
  • +

    + for hover/focus animation to each child, + put this class on the parent : +

    + class="ani-grow-each" +
    • +
  • +

    + for hover/focus the parent then animate all children, + put this class on the parent : +

    + class="ani-grow-many" +
    • +
+

Translate (hover to test)

  • -
    - Slide Bottom : class="anima-slideB" +
    + Slide Bottom : class="ani-slideB-it"
  • -
    - Slide Left : class="anima-slideL" +
    + Slide Left : class="ani-slideL-it"
  • -
    - Slide Right : class="anima-slideR" +
    + Slide Right : class="ani-slideR-it"
  • -
    - Slide Top : class="anima-slideT" +
    + Slide Top : class="ani-slideT-it"
@@ -254,38 +300,38 @@

Rotate (hover to test)

  • -
    - Turn : class="anima-turn" +
    + Turn : class="ani-turn-it"
  • -
    - Turn X : class="anima-turnX" +
    + Turn X : class="ani-turnX-it"
  • -
    - Turn Y : class="anima-turnY" +
    + Turn Y : class="ani-turnY-it"
  • -
    - Turn XY : class="anima-turnXY" +
    + Turn XY : class="ani-turnXY-it"
  • -
    - Turn XZ : class="anima-turnXZ" +
    + Turn XZ : class="ani-turnXZ-it"
  • -
    - Turn YZ : class="anima-turnYZ" +
    + Turn YZ : class="ani-turnYZ-it"
  • -
    - Turn 3D : class="anima-turn3D" +
    + Turn 3D : class="ani-turn3D-it"
@@ -296,48 +342,48 @@

Scale (hover to test)

  • -
    - Bounce : class="anima-bounce" +
    + Bounce : class="ani-bounce-it"
  • -
    - Grow : class="anima-grow" +
    + Grow : class="ani-grow-it"
  • -
    - Shrink : class="anima-shrink" +
    + Shrink : class="ani-shrink-it"
  • -
    - Flip X : class="anima-flipX" +
    + Flip X : class="ani-flipX-it"
  • -
    - Flip Y : class="anima-flipY" +
    + Flip Y : class="ani-flipY-it"
  • -
    - Open X : class="anima-openX" +
    + Open X : class="ani-openX-it"
  • -
    - Open Y : class="anima-openY" +
    + Open Y : class="ani-openY-it"
  • -
    - Flipper X : class="anima-flipperX" +
    + Flipper X : class="ani-flipperX-it"
  • -
    - Flipper Y : class="anima-flipperY" +
    + Flipper Y : class="ani-flipperY-it"
@@ -348,23 +394,23 @@

Skew (hover to test)

  • -
    - Twist Bottom : class="anima-twistB" +
    + Twist Bottom : class="ani-twistB-it"
  • -
    - Twist Left : class="anima-twistL" +
    + Twist Left : class="ani-twistL-it"
  • -
    - Twist Right : class="anima-twistR" +
    + Twist Right : class="ani-twistR-it"
  • -
    - Twist Top : class="anima-twistT" +
    + Twist Top : class="ani-twistT-it"
@@ -374,23 +420,55 @@

Skew (hover to test)

Animation Options (need an Anima Name class to work)

+

+ All options can be concat with the name, like this : + class="ani-grow-lg-linear-loop-it" +

+

Animation Duration (hover to test)

  • -
    - Small : class="anima-sm" +
    + Small : class="ani-sm" +
    +
    • +
  • +
    + Medium : class="ani-md" +
    +
    • +
  • +
    + Large : class="ani-lg" +
    +
    • +
+
+ +
+

Animation Timing Function (hover to test)

+ +
    +
  • +
    + Linear : class="ani-linear" +
    +
    • +
  • +
    + Ease-in : class="ani-easin"
  • -
    - Medium : class="anima-md" +
    + Ease-out : class="ani-easout"
  • -
    - Large : class="anima-lg" +
    + Ease-in-out : class="ani-inout"
@@ -401,18 +479,18 @@

Animation Iteration Count (hover to test)

  • -
    - Few : class="anima-few" +
    + Few : class="ani-few"
  • -
    - Many : class="anima-many" +
    + Many : class="ani-many"
  • -
    - Loop : class="anima-loop" +
    + Loop : class="ani-loop"
@@ -423,13 +501,13 @@

Animation Delay (hover to test)

  • -
    - Minimum : class="anima-min" +
    + Minimum : class="ani-min"
  • -
    - Maximum : class="anima-max" +
    + Maximum : class="ani-max"
@@ -440,18 +518,18 @@

Animation Direction (hover to test)

  • -
    - Alternate : class="anima-alt" +
    + Alternate : class="ani-alte"
  • -
    - Reverse : class="anima-rev" +
    + Reverse : class="ani-reve"
  • -
    - Alternate Reverse : class="anima-altrev" +
    + Alternate Reverse : class="ani-altrev"
From 3843e5044f847360bd904ab5f3b027829169b444 Mon Sep 17 00:00:00 2001 From: Philippe Beck Date: Wed, 8 Mar 2023 17:53:09 +0400 Subject: [PATCH 7/8] Add infos for anima & states --- index.html | 40 +++++++++++++++++++++++++++++++++------- 1 file changed, 33 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index d841fc1..8f81c7a 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,9 @@