Animation

A collection of smooth animations to use within your page.

Fade
Scale Up
Scale Down
Slide Top
Slide Bottom
Slide Left
Slide Right
Slide Top Small
Slide Bottom Small
Slide Left Small
Slide Right Small
Slide Top Medium
Slide Bottom Medium
Slide Left Medium
Slide Right Medium
Shake

Faster modifier

Fade

Ken Burns

Wrap the animation stack with an Utility stack and choose overflow-hidden. You may also set a load target to the image, so images will load based on the viewport visiblity of that element. In this case the Heading above the images was given a class of demo, this class was then entered in the image's target option.
Default
Reverse

SVG Strokes

The Animation component can be used to animate SVG strokes. The effect looks like the SVG strokes are drawn before your eyes. Here's how to do it:
  • On the parent stack add the class uk-animation-toggle
  • On the SVG stack enable animation then enter uk-animation-stroke in the custom CSS field
  • Use uk-animation-reverse to revert the animation
SVG strokes animation can also be combined with the Parallax component, example here.
NoteHover the images on desktop or touch the images on mobile to trigger the animation.
missing image
missing image