Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature(motion): Storybook variable documentation #966

Merged
merged 24 commits into from
Jan 17, 2025
Merged

feature(motion): Storybook variable documentation #966

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
b1290b2
feat(motion): add slide in/out animations and update motion parameters
ckrook Jan 15, 2025
1881f02
test: saving screenshots of failing tests
Lunkan89 Jan 15, 2025
ca062cb
test: corrected output directory
Lunkan89 Jan 15, 2025
37364c5
test: fix output directory path
Lunkan89 Jan 15, 2025
46e310a
test: using artifacts upload v4
Lunkan89 Jan 15, 2025
25445d1
test: reverting to older ubuntu version
Lunkan89 Jan 15, 2025
b622124
test: lowering artifacts retention days
Lunkan89 Jan 15, 2025
64522bd
feat(motion): enhance animation classes and improve visibility handli…
ckrook Jan 15, 2025
481fc5d
feat(motion): update animation styles and add new transition stories
ckrook Jan 16, 2025
e29adac
fix: update Figma design links in motion stories
ckrook Jan 16, 2025
c63c481
feat(motion): add slide in/out animations and update motion parameters
ckrook Jan 15, 2025
250dc2c
feat(motion): enhance animation classes and improve visibility handli…
ckrook Jan 15, 2025
b0fc473
feat(motion): update animation styles and add new transition stories
ckrook Jan 16, 2025
35426a9
fix: update Figma design links in motion stories
ckrook Jan 16, 2025
4e53a19
Merge branch 'feature/storybook-animation-page' of https://github.com…
ckrook Jan 16, 2025
74ff402
feat(motion): add usage instructions for animation properties in tran…
ckrook Jan 16, 2025
532b311
feat(motion): add usage instructions for animation variables in anima…
ckrook Jan 16, 2025
27ba2a6
feat(motion): refine animation stories and update motion variables in…
ckrook Jan 16, 2025
04d2ec3
Merge branch 'develop' into feature/storybook-animation-page
ckrook Jan 17, 2025
4c0a566
feat(motion): update animation variables and improve storybook examples
ckrook Jan 17, 2025
0aea599
chore(docs): restore docs files
ckrook Jan 17, 2025
5027d52
chore(test): remove darwin snapshots
ckrook Jan 17, 2025
7ed70f3
feat(motion): refactor collapse animations to use transform scaling i…
ckrook Jan 17, 2025
8b8fbe0
Merge branch 'feature/storybook-animation-page' of https://github.com…
ckrook Jan 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
136 changes: 55 additions & 81 deletions motion/_animation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@

100% {
opacity: 1;
visibility: visible;
}
}

Expand All @@ -20,23 +21,12 @@

100% {
opacity: 0;
visibility: hidden;
}
}

/* Scale */
@keyframes tds-zoom-in {
0% {
opacity: 1;
transform: scale(0.9);
}

100% {
opacity: 1;
transform: scale(1);
}
}

