Be Aware of Browser Issues When Adding Animations to Sites

Animated effects are a growing trend in website design. One coder recently found a neat effect on a website. It presented an image of a phone with a list on it. The edges or border of the phone screen brightened as the user scrolls up to it, stayed bright as the user scrolled through the list or text on what would be the screen, then faded as the user scrolled away. The person who shared this design with the community thought that it was one of the most fluid transitions that they had seen in a while. They were curious as to how the designer might have achieved this. The original poster also wanted to know if this animated effect worked for users in different environments and through different browsers and operating systems.

One person who uses Firefox noted that they did not see much of an animation. The person did not say which version of Firefox or operating system they use, nor did they add the environment in which they tested the site (mobile or desktop). These would be important factors to know.

Another person took a look at this site and offered tips on how a person can achieve a similar effect. An attribute for "prefers reduced motion" allows the user to slow the animated effect. People who have vestibular disorders can feel sick to their stomachs if they see motion on a screen, and the animated effect moves too quickly. The person noted that Apple already does this on their site. Within a browser, this preference can be turned on or off. In order to see the true speed of an Apple animation, the attribute has to be turned off at the browser level.

Several people wondered how the designer created this animation. Experienced designers replied with the fact that it is achieved through basic yet clever coding. The effect is created by combining translate and opacity with scroll attributes. In general, people on mobile devices had a more difficult experience with this animation. Designers need to keep this in mind and test things in mobile environments. For more information click here https://share.dishapp.io/92OT1wuSgFfMPRMxJpDd.