diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-03-06 21:58:38 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-03-06 21:58:38 +0100 |
| commit | c0a15ffdb798b7c9567827095cf1154614ca6fc4 (patch) | |
| tree | 42aa8c6eef3ef81ff9ebc481ca18375fb05e5599 /src/components/Branding/Branding.module.scss | |
| parent | 7f58c9217cdd9fe1ef3f301f2dc9c895382d763f (diff) | |
fix(animations): avoid zomm in/out effect on mobile
Due to translateX transform and overflow, on small screens a zoom in /
zoom out effect happened. So I adjust the animations for branding and
job.
Diffstat (limited to 'src/components/Branding/Branding.module.scss')
| -rw-r--r-- | src/components/Branding/Branding.module.scss | 6 |
1 files changed, 4 insertions, 2 deletions
diff --git a/src/components/Branding/Branding.module.scss b/src/components/Branding/Branding.module.scss index ed2cc16..b6e1aa1 100644 --- a/src/components/Branding/Branding.module.scss +++ b/src/components/Branding/Branding.module.scss @@ -91,6 +91,7 @@ font-weight: 500; letter-spacing: 0.01ex; position: relative; + overflow: hidden; &::after { content: "|"; @@ -104,7 +105,7 @@ color: var(--color-primary-darker); font-weight: 400; visibility: hidden; - transform: scaleX(0) translateX(100%); + transform: translateX(100%); transform-origin: right; animation: var(--branding-name-animation); } @@ -122,6 +123,7 @@ font-size: var(--font-size-lg); font-weight: 500; position: relative; + overflow: hidden; &::after { content: "|"; @@ -135,7 +137,7 @@ color: var(--color-primary-darker); font-weight: 400; visibility: hidden; - transform: scaleX(0) translateX(100%); + transform: translateX(100%); transform-origin: right; animation: var(--branding-job-animation); } |