Overview of animating various element properties with the Timeline editor.
Most animation properties are the same as equivalent CSS properties. So, we won’t go into every single property, but just give an overview and cover those that need special mention.
Transform properties manipulate the CSS transform property in order to move, rotate, scale and skew the element.
Move X, Y and Z properties move the element from its original position. Value can be given in px (default) or in %. Note that in transforms, % relates to the size of the element, not its container.
If you want to move the element relative to its parent container, use left, top and other dimension properties.
Transform origin sets the point around which the element will be scaled, rotated or skewed. By default the center of the element is used (same as 505 50% 50%).
Working with 3D transforms
Perspective needs to be set in order to Z coordinate have any visible effect.
Perspective (for parent) is the same as the CSS perspective and it needs to be set on the parent of transformed elements. Perspective can be animated as well.
Transform perspective (for element) is similar to the above mentioned perspective, but here the perspective is set directly on the transformed element, not its parent.
If you don’t need to animate the perspective it is best to set it with CSS styling.
Auto opacity could be also called Smart opacity. It manipulates the opacity CSS property and takes care of the visibility property as well.
When auto opacity reaches 0 the visibility of the element will be set to hidden. This helps with the performance.
When the auto opacity is larger than 0 the visibility is set to inherit, if needed.
Using Auto opacity is the best approach for showing elements that are hidden with Hide at start action.
So, unless you have a specific reason to use Opacity property, just use Auto opacity whenever you need to hide, show or make the element transparent.
Text properties animate the text appearance. Nothing special here.
Background properties are the same as their CSS counterparts.
In this example, we’re tweening between background gradient based on the horizontal mouse position. When tweening between complex values, make sure that both values have the same structure, in this case same number of gradient stops.
Move over me…
Animate CSS dimension, margin and padding properties.
Animate CSS position properties including z-index. Remember to set the position of the element in order for left, top and others to have any effect.
These properties are used to animate the border.
Note that Border radius values require the unit, for example px.
Shadows & Filters
Text shadow, box shadow and filters are equal to their corresponding CSS properties and can be fully animated.
Click on me…
When tweening between complex values, make sure that both values have the same structure, in this case same number of gradient stops.
Important thing to remember is that these properties need a starting value in order to be properly animated.
For example animating filter to blur(10px) needs a starting position, usually filter blur(0), so that it can be animated.
The starting value can either be set with a transform or with CSS styling.
Not animated CSS properties
These CSS properties can be used in animations, but can’t be animated: display, position and visibility.
They will be set at the beginning of the transition.
Media properties are not related to CSS properties. They let you control the playback of audio and video HTML elements.
Note that .mp4 playback is not supported during editing in Pinegrow Web Editor, but works in normal browsers.
Play during plays the media for the whole duration of the transition where it is set. The value is the start time. By default, media will start playing at its current position.
For example, if you have a transition starting at 2s with the duration 10s on a video element, the video will start playing at 2s and be paused at 12s.
Start playing will start playing the media at the beginning of its transition. It will not pause the media at the end of the transition. The value is the start time. By default, media will start playing at its current position.
Stop playing will pause the media at the start of its transition.
Start and stop playing can be also used with Set transitions.
Volume will animate the volume of the media, acceptable values are from 0 to 1.
Important note about media playback
Your custom code should make sure that the media is ready to be played when the animation is triggered.
Media playback in mobile browsers is unreliable. It is best to use this feature only on non-mobile devices. Use Enable on interaction setting to target only appropriate devices.
Set class sets the class attribute of the element. Any previous classes are thus removed.
Add class adds the class to the element, keeping any existing classes.
Remove class removes the class from the element.
Note that when animating classes with a tween transition, the styling of the element will actually be animated, from its current state to the appearance o the target class-set. Use Set transition if you need to change classes instantaneously.
Manipulating classes is also useful in combination with conditional trigger conditions of Interactions action.
I’m a popup box.
Interactions & Code
Play animation will play one of the animations defined with the Interactions action on the target element. This is very useful, because you can play existing animations instead of duplicating them.
The parameter is the index of the interaction. For example, if you have Interactions action with two interactions on the timeline target element, you can play the animation by setting Play animation to 2.
The animation is played at the start of the transition.
The value is the name of the function that needs to be available in the global scope.
- On start calls the function at the start of the transition. The target element is passed as the first parameter.
- On complete calls the function at the end of the transition. The target element is passed as the first parameter.
- On update calls the function on every animation frame. The first parameter is the target element and the second is the transition progress, from 0 to 1. Make sure to optimize the function because it will be called many times. For example, only update inner HTML of a label if the value changes.
Note that in case of multiple target elements these callbacks are called once for each target element.
Add any custom property to the animation. This can be any CSS property, element property, GSAP property or your custom property.
For example, you can add GSAP xPercent property, set it to 50 and then combine it with X transition with px value in order to center elements and then offset them from the center.