Svija Vibe lets you take any element or group of elements on the page and give life to it — from a single rectangle to an entire page section.
Animations can be triggered by user interactions, scrolling or timing, and you can attach multiple triggers to multiple events.
Svija Vibe is trivially simple to use.
Here's an example. We'll start with two rectangles in Illustrator: TRIGGER and EVENT (at right). We create an animation simply by naming the objects in the Layers panel:
TRIGGER / EVENT
click here - no, up here!
Triggers and events are connected by their name.
mouse/someName is a mouse-based trigger with name someName
click/someName/35> is an event with name someName that will be rotated 35° clockwise when the user clicks the trigger.
Once you've read this section, you can probably guess the the events above — click here to see if you're right!
Every animation is as simple as this example. But, you can create very elaborate effects by combining animations and by animating grouped objects at different levels of the hierarchy.
Scroll triggers allow you to connect animations to the movement of the page.
They're popular right now, and they're extremely easy to create with Svija Vibe:
• when the page is scrolled to a given point
• when a given part of the page is visible
• locked to the scroll position of the page
A GIVEN POINT
LOCKED TO SCROLLING
A VISIBLE ZONE
Scroll canceling enables you to animate objects that don't scroll with the page.
The event is locked to page scrolling, but a vertical offset cancels the actual scrolling.
We call it a scrub event. You can combine scrub events with different parts of your illustration to create amazing effects.
As you can see, it's a lot of fun — and we've only scratched the surface!
(Apart from preparing the images, this animation took about 15 minutes to create.)
It's nice that animating your web content has been made so easy, but there are bigger implications.
Right now, it's common to see sites that feature a few central animations in an overall design that's pretty uninteresting.
With Svija Vibe, it is so easy to add effects that you can bring life to even the smallest details of your site.
And you can still do that other thing.