# CSS gallery

**URL:** <https://community.glideapps.com/t/css-gallery/23632>\
**Category:** Project Showcase\
**Created:** [March 2, 2021, 4:47am UTC](https://community.glideapps.com/t/css-gallery/23632 "2021-03-02T04:47:13Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [March 2, 2021, 4:47am UTC](https://community.glideapps.com/t/css-gallery/23632/1 "2021-03-02T04:47:13Z")

</div>

CSS gallery 2021/03/02  
There is no need to split the original image into parts.

> **[css-animation](https://css-animation.glideapp.io/)**

---

<div class="post-metadata">

**Author:** ![Pablo\_books](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablo_books/32/2110_2.png) [@Pablo\_books](https://community.glideapps.com/u/Pablo_books)\
**Post date:** [March 2, 2021, 4:57am UTC](https://community.glideapps.com/t/css-gallery/23632/2 "2021-03-02T04:57:07Z")

</div>

You are truly amazing.

![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/d/cda317a8388397c6055475a9c0b487e4cf4941c6.gif)

---

<div class="post-metadata">

**Author:** ![mrnmkmn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mrnmkmn/32/21743_2.png) [@mrnmkmn](https://community.glideapps.com/u/mrnmkmn)\
**Post date:** [March 2, 2021, 5:55am UTC](https://community.glideapps.com/t/css-gallery/23632/3 "2021-03-02T05:55:15Z")

</div>

Hi fujita,

That’s cool! Are you implementing this in webview?

---

<div class="post-metadata">

**Author:** ![Pratik\_Shah](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pratik_shah/32/12416_2.png) [@Pratik\_Shah](https://community.glideapps.com/u/Pratik_Shah)\
**Post date:** [March 2, 2021, 6:18am UTC](https://community.glideapps.com/t/css-gallery/23632/4 "2021-03-02T06:18:19Z")

</div>

That’s amazing

---

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [March 2, 2021, 6:20am UTC](https://community.glideapps.com/t/css-gallery/23632/5 "2021-03-02T06:20:18Z")

</div>

Thank you [@mrnmkmn](https://community.glideapps.com/u/mrnmkmn)

This is not an external web page.  
★ This animation is designed with CSS.  
★ The html and css code is written in the rich text component in glide-app.

---

<div class="post-metadata">

**Author:** ![mrnmkmn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mrnmkmn/32/21743_2.png) [@mrnmkmn](https://community.glideapps.com/u/mrnmkmn)\
**Post date:** [March 2, 2021, 6:58am UTC](https://community.glideapps.com/t/css-gallery/23632/6 "2021-03-02T06:58:03Z")

</div>

Thank you for your reply. It’s great.

I’ve used inline CSS with rich text before, but I was surprised that this was possible. I’m sure we can do many more animations.

Thanks:)

---

<div class="post-metadata">

**Author:** ![Carlos\_DeSilva](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/carlos_desilva/32/19965_2.png) [@Carlos\_DeSilva](https://community.glideapps.com/u/Carlos_DeSilva)\
**Post date:** [March 2, 2021, 4:24pm UTC](https://community.glideapps.com/t/css-gallery/23632/7 "2021-03-02T16:24:56Z")

</div>

Dude!

![the-pursuit-of-happiness-will-smith](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/2/a20ea51162357961b1896ea7e87fe0a25d0c19df.gif)

Amazing work.

---

<div class="post-metadata">

**Author:** ![AymenM](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/aymenm/32/21370_2.png) [@AymenM](https://community.glideapps.com/u/AymenM)\
**Post date:** [March 2, 2021, 4:49pm UTC](https://community.glideapps.com/t/css-gallery/23632/8 "2021-03-02T16:49:20Z")

</div>

Hey !

That looks great! Quick question, do you think it’s possible to have an animation as soon as the user logs in for the first time _without_ having to click on a button except the login button ? That’ll be great

---

<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:** [March 2, 2021, 9:04pm UTC](https://community.glideapps.com/t/css-gallery/23632/9 "2021-03-02T21:04:37Z")

</div>

How did you do to when I click in **Things** tab, it sets directly to the code if we can’t put actions in tabs? 🤔

---

<div class="post-metadata">

**Author:** ![mrt224](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mrt224/32/490_2.png) [@mrt224](https://community.glideapps.com/u/mrt224)\
**Post date:** [March 2, 2021, 9:32pm UTC](https://community.glideapps.com/t/css-gallery/23632/10 "2021-03-02T21:32:08Z")

</div>

Did you publish the code?

---

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [March 3, 2021, 12:43am UTC](https://community.glideapps.com/t/css-gallery/23632/11 "2021-03-03T00:43:14Z")

</div>

Thank you @Carlos_DeSilva

@AymenM @Lucas_Pires  
There is no need to trigger the start of animation.  
The animation starts to move on the screen display itself.  
In other words, on Glide, if you put the code on the screen that is displayed first, the animation will start automatically as soon as the application opens.  
You can also use it as a trigger by setting Visibility with checkboxes, buttons, or custom actions.

@mrt224  
The current code is very complex and cluttered. It may be cleaned and published after a little more verification.

---

<div class="post-metadata">

**Author:** ![MonsterGo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/monstergo/32/18780_2.png) [@MonsterGo](https://community.glideapps.com/u/MonsterGo)\
**Post date:** [March 14, 2021, 1:24pm UTC](https://community.glideapps.com/t/css-gallery/23632/12 "2021-03-14T13:24:02Z")

</div>

Did you mind to share the CSS code ?

---

<div class="post-metadata">

**Author:** ![PabloMFalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablomfalero/32/31166_2.png) [@PabloMFalero](https://community.glideapps.com/u/PabloMFalero)\
**Post date:** [March 14, 2021, 1:51pm UTC](https://community.glideapps.com/t/css-gallery/23632/13 "2021-03-14T13:51:06Z")

</div>

[https://ritual.glideapp.io/](https://ritual.glideapp.io/) by @Lucas_Pires . A lot of cool stuff

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [March 14, 2021, 3:10pm UTC](https://community.glideapps.com/t/css-gallery/23632/14 "2021-03-14T15:10:33Z")

</div>

> [@A floating and swaying CSS animation](https://community.glideapps.com/t/a-floating-and-swaying-css-animation/24092/5):
>
> You know…view source or inspect would reveal the CSS pretty quickly if you really wanted it.

---

<div class="post-metadata">

**Author:** ![DareSteps](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/daresteps/32/11716_2.png) [@DareSteps](https://community.glideapps.com/u/DareSteps)\
**Post date:** [July 11, 2021, 9:35am UTC](https://community.glideapps.com/t/css-gallery/23632/15 "2021-07-11T09:35:30Z")

</div>

Wow! Is it possible to share the CSS code?

---

<div class="post-metadata">

**Author:** ![Wiz.Wazeer](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wiz.wazeer/32/72423_2.png) [@Wiz.Wazeer](https://community.glideapps.com/u/Wiz.Wazeer)\
**Post date:** [October 25, 2021, 2:24am UTC](https://community.glideapps.com/t/css-gallery/23632/16 "2021-10-25T02:24:39Z")

</div>

More animation

> **[wizwazeer.com](https://wizwazeerapp.glideapp.io/)**
>
> WizWazeer mobile app

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [October 25, 2021, 8:54am UTC](https://community.glideapps.com/t/css-gallery/23632/17 "2021-10-25T08:54:52Z")

</div>

nice website @Wiz.Wazeer , but scrolling and transitions are way too fast… making it impossible to read content… check your settings.  
Did you make this web from scratch or use a third-party service? even if the speed is annoying and confusing, I’m very impressed.

---

<div class="post-metadata">

**Author:** ![Wiz.Wazeer](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wiz.wazeer/32/72423_2.png) [@Wiz.Wazeer](https://community.glideapps.com/u/Wiz.Wazeer)\
**Post date:** [October 25, 2021, 11:33am UTC](https://community.glideapps.com/t/css-gallery/23632/18 "2021-10-25T11:33:14Z")

</div>

Thank you @Uzo. will check transition settings. Mixture of both. But, guys it wasn’t meant to be a presentation of my site animations. Site is quite old now. It was meant to be a showcase of crescent moon css animation. I got the animation just about right but still trying to perfect the moon 🤣.

---

<div class="post-metadata">

**Author:** ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)\
**Post date:** [October 30, 2021, 11:40am UTC](https://community.glideapps.com/t/css-gallery/23632/19 "2021-10-30T11:40:36Z")

</div>

Hi, Wiz 🙂 I did not understand how it works at 1st 😁 (several trials) as I didn’t see the tab icons with my default browser menu on. I could not go further than the “Moon” screen.  
I find a bit strange the floating to lead to your website, not sure that’s what people expects: I thought it was to enter, not go elsewhere.

Are the opening/sliding cards gifs or CSS?

I’d like to know how you slide your card to the left. I’m trying to slide a door with a similar animation without gif.

It’s strange for me to click on the green text to enter, while seeing the button that is pressed and nothing happens when you target that big button.

Anyway, the web site looks so cool and refreshing. Wow. Eye candy 🍭

---

<div class="post-metadata">

**Author:** ![Wiz.Wazeer](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wiz.wazeer/32/72423_2.png) [@Wiz.Wazeer](https://community.glideapps.com/u/Wiz.Wazeer)\
**Post date:** [October 30, 2021, 12:34pm UTC](https://community.glideapps.com/t/css-gallery/23632/20 "2021-10-30T12:34:37Z")

</div>

Thank you. I’m not using any giff; All pure html/css animation. I have 3 different animations. I replaced moon with UFO experience. The floating ship adopts the colour of its background depending on which colour it settles on (except one, which was designed to serve as a clue to another colour on the app, leading to a different world). You can get your Animations to work in Glide, but you have to be careful about (and be ready compromise on) expectations. Thank you.

[Next page](https://community.glideapps.com/t/css-gallery/23632.md?page=2)
