Hi there,

We’re excited to announce the beta release of our new animation tool! This tool brings your designs to life with smooth, CSS-based animations powered by the browser’s built-in Animation API.

This is a significant upgrade from our existing Animation Addon, delivering enhanced stability, improved performance, and a seamless, native integration within Interactions.

⚠️ To ensure optimal performance, avoid using the new animation interactions with the existing Animation Addon.

Trigger Animations

Interaction triggers now support 'Animate' as actions, offering a wide range of possibilities such as:

• Entering View Animations: Use the ‘Upon entering view’ trigger with ‘Animate’ to apply effects when the elements enter the viewport.
• Click Animations: Combine ‘On click’ triggers with ‘Animate’ for click-based effects.
• Variable Animations: Combine ‘On variable change’ trigger with ‘Animate’ to trigger animations based on changing values.

Animate with Presets

Use ready-made animations for quick and efficient setup. Select presets for entering, exiting, or highlighting elements.

Animate with Keyframes

Create advanced animations using keyframes to control properties like position, size, and opacity. Customize each step of the animation timeline for step-based effects.

As this is a beta release, some issues may still arise. Your input is essential for improving the tool. Share feedback in the community or reach out to our support team through the chat 💪🏻

We’ve made significant improvements to the Font Manager to make it easier, faster, and more enjoyable to manage and use fonts in Vev. Here’s what’s new:

• The font selector now loads all (or most) library fonts directly, so you can browse without opening the Font Manager.
• A search bar at the top of the font selector lets you quickly find the perfect font.
• Live previews on the canvas let you hover over fonts in the selector to see how they’ll look directly in your textbox.
• Clear categories now distinguish between Project Fonts, Custom Fonts, and Adobe Fonts in both the font selector and the Font Manager.
• The cogwheel icon in the font selector opens the Font Manager, where you can manage your fonts just as before, but with an updated UI/UX.

We hope these updates make working with fonts at Vev feel 10x smoother! Try it out and let us know what you think.

Auto Layout feature has officially graduated from beta and is now called Flex Layout with enhanced functionality and a name that reflects its CSS roots. 🎉

📚 Tutorial Video

🔑 Key Features

Here’s what Flex Layout brings to you:

• Direction: Arrange elements vertically, horizontally, or wrap them for responsive layouts.
• Spacing: Simplified options for packed or evenly spaced layouts.
• Alignment: Precisely position elements within a frame.
• Responsive Sizing: Fine-tune with min/max width and height options.
• Padding: Customize vertical and horizontal padding.

Plus, we’ve reorganized the Style Tab and introduced a new Clipping Option for even more creative possibilities.
​

Give it a try and let us know how it transforms your workflow. Happy designing! 🫶
​

This month’s updates bring major upgrades: “Fluid Breakpoints”, “Auto Constraints”, updates on the top right panel, and a new edit mode for main components.

1. Fluid Breakpoints

In Vev, we use "fixed-width" breakpoints by default, meaning your design would snap at specific screen widths—and the jumpy transition may feel abrupt in some cases.

With “Fluid Breakpoints”, you now have the option to let your design scale smoothly within a breakpoint range. Instead of those sharp transitions, content resizes proportionally as screen width changes. Plus, you can design across the full canvas width without being confined to the safe zone.

2. Auto Constraints

Constraints manage how elements behave when their container resizes, keeping everything anchored and scaling smoothly across devices. While this process used to be automatic, you can now turn off "Auto Constraints" in the right-side style panel, giving you full control to set constraints manually without automatic adjustments.

3. Top Right Style Panel Update

We’ve added a new heading at the top of the right panel that instantly tells you the type of element you’re working on. For example, if you’re editing a section, the heading will display 'Section'. Clicking this heading also unlocks quick access to the context menu, the same one you’d normally get by right-clicking on the canvas.

4. Main Components Edit Mode

Main components are the backbone of Vev’s scalability—these reusable frames or sections ensure your designs stay consistent across your project. With the new “Edit Mode”, you now get a dedicated space away from the page you are working on to tweak main components.

On a slightly bittersweet note, with every new chapter comes a farewell to some old friends. 🥹

Animated words, Animated letters, Animated words advanced, and Animated letters advanced are officially retiring and won’t be popping up in the Add menu anymore. But don’t worry—if you’ve already used them in your projects, they’ll still be available for access. That said, we’re no longer supporting them as we shift gears to focus on building even more cool features for all of you.

Exciting news—we’ve just released Multi-Account support to make switching between different accounts a breeze, plus rolling out beta access to Variables and Scrolling Slides.

Let’s find out more!

Multi-Account

Multi-Account is finally here, making collaboration across multiple Vev accounts possible—perfect for freelancers and agencies. Now you’ll see account-specific avatar in your dashboard, making it easier to know exactly where you are and switch between accounts. Plus, drafts and recent dashboards are tied to each account, keeping everything even more organized. (Tip: Be sure to get an invite from the account admin to have it show up in your menu.)

Variables (Beta)

We’re thrilled to introduce Variables, a handy feature that lets you define reusable values for things like colors, typography, spacing, and sizes—all in one place. When you update a variable, it instantly updates everywhere you’ve used it in your project. It’s currently in closed beta, so if you’re interested in giving it a spin, just leave a comment on our community post to get access.

Scrolling Slides (Beta)