@keyframes tds-zoom-in-hidden {
0% {
transform: scale(0.9);
}
Expand All @@ -59,72 +49,60 @@
/* Slide */
@keyframes tds-slide-in-top {
0% {
opacity: 1;
transform: translateY(-100%);
}

100% {
opacity: 1;
transform: translateY(0);
}
}

@keyframes tds-slide-in-bottom {
0% {
opacity: 1;
transform: translateY(100%);
}

100% {
opacity: 1;
transform: translateY(0);
}
}

@keyframes tds-slide-in-left {
0% {
opacity: 1;
transform: translateX(-100%);
}

100% {
opacity: 1;
transform: translateX(0);
}
}

@keyframes tds-slide-in-right {
0% {
opacity: 1;
transform: translateX(100%);
}

100% {
opacity: 1;
transform: translateX(0);
}
}

@keyframes tds-slide-out-top {
0% {
opacity: 1;
transform: translateY(0);
}

100% {
opacity: 1;
transform: translateY(-100%);
}
}

@keyframes tds-slide-out-bottom {
0% {
opacity: 1;
transform: translateY(0);
}

100% {
opacity: 1;
transform: translateY(100%);
}
}
Expand All @@ -141,85 +119,103 @@

@keyframes tds-slide-out-left {
0% {
opacity: 1;
transform: translateX(0);
}

100% {
opacity: 1;
transform: translateX(-100%);
}
}

@keyframes tds-slide-out-right {
0% {
opacity: 1;
transform: translateX(0);
}

100% {
opacity: 1;
transform: translateX(100%);
}
}

/* Slide short */
@keyframes tds-slide-top-short {
0% {
opacity: 1;
transform: translateY(-16px);
}

100% {
opacity: 1;
transform: translateY(0);
}
}

@keyframes tds-slide-bottom-short {
0% {
opacity: 1;
transform: translateY(16px);
}

100% {
opacity: 1;
transform: translateY(0);
}
}

@keyframes tds-slide-bottom-short-hidden {
@keyframes tds-slide-left-short {
0% {
transform: translateY(16px);
transform: translateX(-16px);
}

100% {
transform: translateY(0);
transform: translateX(0);
}
}

@keyframes tds-slide-left-short {
@keyframes tds-slide-right-short {
0% {
opacity: 1;
transform: translateX(-16px);
transform: translateX(16px);
}

100% {
opacity: 1;
transform: translateX(0);
}
}

@keyframes tds-slide-right-short {
@keyframes tds-slide-out-top-short {
0% {
opacity: 1;
transform: translateX(16px);
transform: translateY(0);
}

100% {
opacity: 1;
transform: translateY(-16px);
}
}

@keyframes tds-slide-out-bottom-short {
0% {
transform: translateY(0);
}

100% {
transform: translateY(16px);
}
}

@keyframes tds-slide-out-left-short {
0% {
transform: translateX(0);
}

100% {
transform: translateX(-16px);
}
}

@keyframes tds-slide-out-right-short {
0% {
transform: translateX(0);
}

100% {
transform: translateX(16px);
}
}

/* Rotate */
Expand Down Expand Up @@ -346,74 +342,60 @@

@keyframes tds-collapse-in {
from {
opacity: 1;
height: 0%;

//overflow: hidden;
transform-origin: top;
transform: scaleY(0);
}

to {
opacity: 1;
height: 100%;

//overflow: hidden;
transform-origin: top;
transform: scaleY(1);
}
}

@keyframes tds-collapse-in-hidden {
from {
height: 0%;

//overflow: hidden;
transform-origin: top;
transform: scaleY(0);
}

to {
height: 100%;

//overflow: hidden;
transform-origin: top;
transform: scaleY(1);
}
}

@keyframes tds-collapse-out {
0% {
height: 100%;

//overflow: hidden;
transform: scaleY(1);
transform-origin: top;
}

100% {
height: 0;

//overflow: hidden;
transform: scaleY(0);
transform-origin: top;
}
}

@keyframes tds-collapse-width-in {
0% {
width: 0;
overflow: hidden;
transform: scaleX(0);
}

to {
width: 100%;
overflow: hidden;
transform: scaleX(1);
}
}

@keyframes tds-collapse-width-out {
0% {
width: 100%;
overflow: hidden;
transform: scaleX(1);
}

to {
width: 0;
overflow: hidden;
transform: scaleX(0);
}
}

///

@supports not (
((height: 1lh) and (animation-timeline: none)) or ((height: 1lh) and (margin-trim: none))
) {
Expand Down Expand Up @@ -496,11 +478,3 @@
stroke-dasharray: 2230px;
}
}

.star1 {
animation: animate-svg-stroke-1 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both;
fill: #fff;
stroke: #000;
stroke-width: 20;
stroke-miterlimit: 10;
}
Loading