Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Wen Jie Lee
Wen Jie Lee
9,267 Points
Posted by Wen Jie Lee
Wen Jie Lee
9,267 Points

How to create an animate element for website design?

Can I know how to create a animate element by using what method ?

1 Answer

Roufa Therrien
Roufa Therrien
10,153 Points
Roufa Therrien
Roufa Therrien
10,153 Points

It depends on what you wish to animate, and how sophisticated you want your animation to be. Consider, as well, whether the animation will help drive your message home or whether it might instead be an annoying distraction for the viewer.

Examples of simple and common animations are to change the visual properties of a navigation link or button (e.g. change the background colour, or add a colourful border), when the viewer hovers or clicks on the link.

More complex animations might be to transform a line drawing - Treehouse has a course that covers this - Animating SVG with CSS (https://teamtreehouse.com/library/animating-svg-with-css).

Another dynamic effect you may wish to use is to have a sliding gallery - JavaScript will enable you to slide images.

These are only three of the different techniques you could use.