# Beautiful animations text and others for apps

**URL:** <https://community.glideapps.com/t/beautiful-animations-text-and-others-for-apps/39069>\
**Category:** Project Showcase\
**Created:** [February 28, 2022, 10:48am UTC](https://community.glideapps.com/t/beautiful-animations-text-and-others-for-apps/39069 "2022-02-28T10:48:32Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![resepsionis\_ganteng](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/resepsionis_ganteng/32/39081_2.png) [@resepsionis\_ganteng](https://community.glideapps.com/u/resepsionis_ganteng)\
**Post date:** [February 28, 2022, 10:48am UTC](https://community.glideapps.com/t/beautiful-animations-text-and-others-for-apps/39069/1 "2022-02-28T10:48:32Z")

</div>

animation completely using css, you can change the animation according to your wishes

> **[CSS Animation.mp4](https://drive.google.com/file/d/1nruMvSJcFFMTcOZ5HWiX_fVlpGWj13FB/view)**
>
> Google Drive file.

````auto
[data-test="app-search-bar"] {
    animation: slide-left 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
[data-test="app-signing-in"] {
    display: none;
}
[data-test="back-button"] {
    animation: slide-left 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
[data-test="nav-button-menu"] {
    animation: slide-right 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
[data-test="nav-button-Exit"] {
    animation: slide-right 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
[data-test="nav-button-Cancel"] {
    animation: slide-right 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
[aria-label="grid"] {
    animation: slide-left 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
[aria-label="flyout-menu"] {
    animation: slide-right 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
[data-test="app-simple-table"] {
    animation: slide-up 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
[data-test="app-summary"] {
    animation: slide-up 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;;
}
[data-test="app-markdown-view"] {
    animation: slide-up 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
[data-test="nav-button-Search"] {
    animation: slide-left 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
[data-test="app-text-box"]{
    animation: slide-down 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
[data-test="tile-item"]{
    animation: slide-down 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
[data-test="list-item"]{
    animation: slide-right 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
[data-test="app-switch-view"]{
    text-transform: capitalize;
    animation: slide-up 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
[data-test="app-button-view"]{
    text-transform: capitalize;
    animation: slide-up 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
[data-test="app-hint"]{
    animation: slide-up 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
[data-test="app-image-carousel"]{
    animation: slide-up 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
.floating-btn-style{
    animation: zoom-out 0.9s cubic-bezier(0.63, 0, 0.35, 1) both;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}} 
@keyframes zoom-out {
from {
opacity: 0;
transform : scale(0)
}
to {
opacity: 1;
transform : scale(1)
}} 

@keyframes slide-right {
from {
opacity: 0;
transform : translateX(-20px)
}
to {
opacity: 1;
transform : translateX(0px)
}} 

@keyframes slide-left {
from {
opacity: 0;
transform : translateX(20px)
}
to {
opacity: 1;
transform : translateX(0px)
}} 

@keyframes slide-down {
from {
opacity: 0;
transform : translateY(-20px)
}
to {
opacity: 1;
transform : translateY(0px)
}} 

@keyframes slide-up {
from {
opacity: 0;
transform : translateY(20px)
}
to {
opacity: 1;
transform : translateY(0px)
}}```
````

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [February 28, 2022, 1:22pm UTC](https://community.glideapps.com/t/beautiful-animations-text-and-others-for-apps/39069/3 "2022-02-28T13:22:19Z")

</div>

Impressive 👏🏼

---

<div class="post-metadata">

**Author:** ![resepsionis\_ganteng](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/resepsionis_ganteng/32/39081_2.png) [@resepsionis\_ganteng](https://community.glideapps.com/u/resepsionis_ganteng)\
**Post date:** [February 28, 2022, 1:31pm UTC](https://community.glideapps.com/t/beautiful-animations-text-and-others-for-apps/39069/4 "2022-02-28T13:31:11Z")

</div>

Thankyou 😅

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [February 28, 2022, 1:46pm UTC](https://community.glideapps.com/t/beautiful-animations-text-and-others-for-apps/39069/5 "2022-02-28T13:46:22Z")

</div>

Sweet! Thanks for sharing.

---

<div class="post-metadata">

**Author:** ![resepsionis\_ganteng](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/resepsionis_ganteng/32/39081_2.png) [@resepsionis\_ganteng](https://community.glideapps.com/u/resepsionis_ganteng)\
**Post date:** [February 28, 2022, 1:48pm UTC](https://community.glideapps.com/t/beautiful-animations-text-and-others-for-apps/39069/6 "2022-02-28T13:48:54Z")

</div>

I hope more people can make beautiful animations

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [March 3, 2022, 2:56am UTC](https://community.glideapps.com/t/beautiful-animations-text-and-others-for-apps/39069/7 "2022-03-03T02:56:27Z")

</div>

@resepsionis_ganteng

Intrigued…how might I be able to transform the scrolling “animation” with a fade out/in animation for a horizontally scrolling inline list?  
 ![CleanShot 2022-03-02 at 21.55.42](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/c/3c4a0bac3460f424f0a540865e7f06cf3dca36af.gif)

---

<div class="post-metadata">

**Author:** ![resepsionis\_ganteng](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/resepsionis_ganteng/32/39081_2.png) [@resepsionis\_ganteng](https://community.glideapps.com/u/resepsionis_ganteng)\
**Post date:** [March 3, 2022, 7:57am UTC](https://community.glideapps.com/t/beautiful-animations-text-and-others-for-apps/39069/8 "2022-03-03T07:57:26Z")

</div>

does the image move automatically?

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [March 3, 2022, 11:07am UTC](https://community.glideapps.com/t/beautiful-animations-text-and-others-for-apps/39069/9 "2022-03-03T11:07:14Z")

</div>

No, still a swipe, but instead of a horizontal scroll, I’d love for the cards to “cut” or ideal “fade” to the next card in the inline list.

I scoured the CSS and I don’t think it’s possible, but you seem to have a knack for CSS animations and thought I’d see if you’d be able to find something.

---

<div class="post-metadata">

**Author:** ![resepsionis\_ganteng](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/resepsionis_ganteng/32/39081_2.png) [@resepsionis\_ganteng](https://community.glideapps.com/u/resepsionis_ganteng)\
**Post date:** [March 3, 2022, 1:11pm UTC](https://community.glideapps.com/t/beautiful-animations-text-and-others-for-apps/39069/10 "2022-03-03T13:11:38Z")

</div>

interesting, I’ll give it a try 😃

---

<div class="post-metadata">

**Author:** ![JuanM](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/juanm/32/33666_2.png) [@JuanM](https://community.glideapps.com/u/JuanM)\
**Post date:** [March 3, 2022, 3:18pm UTC](https://community.glideapps.com/t/beautiful-animations-text-and-others-for-apps/39069/11 "2022-03-03T15:18:22Z")

</div>

wow perfect, thanks and congrats

---

<div class="post-metadata">

**Author:** ![resepsionis\_ganteng](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/resepsionis_ganteng/32/39081_2.png) [@resepsionis\_ganteng](https://community.glideapps.com/u/resepsionis_ganteng)\
**Post date:** [March 9, 2022, 3:54am UTC](https://community.glideapps.com/t/beautiful-animations-text-and-others-for-apps/39069/12 "2022-03-09T03:54:40Z")

</div>

Sorry I’m late, it seems that it’s not possible to add animation when scrolling or someone else can do it