Animation editor

Using the animation editor in Nordcraft, you can create and manage animations for your components. You can define keyframes and set animation properties such as duration, delay, and easing functions.

Animations are rendered to the DOM as pure CSS animations, which means the resulting code is lean and performant, and can be used in any web project without additional dependencies. Your animations created with the Nordcraft animation editor and will run smoothly across all modern browsers.

To create an animation:

1. 1

   Select an element in the element panel
2. 2

   View the style panel, and locate the Animations section in the style panel
3. 3

   Click the + button next to Animations to open the animation editor
4. 4

   Choose from one of the preset animation templates available in the editor, or start by adding your own keyframes

Keyframes define the stages of an animation. Keyframes specify what should change at specific points in time during the animation. To add a keyframe, click the ♦ button next to the CSS property in the animation editor timeline, or click the ♦ next to the CSS property in the style panel when the animation editor is visible.

In the bottom bar of the animation editor, you can set various properties for your animation. Properties specify how animations behave, while keyframes define what changes. Properties include:

• Duration: The total time the animation takes to complete.
• Delay: The time before the animation starts. Setting a negative delay will cause the animation to start immediately, but at a specific point in time, effectively skipping the initial frames.
• Easing: The timing function that controls the speed of the animation at different points. You can choose from predefined easing functions or create a custom one.
• Iteration count: How many times the animation should repeat. You can set it to a specific number or use infinite for continuous animations.
• Direction: The direction in which the animation plays. Options include normal, reverse, alternate, and alternate-reverse.
• Fill mode: Determines how the animation applies styles to its target before and after it is executing. Options include none, forwards, backwards, and both.

Once you have created an animation, it will automatically play when the style is applied to the element. If the animation is set to loop, it will continue to play indefinitely. You can control when the animation plays by adding the animation to a specific selector, such as :hover, :focus, or when a class is added to the element.

You can apply multiple animations to elements in the style panel, and they will play in sequence or simultaneously, depending on their properties. Creating complex animations often involves combining multiple animations and multiple elements within other elements to make one cohesive animation.

Check out the video below to see how the like button was built.

Enable youtube videos Privacy policy