Updated

Animation — Svija Vibe makes animation simple

Svija Vibe, introduced in September 2022, makes animating your web content easy and fun. It is based on GSAP JavaScript animation.

It’s so new we haven’t had time to build a lot with it, but check out svija.love/vibe for a glimpse of Vibe’s potential.

This page is enough for you to get started; more comprehensive documentation will be added in the coming weeks.


Triggers and Events

Svija Vibe is based on pairs of objects in Illustrator: Triggers and Events.

Trigger: something that causes an animation to begin

Event: the animation that begins

The two objects are linked by having the same name.


An Example

Try this on one of your pages — draw two rectangles in Illustrator:

Create a simple animation just by naming the objects like this:

Triggers and events are connected by a name — “someName” in this example.

  • mouse/someName is a mouse-based trigger with name someName
  • click/someName/%150 means that when the user clicks the (transparent) trigger someName, the event object will be scaled to 150%.

It is that simple.

When you reload the page and click the trigger object, the event object will be scaled.

Remember that triggers are transparent, so you won’t see the pink box when you load the page.

The Rest is Details

Every animation really is that simple. But, you can create very elaborate effects by combining animations and by animating grouped objects at different levels of the hierarchy.

Types of Movement & Transformations

Add these flags to the name of any event object (# means any number):

flagmeaningdefaultdescriptionexample
#duration0.5duration of animationclick/name/4
d#delay0delay at beginning of timelineclick/name/d4
-x# +x#move0move on x-axisclick/name/+x20
-y# +y#move0move on y-axisclick/name/-y20
t#transparencyn/a% transparentclick/name/t50
%#scale100scale to given percentclick/name/%150
x%#scale100scale horizontally by given percentclick/name/x%150
y%#scale100scale vertically by given percentclick/name/y%150
<#rotate0rotate counter-clockwiseclick/name/<30
#>rotate0rotate clockwiseclick/name/30>
o#,#origin50,50center of rotationclick/name/<90/o0,100
hard
soft
softin
softout
transitionsoftgradual or abrupt start & stopclick/name/+x20/hard

You can combine flags: click/name/30>/%150/+x200 will cause an object to rotate, scale and move all at once.

You can also use multiple trigger objects and/or multiple event objects with the same name to link different objects on the page.


Types of Mouse-based Events

These are the various types of mouse actions that you can use to launch an animation.

Give these names to event objects to create the desired effect:

event typemouse does…example
overpasses over triggerover/name/%150
awaymoves away from triggeraway/name/%150
ovawaymoves over then away — doubleovaway/name/%150
presspresses down on trigger (before releasing)press/name/%150
clickclicks on trigger (at release)click/name/%150
downpress & release — doubledown/name/%150
toggleclick & click — doubletoggle/name/%150

Double animations reverse and play backwards when done.


Other Types of Triggers

In addition to mouse-based animations, there are time-based and scroll-based animations.

The possible triggers are:

mouseset off mouse-based eventsmouse/name
timeset off time-based eventstime/name
scrollset off scroll-based eventsscroll/name

You create the trigger object simply by giving it the appropriate name.


Time-Based Animation

There is one type of time-based animation:

objectlabeldescriptionexample
triggertimesets off a time-based eventtime/name
eventdelaystarts after a given delaydelay/name/%200

Important: the “time” of the time trigger is attached to the trigger, not the event:

time/name1/2 (represents two seconds)

You can combine a delay in the event with a time trigger: delay/name/%200/d2 will add an additional delay of 2 seconds to the delay specified in the trigger.


Scroll-Based Animation

Triggers for scroll-based animations look like vertical bars:

There are three types of events for scroll-based animation:

Zone (double): starts when trigger becomes fully visible, plays backwards when trigger is cut off.

Example: zone/name/%150

Point: starts when trigger becomes visible

Example: point/name/%150

Scrub: transformation of the event objects is locked to the window’s scroll position.

For example, if 10% of the trigger is hidden above the top edge of the window, the event objects will be displayed as if 10% of the animation has been played.

Example: scrub/name/%150

This can be difficult to get just from reading — visit QKparis.svija.site (on your computer) to get you an idea of how it can be used.


Simple Mouseover Animation

The most frequent use of Svija Vibe is to create mouseover effects, so we’ve made it especially easy.

If you have a trigger and an event with no details:

  • trigger mouse/somename
  • event ovaway/somename

Then the event object will appear and disappear when the mouse moves over the trigger object.

The effect is the same as using:

  • trigger mouse/somename
  • event ovaway/somename/t100/0.5

Meaning: on mouseover the event object transitions to transparency 100% (opaque), and the animation takes 0.5 seconds to play.


Pages in this section:

Leave a Reply

Your email address will not be published. Required fields are marked *