Merge branch 'main' into releasenotes/grafx-studio-the-big-one

docs/GraFx-Studio/concepts/anchoring/index.md

@@ -0,0 +1,60 @@
+# Anchoring
+
+Anchoring lets you attach frames to the **canvas** or to other **frames** in your Smart Template, creating a dynamic layout that adapts to different sizes. 
+
+Imagine placing a logo 10% from the top and 15% from the left of your design—anchoring makes this easy to maintain across varying layouts.
+
+![screenshot-full](anchor01.png)
+
+## Benefits of Anchoring
+
+Why position a frame relative to the page or another frame? Anchoring is essential in GraFx Studio, where automation is key to generating multiple design variants efficiently. Anchoring allows elements to reposition automatically when layouts change, significantly **speeding up variant creation** and maintaining consistent design.
+
+## Anchor to Page
+
+Anchoring a frame to the **page** is the most straightforward anchoring concept. 
+
+This method anchors a frame to a specific side of the page or canvas, usually in a relative position. When you place a frame on the canvas, anchoring records its position relative to the page, so it remains consistent even if the canvas size changes.
+
+![screenshot-full](anchor02.png)
+
+## Anchor to Frame
+
+Anchoring a frame to **another frame** allows you to set precise relationships between elements.
+
+For example, if a text frame is anchored to a logo frame, the text will maintain the same offset from the logo, even if the page or canvas size changes.
+
+![screenshot-full](anchor03.png)
+
+## Inheritance
+
+Anchoring settings follow the [Inheritance Model](/GraFx-Studio/concepts/layouts/#inheritance) across sublayouts, ensuring consistent positioning. 
+
+When creating sublayouts, anchoring maintains relative positions across different canvas sizes. In the example below, a default layout uses a square format where all frames are positioned relative to the page.
+
+![screenshot-full](anchor04.png)
+
+For a landscape sublayout, anchoring automatically adapts frame positions to the new canvas size, preserving the original layout's relative spacing.
+
+![screenshot-full](anchor05.png)
+
+A vertical sublayout applies the same principle—only the canvas size changes, while the frames maintain their relative positioning.
+
+![screenshot-full](anchor06.png)
+
+If you want to make specific adjustments, you can manually move a frame or change the anchoring type. Doing so breaks inheritance with the parent layout, and the new values appear in yellow in the properties panel, indicating overrides.
+
+![screenshot-full](anchor07.png)
+
+## What’s Next?
+
+See the [How To set Anchoring page](/GraFx-Studio/guides/anchoring/) in the Guides section
+
+Anchoring is powerful on its own, but it becomes even more effective when combined with other Smart Template features:
+
+- [Actions](/GraFx-Studio/concepts/actions/)
+- Autogrow
+- [Copyfitting](/GraFx-Studio/guides/text-frame/#auto-resize)
+- [Inheritance](/GraFx-Studio/concepts/layouts/#inheritance)
+- [Layouts](/GraFx-Studio/concepts/layouts/)
+- [Variables](/GraFx-Studio/concepts/variables/)

docs/GraFx-Studio/concepts/design-run/index.md

@@ -0,0 +1,66 @@
+# Design & Run Mode
+
+GraFx Studio provides two modes for creating and testing Smart Templates: **Design Mode** and **Run Mode**. 
+
+These modes allow you to focus separately on designing the smart template and testing business logic.
+
+In **Design Mode**, you can freely arrange and style elements without triggering actions that could alter your original design. This keeps the workspace clean, ideal for setting up and adjusting layouts, styles, and initial logic.
+
+Switching to **Run Mode** simulates the end-user experience (My Projects), showing how the template’s logic behaves live. In this mode, actions behave as they will in a real environment, letting you test how users will experience the template.
+Variables set to be hidden, won't show in the end-user experience.
+
+## Design Mode
+
+**Design Mode** is optimized for layout and style tasks, with actions inactive.
+
+![screenshot](dr1.png)
+
+![screenshot-full](dr1_1.png)
+
+### Key Features in Design Mode:
+- **Static Layout**: Actions are inactive, letting you set up without interference  
+You can create text, image, barcode, and shape frames
+- **Focused Styling**: You can create a Stylekit with font families, paragraph- and character styles, and define colors
+
+### Elements Active in Design Mode:
+- **Anchoring**: Set fixed or relative positions to ensure consistent layout across sizes
+- **Animation Setup**: Define and test animations with playback
+- **Styling**: Customize text, colors, and layout freely
+- **Variables**: Creating, inserting, settings of variables
+
+## Run Mode
+
+In **Run Mode**, the template operates as it would for end users, activating logic and interactions for realistic testing.
+
+![screenshot](dr2.png)
+
+![screenshot-full](dr2-1.png)
+
+### Key Features in Run Mode:
+- **Live Actions**: Business logic is triggered in response to changes, reflecting end-user interactions.
+- **True Visibility**: Hidden variables and conditional visibility (of frames) behave as configured for end users.
+- **User Interface Simulation**: Simulate how different [User Interfaces](/GraFx-Studio/concepts/user-interface/) will appear to end users. In Run Mode, you can switch between different user interfaces to see e.g. which output settings are available to end users, ensuring the final experience matches the intended design.
+
+### Displaying Output Settings by Layout Intent
+
+When a **User Interface** is selected, only the output settings specific to that interface will be shown. 
+
+For example, when viewing a layout with a **Print Intent**, only print-specific output settings (defined in the user interface) will be displayed in the "download" options.
+
+Conversely, when viewing a layout with a **Digital Animated Intent**, only the digital animated output settings will appear. This selective display provides a clear, intent-specific experience that mirrors the end-user environment.
+
+![screenshot](dr3.png)
+
+![screenshot](dr4.png)
+
+### Elements Active in Run Mode:
+- **Actions**: All interactions and business logic execute in real time.
+- **Conditional Visibility**: Hidden elements are hidden, showing how visibility rules work.
+
+## Workflow
+
+1. **Design** in Design Mode: Arrange layout, styles, animations and initial logic without active interactions.
+2. **Switch to Run Mode**: Test actions, and user interactions.
+3. **Refine** by toggling between modes, adjusting design or logic as needed.
+
+By switching between **Design Mode** and **Run Mode**, you can refine interactive templates efficiently without design interference.

docs/GraFx-Studio/guides/anchoring/animations/Center-Bottom.json

@@ -0,0 +1 @@
+{"ddd":0,"fr":60,"h":94,"ip":0,"layers":[{"ddd":0,"ind":3,"ty":4,"nm":"","ln":"","parent":2,"sr":1,"ks":{"a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"ao":0,"ip":0,"op":361,"st":0,"bm":0,"shapes":[{"ty":"gr","hd":false,"bm":0,"it":[{"ty":"rc","hd":false,"p":{"a":0,"k":[16,16]},"r":{"a":0,"k":0},"s":{"a":0,"k":[33,33]}},{"ty":"fl","hd":false,"bm":0,"c":{"a":0,"k":[0,0,0,0]},"r":1,"o":{"a":0,"k":0}},{"ty":"tr","nm":"Transform","a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"np":0},{"ty":"gr","hd":false,"bm":0,"it":[{"ty":"rc","hd":false,"p":{"a":0,"k":[16,16]},"r":{"a":0,"k":0},"s":{"a":0,"k":[32,32]}},{"ty":"st","hd":false,"bm":0,"c":{"a":0,"k":[0.35294117647058826,0.4980392156862745,0.9450980392156862]},"lc":2,"lj":1,"ml":10,"o":{"a":0,"k":100},"w":{"a":0,"k":1}},{"ty":"tr","nm":"Transform","a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"np":0}]},{"ddd":0,"ind":2,"ty":3,"nm":"","ln":"","parent":1,"sr":1,"ks":{"a":{"a":0,"k":[16,16]},"o":{"a":0,"k":100},"p":{"a":1,"k":[{"t":0,"s":[47,47],"i":{"x":[0,1],"y":[0,1]},"o":{"x":[0,0],"y":[0,0]}},{"t":120,"s":[47,47],"i":{"x":[0.6207413941560823,0.0002452597],"y":[0.6207413941954326,0.9997419896]},"o":{"x":[0.28942848505441726,0.5008518896],"y":[0.2894284850943605,0.00026021870000003666]}},{"t":180,"s":[47,33.5],"i":{"x":[0.6342411856770817,0.0002452597],"y":[0.634241185620042,0.9997419896]},"o":{"x":[0.3019272487806413,0.5008518896],"y":[0.30192724885312977,0.0002602187]}},{"t":240,"s":[47,47],"i":{"x":[0.641588833507898,0.0002452597],"y":[0.6415888336202921,0.9997419896]},"o":{"x":[0.3088693800334269,0.5008518896],"y":[0.30886938007091697,0.00026021870000003666]}},{"t":300,"s":[47,33.5],"i":{"x":[0.646216173423454,0.0002452597],"y":[0.6462161732944246,0.9997419896]},"o":{"x":[0.313292846171432,0.5008518896],"y":[0.31329284592098106,0.0002602187]}},{"t":360,"s":[47,47],"h":1}]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"ao":0,"ip":0,"op":361,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"","ln":"","parent":4,"sr":1,"ks":{"a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"ao":0,"ip":0,"op":361,"st":0,"bm":0,"shapes":[{"ty":"rc","hd":false,"p":{"a":1,"k":[{"t":0,"s":[47,47],"i":{"x":[0,0.5],"y":[1,0.5]},"o":{"x":[0.5,0],"y":[0,0]}},{"t":60,"s":[33.5,47],"i":{"x":[0,1],"y":[1,1]},"o":{"x":[0.5,0.5],"y":[0,0.5]}},{"t":120,"s":[47,47],"i":{"x":[0.5,0],"y":[0.5,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":180,"s":[47,33.5],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0.5,0.5],"y":[0.5,0]}},{"t":240,"s":[47,47],"i":{"x":[0,0],"y":[1,1]},"o":{"x":[0.5,0.5],"y":[0,0]}},{"t":300,"s":[33.5,33.5],"i":{"x":[0,0],"y":[1,1]},"o":{"x":[0.5,0.5],"y":[0,0]}},{"t":360,"s":[47,47],"h":1}]},"r":{"a":0,"k":2},"s":{"a":1,"k":[{"t":0,"s":[94,94],"i":{"x":[0,0.5],"y":[1,0.5]},"o":{"x":[0.5,0],"y":[0,0]}},{"t":60,"s":[67,94],"i":{"x":[0,1],"y":[1,1]},"o":{"x":[0.5,0.5],"y":[0,0.5]}},{"t":120,"s":[94,94],"i":{"x":[0.5,0],"y":[0.5,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":180,"s":[94,67],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0.5,0.5],"y":[0.5,0]}},{"t":240,"s":[94,94],"i":{"x":[0,0],"y":[1,1]},"o":{"x":[0.5,0.5],"y":[0,0]}},{"t":300,"s":[67,67],"i":{"x":[0,0],"y":[1,1]},"o":{"x":[0.5,0.5],"y":[0,0]}},{"t":360,"s":[94,94],"h":1}]}},{"ty":"fl","hd":false,"bm":0,"c":{"a":0,"k":[0.19607843137254902,0.19607843137254902,0.19607843137254902]},"r":1,"o":{"a":0,"k":100}}]},{"ddd":0,"ind":4,"ty":3,"nm":"","ln":"","parent":1,"sr":1,"ks":{"a":{"a":1,"k":[{"t":0,"s":[47,47],"i":{"x":[0,0.5],"y":[1,0.5]},"o":{"x":[0.5,0],"y":[0,0]}},{"t":60,"s":[33.5,47],"i":{"x":[0,1],"y":[1,1]},"o":{"x":[0.5,0.5],"y":[0,0.5]}},{"t":120,"s":[47,47],"i":{"x":[0.5,0],"y":[0.5,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":180,"s":[47,33.5],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0.5,0.5],"y":[0.5,0]}},{"t":240,"s":[47,47],"i":{"x":[0,0],"y":[1,1]},"o":{"x":[0.5,0.5],"y":[0,0]}},{"t":300,"s":[33.5,33.5],"i":{"x":[0,0],"y":[1,1]},"o":{"x":[0.5,0.5],"y":[0,0]}},{"t":360,"s":[47,47],"h":1}]},"o":{"a":0,"k":100},"p":{"a":0,"k":[47,47]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"ao":0,"ip":0,"op":361,"st":0,"bm":0},{"ddd":0,"ind":1,"ty":3,"nm":"","ln":"","parent":0,"sr":1,"ks":{"a":{"a":0,"k":[47,47]},"o":{"a":0,"k":100},"p":{"a":0,"k":[47,47]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"ao":0,"ip":0,"op":361,"st":0,"bm":0},{"ddd":0,"ind":0,"ty":3,"nm":"","ln":"","sr":1,"ks":{"a":{"a":0,"k":[47,47]},"o":{"a":0,"k":100},"p":{"a":0,"k":[47,47]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"ao":0,"ip":0,"op":361,"st":0,"bm":0}],"meta":{"g":"https://jitter.video"},"nm":"","op":360,"v":"5.7.4","w":94}

docs/GraFx-Studio/guides/anchoring/animations/Center-Center.json

@@ -0,0 +1 @@
+{"ddd":0,"fr":60,"h":94,"ip":0,"layers":[{"ddd":0,"ind":3,"ty":4,"nm":"","ln":"","parent":2,"sr":1,"ks":{"a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"ao":0,"ip":0,"op":361,"st":0,"bm":0,"shapes":[{"ty":"gr","hd":false,"bm":0,"it":[{"ty":"rc","hd":false,"p":{"a":0,"k":[16,16]},"r":{"a":0,"k":0},"s":{"a":0,"k":[33,33]}},{"ty":"fl","hd":false,"bm":0,"c":{"a":0,"k":[0,0,0,0]},"r":1,"o":{"a":0,"k":0}},{"ty":"tr","nm":"Transform","a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"np":0},{"ty":"gr","hd":false,"bm":0,"it":[{"ty":"rc","hd":false,"p":{"a":0,"k":[16,16]},"r":{"a":0,"k":0},"s":{"a":0,"k":[32,32]}},{"ty":"st","hd":false,"bm":0,"c":{"a":0,"k":[0.35294117647058826,0.4980392156862745,0.9450980392156862]},"lc":2,"lj":1,"ml":10,"o":{"a":0,"k":100},"w":{"a":0,"k":1}},{"ty":"tr","nm":"Transform","a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"np":0}]},{"ddd":0,"ind":2,"ty":3,"nm":"","ln":"","parent":1,"sr":1,"ks":{"a":{"a":0,"k":[16,16]},"o":{"a":0,"k":100},"p":{"a":0,"k":[47,47]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"ao":0,"ip":0,"op":361,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"","ln":"","parent":4,"sr":1,"ks":{"a":{"a":0,"k":[0,0]},"o":{"a":0,"k":100},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"ao":0,"ip":0,"op":361,"st":0,"bm":0,"shapes":[{"ty":"rc","hd":false,"p":{"a":1,"k":[{"t":0,"s":[47,47],"i":{"x":[0,0.5],"y":[1,0.5]},"o":{"x":[0.5,0],"y":[0,0]}},{"t":60,"s":[33.5,47],"i":{"x":[0,1],"y":[1,1]},"o":{"x":[0.5,0.5],"y":[0,0.5]}},{"t":120,"s":[47,47],"i":{"x":[0.5,0],"y":[0.5,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":180,"s":[47,33.5],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0.5,0.5],"y":[0.5,0]}},{"t":240,"s":[47,47],"i":{"x":[0,0],"y":[1,1]},"o":{"x":[0.5,0.5],"y":[0,0]}},{"t":300,"s":[33.5,33.5],"i":{"x":[0,0],"y":[1,1]},"o":{"x":[0.5,0.5],"y":[0,0]}},{"t":360,"s":[47,47],"h":1}]},"r":{"a":0,"k":2},"s":{"a":1,"k":[{"t":0,"s":[94,94],"i":{"x":[0,0.5],"y":[1,0.5]},"o":{"x":[0.5,0],"y":[0,0]}},{"t":60,"s":[67,94],"i":{"x":[0,1],"y":[1,1]},"o":{"x":[0.5,0.5],"y":[0,0.5]}},{"t":120,"s":[94,94],"i":{"x":[0.5,0],"y":[0.5,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":180,"s":[94,67],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0.5,0.5],"y":[0.5,0]}},{"t":240,"s":[94,94],"i":{"x":[0,0],"y":[1,1]},"o":{"x":[0.5,0.5],"y":[0,0]}},{"t":300,"s":[67,67],"i":{"x":[0,0],"y":[1,1]},"o":{"x":[0.5,0.5],"y":[0,0]}},{"t":360,"s":[94,94],"h":1}]}},{"ty":"fl","hd":false,"bm":0,"c":{"a":0,"k":[0.19607843137254902,0.19607843137254902,0.19607843137254902]},"r":1,"o":{"a":0,"k":100}}]},{"ddd":0,"ind":4,"ty":3,"nm":"","ln":"","parent":1,"sr":1,"ks":{"a":{"a":1,"k":[{"t":0,"s":[47,47],"i":{"x":[0,0.5],"y":[1,0.5]},"o":{"x":[0.5,0],"y":[0,0]}},{"t":60,"s":[33.5,47],"i":{"x":[0,1],"y":[1,1]},"o":{"x":[0.5,0.5],"y":[0,0.5]}},{"t":120,"s":[47,47],"i":{"x":[0.5,0],"y":[0.5,1]},"o":{"x":[0,0.5],"y":[0,0]}},{"t":180,"s":[47,33.5],"i":{"x":[1,0],"y":[1,1]},"o":{"x":[0.5,0.5],"y":[0.5,0]}},{"t":240,"s":[47,47],"i":{"x":[0,0],"y":[1,1]},"o":{"x":[0.5,0.5],"y":[0,0]}},{"t":300,"s":[33.5,33.5],"i":{"x":[0,0],"y":[1,1]},"o":{"x":[0.5,0.5],"y":[0,0]}},{"t":360,"s":[47,47],"h":1}]},"o":{"a":0,"k":100},"p":{"a":0,"k":[47,47]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"ao":0,"ip":0,"op":361,"st":0,"bm":0},{"ddd":0,"ind":1,"ty":3,"nm":"","ln":"","parent":0,"sr":1,"ks":{"a":{"a":0,"k":[47,47]},"o":{"a":0,"k":100},"p":{"a":0,"k":[47,47]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"ao":0,"ip":0,"op":361,"st":0,"bm":0},{"ddd":0,"ind":0,"ty":3,"nm":"","ln":"","sr":1,"ks":{"a":{"a":0,"k":[47,47]},"o":{"a":0,"k":100},"p":{"a":0,"k":[47,47]},"r":{"a":0,"k":0},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}},"ao":0,"ip":0,"op":361,"st":0,"bm":0}],"meta":{"g":"https://jitter.video"},"nm":"","op":360,"v":"5.7.4","w":94}