Native scroll-driven animations

1. Native scroll-driven animations

Webstudio leverages the new Scroll Timeline API, allowing browsers to synchronize scrolling with content at native performance levels. For browsers that don't support this feature, we use a polyfill which provides standard performance. However, the native implementation can achieve up to 120 FPS.

It's super important that scroll-driven animations run smoothly and don’t get interrupted because "JavaScript is busy" doing who knows what.\

• Clonable examples
• Landing page with demos
• Full animations playlist

2. Global data variables

Want to reuse an email 📧, phone number, or CMS connection data throughout your site?

Now you can with Global Data Variables!

🌎 Define reusable data globally
📦 Access the variables anywhere… including inside Slots!
👌 Maintain consistency
🫰 Easier CMS setup!

When integrating a CMS, different pages need access to the same variables, such as the API key. Now with Global Data Variables, they only need to be defined once, significantly improving the setup time and maintenance of a CMS.

Want to define a data variable outside of a Slot and use it within? Now you can! Useful for defining emails, resources, languages, and more outside of the slot but using them in footers, navs, and more.

3. Docker support for sites

Export your dynamic site, and deploy it just about anywhere. Get total control over your hosting, cost, and compliance.

Learn how to deploy the site to AWS via Flightcontrol

Learn how to deploy the site to Hetzner via Coolify

4. YouTube component

5. Head Slot component

The Head Slot component allows the creation of various head tags and can dynamically generate them based on remote data.

6. Dashboard redesign

The new dashboard includes search functionality, separates projects and starter templates, and is the first step towards workspaces.

7. Advanced and focused mode in style panel

We added a focus mode that allows you to see only one section at a time, as well as an advanced mode that makes the advanced section a full-height experience with search and autocompletion. Much of the UX is inspired by chrome dev tools, enabling advanced users to change styles quickly without moving the mouse.

8. Context menus

We started adding more and more context menus, staring with advanced section in style panel and animations

9. All Pro features accessible from a free plan for testing

We have made all Pro features available on a free plan so that everyone can test these features without paying. Additionally, we added checks on publishing and exporting if Pro features are used.