# Topic List Item Click Animation

**URL:** <https://meta.discourse.org/t/topic-list-item-click-animation/272181>\
**Category:** Theme component\
**Created:** [July 19, 2023, 8:04pm UTC](https://meta.discourse.org/t/topic-list-item-click-animation/272181 "2023-07-19T20:04:26Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [July 19, 2023, 8:04pm UTC](https://meta.discourse.org/t/topic-list-item-click-animation/272181/1 "2023-07-19T20:04:27Z")

</div>

| | | |
| --- | --- | --- |
| ℹ | **Summary** | Topic List Item Click Animation |
| 👓 | **Preview** | [Theme Creator](https://discourse.theme-creator.io/theme/Don/topic-list-item-click-animation) |
| 🛠 | **Repository** | [GitHub - VaperinaDEV/topic-list-item-click-animation: This theme component adds a nice animation when you hover or click the topic list item. · GitHub](https://github.com/VaperinaDEV/topic-list-item-click-animation) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

Install this theme component

This theme component adds a nice animation when you hover or click the topic list item.

 ![topic-list-item](https://global.discourse-cdn.com/meta/original/4X/e/a/a/eaa327259cb17b6cd03ded7a2b014a3cd526b5d0.png)

**Hello** 👋

> ⚠ **The component requires slider loader.**

This component makes the full row clickable and add a click animation to the topic list item. You can choose from some animation.

1. **push** (default on touch devices): when you click it, it pushes in and adds a background effect.

2. **background** (default on no-touch devices): when you click it, it adds a background…

3. **slider** : when you click it, it adds slider loader under the topic list item and hide the top main slider.  

4. **blur** : when you click it, it blurs out the other topics on the list.  

* * *

Theme Settings

You can select animations separately on no-touch and touch devices.

 ![Screenshot 2023-07-20 at 23.31.55](https://global.discourse-cdn.com/meta/original/4X/4/7/a/47a781e2a93e89cdd82611b2df00740f118aba24.png)

---

_[View the full topic](https://meta.discourse.org/t/topic-list-item-click-animation/272181)._