Improve the listening experience by activating access to the Echonest API in AmpJuke! The feature will ‘identify’ the song you are playing – analyse the tempo/bpm, danceability, and loudness levels among other things. Read more.


What is visual effects about ?

What it is:

You can enable an "animation" (or transition effect) when displaying images of albums and performers/artists.

Each time a page is loaded that consist of images representing albums or performers/artists, the transition effect will happen for all images.



How it works:

If enabled, the setting is active for all users, when displaying albums and performers/artists, - depending on a given user has "Display images..." tuned on in his/her personal settings.

How the animation is displayed is controlled by three settings found on the "Configuration" page (located under "Admin's options" on the "Welcome" page).



How it's configured:

Configuration of visual effects in AmpJuke is controlled by three settings.

A user with administrator access can access the "Confiruation" page and click on the "Visual effects" section in order to control/configure visual effects.


Enable visual effects for album and performer images: If activated (checked) animations (visual effects) will happen every time images of albums and/or performers is displayed.

If unchecked, no animation will happen. This is similar to the "old" way of displaying images in AmpJuke.


Timing of delay: Controls the delay (in milliseconds) before starting to do any animation. The setting is a "per image" setting - not overall for all images.

Note that it is possible to use simple math with a variable - "i" - involved.

The default setting is i*50, - where i is equal to the current number  of any image about to be displayed.

This means that for the first image on the page the delay will be 1*50 milliseconds (50ms), for the second image the delay will be 2*50 milliseconds (100ms), for the third 3*50 milliseconds (150ms) and so on.


Timing of opacity: Controls how long time (in milliseconds) it takes for an image to go from "invisible" (completely transparent) to "visible" (no transparency). The setting is a "per image" setting - not overall for all images.

Just like the previous setting, simple math can be involved using a variable "i".

The default setting is 100+(i*50), - where i (again) is equal to the current number of any image about to go from "invisible" to "visible".

This means that for the first image on the page the transition time from "invisible" to "visible" will be 100+(1*50) milliseconds (150ms), for the second image the transition time will be 100+(2*50) milliseconds (200ms), the third image will "transform" 100+(3*50) milliseconds (250ms), for the fourth it will be 100+(4*50) milliseconds (300ms) and so on.



Configuration examples:

It's certainly easy to experiment with these settings to get the "right" type of visual effects for your AmpJuke box!

Just for inspiration/reference a few configuration examples and a description of their effects follows:


"Waterfall effect" (the default)

Timing of delay: i*50, Timing of opacity: 100+(i*50). Result: Images will be displayed with a longer and longer duration of the animation (and a longer delay before the animation happens!), thereby enabling a "waterfall" effect, where the images "flows" from invisible to visible on a per-image basis.


"All at once":

Timing of delay: 10, Timing of opacity: 1000. Result: Images will be displayed after a delay of 10ms. All images will take one second (1000ms) to go from invisible to visible. The transition will happen with the same timing for all images.


"Bottom right -> top left, slow":

Timing of delay: 100, Timing of opacity: 5000-(100*i). Result: Images will be animated similar to the "waterfall effect" described above. However, the first image that will be fully visible will the the one located most to the right/bottom and the last will be the one located most to the left/top.


Feel free to experiment!!


Note: To take full advantage of the animations/visual effects, users should turn on "Display small images..." in their personal settings (see


Finally, a screenshot showing a "suspended animation" of the "waterfall effect" mentioned above: