[UIkit] SVG Animation in update 3.22

Archetypon
1

In the latest update of UIkit the Animation and Parallax components can be used to animate SVG strokes. The effect looks like the SVG strokes are drawn before your eyes. Usage is very simple with great results, here are some examples:

Animation: https://uikitstacks.com/documentation/animation/#SVG-Strokes
Parallax: https://uikitstacks.com/documentation/parallax/#SVG-Strokes

That’s awesome or what?

Cheers,
Lucas

8 Likes
2

Very cool indeed !!

3

Hi, am not seeing the auto update, am still on 3.21. I am RW 8.3, Stacks 3.6.8)…?

4

@Piggles You have to download it again from your original order link in your email (it’s not only new stacks but also a new version of the theme).

5

Thanks…

6

Any way to make the animation work “on scroll” for mobile?

7

The second link only animates for me on mobile
The first link is very intermittent sometimes there is some animation with the crane

8

Use the Parallax in Foreground mode with the SVG component, there’s a ready to use example in the Tests project. That’s the same example published here: https://uikitstacks.com/documentation/parallax/#SVG-Strokes

9

The first example works on mouse hover on desktops, on mobiles you have to touch the image to trigged the animation.