# Animated Avatar
**URL:** https://meta.discourse.org/t/animated-avatar/220445
**Category:** Plugin
**Tags:** experimental
**Created:** [March 8, 2022, 6:24pm UTC](https://meta.discourse.org/t/animated-avatar/220445 "2022-03-08T18:24:58Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@featheredtoast](https://meta.discourse.org/u/featheredtoast)
#### Post date: [March 8, 2022, 6:24pm UTC](https://meta.discourse.org/t/animated-avatar/220445/1 "2022-03-08T18:24:58Z")
| | | |
| --- | --- | --- |
| ℹ | **Summary** | **Discourse Animated Avatars** adds the ability for users to upload animated gif/webp avatars which will animate on hover or selection in posts, user cards, and profile pages. |
| 🛠 | **Repository Link** | [https://github.com/discourse/discourse-animated-avatars](https://github.com/discourse/discourse-animated-avatars) |
| 📖 | **Install Guide** | [How to install plugins in Discourse](https://meta.discourse.org/t/install-plugins-in-discourse/19157) |
### Features
By default, this pauses animation when not focused. Within topics, animation will pause when post is not hovered or selected.
`animated_avatars_always_animate`: overrides the above pausing, forces avatars to always animate.
`animated_avatars_min_trust_level_to_display` restrict animating of avatars by trust level.
Respects prefers-reduced-motion in the browser’s accessibility options: Animations will be disabled entirely.
Animated gifs are auto converted to webp on upload, reducing overall file size. This can be set with `animated_gif_avatar_to_webp` (default true).
### Configuration
This plugin has an optional dependency on gifsicle. This is used to resize uploaded gif images to fit a square avatar, which helps to wrangle aspect ratios as well as normalize any differences between the static and animated images’ sizes for a smoother swap. The plugin will still function without it, but any non-square avatars may appear stretched when shown.
> ℹ gifsicle is not needed for `animated_gif_avatar_to_webp`. Animated gifs will be converted to webp with cropped square avatars.
To enable, you will add a call to the install script in your app.yml. A example of what the `after_code` hook will look like is the following:
```plaintext
hooks:
after_code:
- exec:
cd: $home/plugins
cmd:
- git clone https://github.com/discourse/discourse-animated-avatars.git
- exec:
cd: $home/plugins/discourse-animated-avatars
raise_on_fail: false
cmd:
- $home/plugins/discourse-animated-avatars/scripts/install.sh
```
### Settings
| Name | Description |
| --- | --- |
| animated avatars min trust level to display | Min trust level to display an animated avatar |
| animated avatars always animate | Always animate avatars |
| animated gif avatar to webp | auto converts animated gif avatars to webp on upload, reducing file size. (default: true) |
| animated gif avatar webp quality | the quality of the converted gif to webp. Recommended settings between 75% to 100% (default: 80%) |
### Technical
Additional CLI included to help with determining gif/webp avatar counts, and converting existing gif avatars to webp.
`bin/rake animated_avatars:count_animated` counts the total number of animated avatars, grouped by gif/webp
`bin/rake animated_avatars:gif_to_webp` converts existing animated gif avatars to webp. The new avatars are automatically applied, and existing gif avatars are removed by the `CleanUpUploads` job.
---
### Author:  [@carson](https://meta.discourse.org/u/carson)
#### Post date: [June 16, 2022, 1:00pm UTC](https://meta.discourse.org/t/animated-avatar/220445/2 "2022-06-16T13:00:16Z")
you’re awesome for this, is there a way for the animation to always play, regardless of focus?
---
### Author:  [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [November 18, 2022, 1:12pm UTC](https://meta.discourse.org/t/animated-avatar/220445/10 "2022-11-18T13:12:55Z")
Just one more doubt doing you a favor, how do I set the trust level of who to use the plugin?
---
### Author:  [@featheredtoast](https://meta.discourse.org/u/featheredtoast)
#### Post date: [December 10, 2022, 2:45am UTC](https://meta.discourse.org/t/animated-avatar/220445/11 "2022-12-10T02:45:53Z")
Limit by trust level hasn’t been implemented, but it’s good to know that it’s a desired feature. I’ll try to find some time to work on this part soon.
---
### Author:  [@featheredtoast](https://meta.discourse.org/u/featheredtoast)
#### Post date: [December 16, 2022, 11:36pm UTC](https://meta.discourse.org/t/animated-avatar/220445/12 "2022-12-16T23:36:14Z")
I just pushed up two site settings for the requested features:
`animated_avatars_always_animate`
and limiting animation by trust level: `animated_avatars_min_trust_level_to_display`
---
### Author:  [@piffy](https://meta.discourse.org/u/piffy)
#### Post date: [December 18, 2022, 1:41am UTC](https://meta.discourse.org/t/animated-avatar/220445/13 "2022-12-18T01:41:26Z")
Thank you for the always animate option. I had a couple users thirsty for the feature
---
### Author:  [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [January 12, 2023, 3:16am UTC](https://meta.discourse.org/t/animated-avatar/220445/14 "2023-01-12T03:16:38Z")
Thank you very much for releasing this option, I am very grateful and I am very happy for that, it is people like you who make the world better!
So I have a doubt, what is the default size of the GIF so it doesn’t get stretched? 50x50?
---
### Author:  [@featheredtoast](https://meta.discourse.org/u/featheredtoast)
#### Post date: [January 12, 2023, 3:36am UTC](https://meta.discourse.org/t/animated-avatar/220445/15 "2023-01-12T03:36:31Z")
Any square size between 50px and 200px should not get stretched. If you use the optional gifsicle dependency, this can resize uploaded gifs for you.
---
### Author:  [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [January 12, 2023, 3:36pm UTC](https://meta.discourse.org/t/animated-avatar/220445/16 "2023-01-12T15:36:59Z")
excuse my lack of knowledge, but what is gifsicle?
---
### Author:  [@featheredtoast](https://meta.discourse.org/u/featheredtoast)
#### Post date: [January 12, 2023, 6:13pm UTC](https://meta.discourse.org/t/animated-avatar/220445/17 "2023-01-12T18:13:35Z")
[gifsicle](https://www.lcdf.org/gifsicle/) is software for manipulating gif images.
It’s detailed [in the configuration section](https://meta.discourse.org/t/animated-avatar-plugin/220445#configuration-2).
---
### Author:  [@Crius](https://meta.discourse.org/u/Crius)
#### Post date: [March 15, 2023, 6:19pm UTC](https://meta.discourse.org/t/animated-avatar/220445/18 "2023-03-15T18:19:15Z")
Some users are reporting the avatar being returned as `.png` despite the media type being `gif`.
At this time I’m just trying to understand if it’s something that could be related to the plugin/discourse/nginx or user.
I’ve already a use case in which the issue was the user accessing their Windows machine via RDP but in a specific report I’m having a user with Windows 10 Version 22H2 OS Build 19045.2728 and Chrome 111.0.5563.65 (64bit) but this is what is being returned to the browser:
The 108\_2.png is an avatar.
If I check the same topic, I can see that I’m receiving the same image but with `.gif` extension and in fact it loads animated for me.
However, trying to reach the file directly shows me that two versions exists, both a `.png` version and a `.gif` version
`https://netgamers.it/user_avatar/netgamers.it/borzo/100/108_2.gif`
`https://netgamers.it/user_avatar/netgamers.it/borzo/100/108_2.png`
For some reason, that users is not receiving the `gif` version. but he’s matching all the settings I’ve set up for the plugin:
---
### Author:  [@featheredtoast](https://meta.discourse.org/u/featheredtoast)
#### Post date: [March 15, 2023, 10:56pm UTC](https://meta.discourse.org/t/animated-avatar/220445/19 "2023-03-15T22:56:09Z")
There are two static assets that get returned – png and gif. In “always animate” mode, the PNG is swapped on load of the post via a script for the gif version.
If the user is viewing with blocked JS, that may prevent the animation.
(I’m also able to see the animation from my end)
---
### Author:  [@Crius](https://meta.discourse.org/u/Crius)
#### Post date: [March 16, 2023, 3:33pm UTC](https://meta.discourse.org/t/animated-avatar/220445/20 "2023-03-16T15:33:57Z")
Good catch, I’ll ask him if he has any ads blocker or anything that could mess with the JS of the website.
---
### Author:  [@Wolftallemo](https://meta.discourse.org/u/Wolftallemo)
#### Post date: [July 22, 2023, 2:42am UTC](https://meta.discourse.org/t/animated-avatar/220445/21 "2023-07-22T02:42:49Z")
It seems that user pages are now broken with this installed, a quick look returns the following stack trace:
```plaintext
Uncaught TypeError: r.default.compute is not a function
n animated-bound-avatar.js:10
htmlHelper helpers.js:30
Ember 2
l manager.js:746
tag reference.js:136
track validator.js:668
animated-bound-avatar.js:10
```
Unfortunately I don’t know when this started happening.
---
### Author:  [@TReKiE](https://meta.discourse.org/u/TReKiE)
#### Post date: [July 22, 2023, 8:20pm UTC](https://meta.discourse.org/t/animated-avatar/220445/22 "2023-07-22T20:20:09Z")
I haven’t done any debugging on my own yet, but it would’ve had to break [between these two commits](https://github.com/discourse/discourse/compare/9e8010df8bfd66dcbb7339b8bf18b01b26c7350f...978d52841af23c0709bb646ba3ca91a5e6e7ce64), as I checked the Discourse diff before updating yesterday evening, and it wasn’t broken before that.
---
### Author:  [@Roi](https://meta.discourse.org/u/Roi)
#### Post date: [July 23, 2023, 7:27pm UTC](https://meta.discourse.org/t/animated-avatar/220445/23 "2023-07-23T19:27:21Z")
I am having problems with the Animated Avatar Plugin as well - since the last upgrade yesterday. If the plugin is activated the messages page (`/u/username/messages`) does not load anymore.
```plaintext
Failed to load resource: the server responded with a status of 429 (Too Many Requests)
animated-bound-avatar.js:10 Uncaught TypeError: r.default.compute is not a function
at animated-bound-avatar.js:10:1
at helpers.js:30:1
at index.js:4731:1
at Object.getValue (index.js:4734:1)
at manager.js:746:1
at reference.js:136:1
at e.track (validator.js:668:1)
at f (reference.js:135:1)
at Object.evaluate (runtime.js:3269:1)
at Object.evaluate (runtime.js:1052:1)
at It.evaluateSyscall (runtime.js:4263:1)
at It.evaluateInner (runtime.js:4234:1)
at It.evaluateOuter (runtime.js:4227:1)
at Wt.next (runtime.js:5058:1)
at Wt._execute (runtime.js:5045:1)
at Wt.execute (runtime.js:5038:1)
at zt.handleException (runtime.js:4372:1)
at Ut.handleException (runtime.js:4580:1)
at Ft.throw (runtime.js:4319:1)
at $e.evaluate (runtime.js:2091:1)
at Ft._execute (runtime.js:4306:1)
at Ft.execute (runtime.js:4291:1)
at Kt.rerender (runtime.js:4606:1)
at wr.render (index.js:6751:1)
at index.js:7013:1
at Mt (runtime.js:4139:1)
at Tr._renderRoots (index.js:6996:1)
at Tr._renderRootsTransaction (index.js:7039:1)
at Tr._revalidate (index.js:7072:1)
at p.invoke (queue.ts:201:14)
at p.flush (queue.ts:98:13)
at h.flush (deferred-action-queues.ts:75:19)
at $._end (index.ts:616:32)
at $.end (index.ts:298:10)
at $._run (index.ts:667:14)
at $.run (index.ts:339:17)
at d (index.js:109:1)
at u.success (ajax.js:105:1)
at l (jquery.js:3213:1)
at Object.fireWith [as resolveWith] (jquery.js:3343:1)
at E (jquery.js:9617:1)
at XMLHttpRequest. (jquery.js:9878:1)
```
---
### Author:  [@Roi](https://meta.discourse.org/u/Roi)
#### Post date: [July 30, 2023, 10:58am UTC](https://meta.discourse.org/t/animated-avatar/220445/24 "2023-07-30T10:58:03Z")
> [@Roi](#):
>
> I am having problems with the Animated Avatar Plugin as well
[FIX: Call boundAvatar() directly (#17) · discourse/discourse-animated-avatars@f8ff4a7 · GitHub](https://github.com/discourse/discourse-animated-avatars/commit/f8ff4a772a1c3df628711f34dda49d81f87db921) or 3.1.0.beta7 fixed it for me, thank you. 🙂
---
### Author:  [@REALITY](https://meta.discourse.org/u/REALITY)
#### Post date: [July 30, 2023, 5:10pm UTC](https://meta.discourse.org/t/animated-avatar/220445/25 "2023-07-30T17:10:02Z")
This doesn’t seem to be working in Brave or Opera, though it works in Firefox.
Brave and Opera both reporting a .png image and not changing to .gif.
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [September 27, 2023, 9:49pm UTC](https://meta.discourse.org/t/animated-avatar/220445/26 "2023-09-27T21:49:56Z")
Cross-linking a reported bug:
> [@The Missing Public Profiles Mystery \[Animated Avatars\]](https://meta.discourse.org/t/the-missing-public-profiles-mystery-animated-avatars/280352/7):
>
> Installing it on my test site, I’m seeing this error when trying to access a user page:
>
> 
>
> ```plaintext
> Uncaught TypeError: e is undefined
> getConnectors plugin-outlet.js:138
> _join index.ts:646
> join index.ts:362
> Ember 3
> l manager.js:746
> plugin-outlet.js:138
> getConnectors plugin-outlet.js:138
> _join index.ts:646
> join index.ts:362
> Ember 3
> l manager.js:746
> tag reference.js:131
> track validator.js:657
> d reference.js:130
> d runtime.js:1648
> tag reference.js:131
> track validator.js:657
> d reference.js:130
> Yt Ember
> tag reference.js:131
> track validator.js:657
> d reference.js:130
> Yt Ember
> tag reference.js:131
> track validator.js:657
> d reference.js:130
> createIteratorRef reference.js:306
> tag reference.js:131
> track validator.js:657
> d reference.js:130
> runtime.js:3437
> evaluate runtime.js:1052
> evaluateSyscall runtime.js:4258
> evaluateInner runtime.js:4229
> evaluateOuter runtime.js:4222
> next runtime.js:5053
> _execute runtime.js:5040
> execute runtime.js:5033
> sync runtime.js:5100
> Ember 2
> Nt runtime.js:4134
> Ember 3
> invoke queue.ts:201
> flush queue.ts:98
> flush deferred-action-queues.ts:75
> _end index.ts:616
> end index.ts:298
> _run index.ts:667
> _join index.ts:640
> join index.ts:362
> Ember 2
> _resizeObserver site-header.js:342
> (Async: ResizeObserverCallback)
> didInsertElement site-header.js:337
> r Ember
> didInsertElement plugin-api.js:1668
> Ember 6
> commit runtime.js:4019
> commit runtime.js:4116
> Nt runtime.js:4136
> Ember 3
> invoke queue.ts:201
> flush queue.ts:98
> flush deferred-action-queues.ts:75
> _end index.ts:616
> end index.ts:298
> _run index.ts:667
> _join index.ts:640
> join index.ts:362
> Ember 2
> _resizeObserver site-header.js:342
> (Async: ResizeObserverCallback)
> didInsertElement site-header.js:337
> r Ember
> didInsertElement plugin-api.js:1668
> Ember 6
> commit runtime.js:4019
> commit runtime.js:4116
> Nt runtime.js:4136
> Ember 3
> invoke queue.ts:201
> flush queue.ts:98
> flush deferred-action-queues.ts:75
> _end index.ts:616
> end index.ts:298
> _run index.ts:667
> _join index.ts:640
> join index.ts:362
> Ember 2
> _resizeObserver site-header.js:342
> (Async: ResizeObserverCallback)
> didInsertElement site-header.js:337
> r Ember
> didInsertElement plugin-api.js:1668
> r Ember
>
> ```
---
### Author:  [@Wolftallemo](https://meta.discourse.org/u/Wolftallemo)
#### Post date: [October 4, 2023, 2:46pm UTC](https://meta.discourse.org/t/animated-avatar/220445/27 "2023-10-04T14:46:06Z")
Profile pages are also entirely broken for me
```plaintext
Uncaught TypeError: Cannot destructure property 'hasBlock' of 'e' as it is undefined.
at b.getConnectors (plugin-outlet.js:87:19)
at B._join (index.ts:646:21)
at B.join (index.ts:362:17)
at p (index.js:156:1)
at index.js:257:1
at o.getValue (install-function-helper-manager.js:42:12)
at manager.js:746:1
at reference.js:131:1
at e.track (validator.js:657:1)
at d (reference.js:130:1)
at runtime.js:1648:1
at reference.js:131:1
at e.track (validator.js:657:1)
at d (reference.js:130:1)
at index.js:5579:1
at reference.js:131:1
at e.track (validator.js:657:1)
at d (reference.js:130:1)
at index.js:5579:1
at reference.js:131:1
at e.track (validator.js:657:1)
at d (reference.js:130:1)
at reference.js:306:1
at reference.js:131:1
at e.track (validator.js:657:1)
at d (reference.js:130:1)
at Object.evaluate (runtime.js:3437:1)
at Object.evaluate (runtime.js:1052:1)
at It.evaluateSyscall (runtime.js:4258:1)
at It.evaluateInner (runtime.js:4229:1)
at It.evaluateOuter (runtime.js:4222:1)
at Wt.next (runtime.js:5053:1)
at Wt._execute (runtime.js:5040:1)
at Wt.execute (runtime.js:5033:1)
at $t.handleException (runtime.js:4367:1)
at qt.handleException (runtime.js:4575:1)
at Dt.throw (runtime.js:4314:1)
at Be.evaluate (runtime.js:2088:1)
at Dt._execute (runtime.js:4301:1)
at Dt.execute (runtime.js:4286:1)
at Ht.rerender (runtime.js:4601:1)
at wr.render (index.js:6742:1)
at index.js:7004:1
at Mt (runtime.js:4134:1)
at Cr._renderRoots (index.js:6987:1)
at Cr._renderRootsTransaction (index.js:7030:1)
at Cr._revalidate (index.js:7063:1)
at p.invoke (queue.ts:201:14)
at p.flush (queue.ts:98:13)
at h.flush (deferred-action-queues.ts:75:19)
at B._end (index.ts:616:32)
at B.end (index.ts:298:10)
at B._run (index.ts:667:14)
at B.run (index.ts:339:17)
at d (index.js:108:1)
at t.success (ajax.js:115:7)
at l (jquery.js:3213:1)
at Object.fireWith [as resolveWith] (jquery.js:3343:1)
at x (jquery.js:9617:1)
at XMLHttpRequest. (jquery.js:9878:1)
```
[This might be a fix?](https://github.com/discourse/discourse-animated-avatars/pull/19)
[Next page](https://meta.discourse.org/t/animated-avatar/220445.md?page=2)