Get Acess to Svija · Svija Vibe · What is Svija? · link · Examples of Svija Sites · Svija FAQ · Svija give you creative freedom · Create Incredible Content · Svija · Privacy Policy · Svija is Incredibly Fast · Terms & Conditions ·
The power to create life. ;stop-color:color(display-p3 0.427 0.471 0.471); ;stop-color:color(display-p3 0.416 0.584 1.0); ;stop-color:color(display-p3 1.0 0.796 0.333); ;stop-color:color(display-p3 0.427 0.471 0.471); ;stop-color:color(display-p3 0.416 0.584 1.0); ;stop-color:color(display-p3 1.0 0.796 0.333); ;stop-color:color(display-p3 0.427 0.471 0.471); ;stop-color:color(display-p3 0.416 0.584 1.0); ;stop-color:color(display-p3 1.0 0.796 0.333); ;stop-color:color(display-p3 0.427 0.471 0.471); ;stop-color:color(display-p3 0.416 0.584 1.0); ;stop-color:color(display-p3 1.0 0.796 0.333); ;stop-color:color(display-p3 0.427 0.471 0.471); ;stop-color:color(display-p3 0.416 0.584 1.0); ;stop-color:color(display-p3 1.0 0.796 0.333); ;stop-color:color(display-p3 0.427 0.471 0.471); ;stop-color:color(display-p3 0.416 0.584 1.0); ;stop-color:color(display-p3 1.0 0.796 0.333); ;stop-color:color(display-p3 0.427 0.471 0.471); ;stop-color:color(display-p3 0.416 0.584 1.0); ;stop-color:color(display-p3 1.0 0.796 0.333); ;stop-color:color(display-p3 0.427 0.471 0.471); ;stop-color:color(display-p3 0.416 0.584 1.0); ;stop-color:color(display-p3 1.0 0.796 0.333); ;stop-color:color(display-p3 0.427 0.471 0.471); ;stop-color:color(display-p3 0.416 0.584 1.0); ;stop-color:color(display-p3 1.0 0.796 0.333); ;stop-color:color(display-p3 0.267 0.549 0.992); ;stop-color:color(display-p3 0.216 0.459 0.996); Combinations Combinations ;stop-color:color(display-p3 0.267 0.549 0.992); ;stop-color:color(display-p3 0.216 0.459 0.996); Transparency Transparency ;stop-color:color(display-p3 0.267 0.549 0.992); ;stop-color:color(display-p3 0.216 0.459 0.996); Scaling Scaling ;stop-color:color(display-p3 0.267 0.549 0.992); ;stop-color:color(display-p3 0.216 0.459 0.996); Rotation Rotation ;stop-color:color(display-p3 0.267 0.549 0.992); ;stop-color:color(display-p3 0.216 0.459 0.996); Movement Movement WHAT IT DOES 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. Combinations Transparency Scaling Rotation Movement NO PROGRAMMING Svija Vibe is trivially simple to use. Here's an example.We'll start with two rectangles in Illustrator: TRIGGER and EVENT (below).We create an animation simply by naming the objects in the Layers panel: Triggers and events are connected by their name.mouse/someName is a mouse-based trigger with name someNameclick/someName/35> is an event with name someName that will be rotated 35° clockwise when the user clicks the trigger. It really is that simple. 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. Once you've read this section, you can probably guess the the events above —  tap here then scroll up to see if you're right! tap here TRIGGER No, up here click/name/-x45click/name/<360click/name/x%250click/name/t100    click/name/t0click/name/270>/%500/t100/-x150/-y350 EVENT Scroll up and see the correct answer under each button… 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 visiblelocked to the scroll position of the page SCROLLING ;stop-color:color(display-p3 0.267 0.549 0.992); ;stop-color:color(display-p3 0.216 0.459 0.996); Show Triggers Show Triggers LOCKED TO SCROLLING A VISIBLE ZONE A GIVEN POINT Show Triggers Show Triggers Scroll canceling enables you to animate objects that don't scroll with the page.The event is locked to the vertical scroll position, but the animation doesn't scroll vertically.It's enjoyable for the user and gives them a sense of control over their experience — always a way to keep your visitors interested.As you can see, it's a lot of fun — and we've only scratched the surface! SCROLL CANCELING Apart from preparing the images, this animation took about 15 minutes to create. ;stop-color:color(display-p3 0.078 0.078 0.078); ;stop-color:color(display-p3 0.102 0.137 0.169); ;stop-color:color(display-p3 0.765 0.867 0.89); ;stop-color:color(display-p3 0.078 0.078 0.078); ;stop-color:color(display-p3 0.102 0.137 0.169); ;stop-color:color(display-p3 0.765 0.867 0.89); ;stop-color:color(display-p3 0.078 0.078 0.078); ;stop-color:color(display-p3 0.102 0.137 0.169); ;stop-color:color(display-p3 0.765 0.867 0.89); ;stop-color:color(display-p3 0.078 0.078 0.078); ;stop-color:color(display-p3 0.102 0.137 0.169); ;stop-color:color(display-p3 0.765 0.867 0.89); ;stop-color:color(display-p3 0.078 0.078 0.078); ;stop-color:color(display-p3 0.102 0.137 0.169); ;stop-color:color(display-p3 0.765 0.867 0.89); ;stop-color:color(display-p3 0.078 0.078 0.078); ;stop-color:color(display-p3 0.102 0.137 0.169); ;stop-color:color(display-p3 0.765 0.867 0.89); ;stop-color:color(display-p3 0.427 0.471 0.471); ;stop-color:color(display-p3 0.416 0.584 1.0); ;stop-color:color(display-p3 1.0 0.796 0.333); ;stop-color:color(display-p3 0.427 0.471 0.471); ;stop-color:color(display-p3 0.416 0.584 1.0); ;stop-color:color(display-p3 1.0 0.796 0.333); ;stop-color:color(display-p3 0.427 0.471 0.471); ;stop-color:color(display-p3 0.416 0.584 1.0); ;stop-color:color(display-p3 1.0 0.796 0.333); ;stop-color:color(display-p3 0.949 0.706 0.251); ;stop-color:color(display-p3 1.0 1.0 0.98); ;stop-color:color(display-p3 1.0 1.0 0.98); ;stop-color:color(display-p3 0.949 0.706 0.251); Created entirely in Adobe Illustrator with no programming. Just imagine what you could do with these tools… 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: EASY = TRANSFORMATIVE Svija Vibe is based on the GreenSock Animation Platform. GSAP is a high-performance javascript animation library that enables transformative visual effects without slowing down your website.
;stop-color:color(display-p3 0.318 0.569 0.816); ;stop-color:color(display-p3 0.318 0.569 0.816); ;stop-color:color(display-p3 0.388 0.714 0.918); ;stop-color:color(display-p3 0.318 0.569 0.816); ;stop-color:color(display-p3 0.318 0.569 0.816); ;stop-color:color(display-p3 0.388 0.714 0.918); ;stop-color:color(display-p3 0.318 0.569 0.816); ;stop-color:color(display-p3 0.318 0.569 0.816); ;stop-color:color(display-p3 0.388 0.714 0.918); PRIVACY POLICYTERMS & CONDITIONS HELLO@SVIJA.COM TAP TO SEND Create Account How it Works Examples FAQ RICH CONTENT BLAZING SPEED ANIMATION PAGES · MODULES · FONTS · COMPUTER
This website requires javascript. Either enable javascript or visit with a different browser.
This website needs cookies to work. Please enable cookies or visit with a different browser.
This website does not support Internet Explorer. Please visit with a different browser.