Introducing Scrolling Slides—a new, experimental component that progresses through slides as you scroll. One of the prime use cases that this component is designed to support is horizontal-scrolling.

How to access:

Open the public project below, and you will find the component that you can copy and paste into one of your projects. Along with a brief introduction on the first page, you will find examples of how the component can be used on the second page.

It's a wrap! We've successfully closed Q1 in Vev. This month, we've introduced several updates to the Design Editor, including improved Main Components and a new feature named Scroll Snap.

Additionally, our CLI has become more robust as we phase out The Code Editor. Let’s take a look!

Design Editor

• Main Components: We've made improvements to "Main Components". These include better stability, on-canvas editing, and a simplified context menu. Want to give it a whirl? Read more here to learn how you can create a component that can be reused across your projects.

• Scroll Snap: Meet “Scroll Snap”—a native CSS feature designed to enhance your project's scrolling experience. Activate it in Page Settings to apply it across the entire page. With this feature, your sections will effortlessly 'snap' into alignment when scrolling without any mid-scroll stops. (Note: This update begins our transition away from the beloved 'Snap to' addon.)

CLI (Command-Line Interface)

• CLI Update: Our CLI now supports "Interactions and Events." This feature enables dynamic communication between components, allowing them to both respond to and initiate events with each other. You can read more about it here. 🫡

Code Editor

• Code Editor Read-Only Access: As many of you know, we've been gradually phasing out the Code Editor with the introduction of the CLI to support much more robust possibilities. Within the next few weeks, read-only access will be enabled for your widgets, meaning you will no longer be able to edit the ones you have but can still use them. To jump on our new ship, check our Dev docs or join Code Talk in our community.

Bug Fixes

• Fixed an issue preventing template preview from the dashboard.
• Fixed an issue with certain font families not functioning correctly.
• Fixed an issue that restricted scrolling through layers in the Slider when a large number of slides were added.
• Improved the Interactions by making arrows light-up when hovered over in the right side panel for better clarity in editing.

Hope you're all having a great start to 2024. 🥳 Here at Vev, we've been working hard to release some small but mighty features.

Pricing Changes

• As part of our ongoing effort to refine pricing and support our product strategy, ZIP download with assets has been moved to the Organization plan. This ZIP option enables you to create offline projects and host Vev projects on your own servers. ZIP download without assets (where we host the assets for you) remains available on the Professional plan.
  ​
• "Advanced hosting" is now exclusive to the Professional and Organization plans, while Standard Hosting continues to be accessible across all plans, including the Starter plan. If you’ve already used the Advanced Hosting on the starter plan, you can still access the hosting settings and its content, but no longer re-publish or connect the hosting to a new project.

Design Editor

• Improved differentiation between visible and hidden layers by graying out the hidden layers.
  ​
• Added additional settings to the Image/Background Image editors to make working with scrollytelling and parallax images easier by enabling the setting of focal point position and zoom with numerical input.

Special thanks to our community member Nico for suggesting this! 😘

Project Search, Template, & User Management

• Introduced “caching” to the project filtering options, meaning the option you’ve chosen previously will be remembered.
  ​
• You can also now sort your projects either in ascending or descending order.

(Note: These improvements have been developed to replace the “tag” filtering for a smoother project discovery experience.)

• Implemented a restriction to only allow the creation of projects based on templates marked as "Ready.", to allow for more a reliable workflow within your account.
  ​
• You can now autonomously delete your own user profile… But hey, before you go, can we just say how much we'll miss you? 😿
  ​

Code Editor Deprecation

• As we're slowly starting to deprecate the Code Editor, you no longer will be able to create new widgets using the Code Editor. But not to worry—you can still manage the ones you've already created for a little while longer. For new widgets, please use our Command Line Interface (CLI).
  ​
  ​Learn how to get started with the CLI here: https://developer.vev.design/docs/cli/

Lastly, we’re sorry that some of you had to experience challenges regarding the sticky position after our latest roll out.

The issue was quickly rectified, but we sincerely thank you for your patience and understanding on this one! We want to be transparent on issues such as these as your trust in us means everything to us!
​

Add-Menu is a feature you all love and use in your project almost daily. What if it's become even easier to browse, add, and swap components?

The "All-New Add-Menu" is now available for beta access. 🎉

Here is what's changed:

• The "+" icon can now be accessed from the new left panel.
• All components can be found here, whilst addons (e.g. animations) can be found from the right-hand style panel in the "Addons / Interactions" tab.

🏃🏾‍♂️🏃🏾‍♂️🏃🏾‍♂️Head over to your Vev profile and turn on the toggle under Experimental Features.

Pro & Org users can now access advanced SEO settings. 🎉

Features:

• Robots.txt: Gain control over which pages are indexed by search engines with our new robots.txt settings.
• Editable Sitemap.xml: Manually adjust your sitemap.xml for better management of how search engines crawl and index your site's content.
• Advanced HTTP Headers: Define specific headers for improved cache control, domain verification, and to establish network rules. Recommended for use with a developer.

Think you've seen it all in no-code web building? Head over to your Vev profile and turn on the toggle under Experimental Features to meet this power duo. 🚀

Meet Interactions

• Trigger: Select an object that will trigger actions.
• Target: Choose where actions occur (like a frame or an image).
• Action: Decide what happens upon activation (show/hide or next slide).

Meet Slider

• Drop in ANY design element (from 3D files to full frames).
• Forget fixed arrows; customize navigation YOUR way with Interactions.