Skip to content
BXM Multimedia: home

Websites

Flash on page: how to replace the effect with modern, peaceful animation

The former Flash effect can be viewed as an inspiration for a new interaction. It is worth keeping its goal, and the way of doing it can be adapted to modern devices and needs of customers.

The former Flash effect can be viewed as an inspiration for a new interaction. It is worth keeping its goal, and the way of doing it can be adapted to modern devices and needs of customers.

Determine what the effect was for

Did the animation represent the product, indicated the next step, or was it just a decoration? Depending on this answer the range of playback. Not every rotating icon has to return to the new project. Keep items that help you recognize the brand or understand the site's operation.

Flash is not a technology to be proposed to the new website today. The context of the withdrawal and preparation of archival materials describes a guide about moving the old Flash page.

Design your condition before and after movement

Before an animation is created, check the static layout. The header, description and button should be readable without waiting for the sequence to finish. The movement may highlight the change, but it should not be the only carrier of relevant information.

Example: after selecting the category, a delicate change of color confirms the action and the right set of products appears immediately. A long journey of elements through the screen delays the performance of a simple task and draws attention from the result.

Include animation limit

Browsers make limited traffic preference available by preferred-reduced-motionIt allows you to adjust the effects to the user's settings; the mode of operation explains MDN documentation.

In a quiet version, leave the full content and the buttons running. Give up large shifts if not needed, and check that turning off the effect does not leave the element invisible. This should be a separate pickup scenario.

Evaluate animation along with the site

Test it when scrolling, using keyboard and on the phone. Check if it does not block the text and change the height of the module while reading. In one view, select a clear point of attention instead of running all the decorations at once. You will read in about planning the longer sequence in an animation script guide.

BxM · From reading to action

Do you have any ideas for a change?

Tell us what you want to improve on your website. Together we will determine which changes should be planned first.