Transitions tab

Under this tab you can manage how the current layer will be animated in different cases, such as when appearing, disappearing, or when you hover on that, and even more, like loop, parallax or text effects. This part get the biggest makeover since the last main version, and this could be the most important part of the Creative Popup, and you can find the detailed description of the settings below.

Every transition settings can be Copied & Pasted between the layers, but please note that only the same type can be used for each one, so as an example if you copy the opening transition of Layer 1, then you can only paste that into the same Opening transition of the Layer 2.

You can see an enable button for all types, so you need to enable a transition type to make that appear for the current layer. Until that you are not allowed to edit the settings.

Opening transition

The following are the initial options from which this layer animates toward the appropriate values set under the Styles tab when it enters into the popup canvas.

Position & Dimensions

The OffsetX parameter set the horizontal, the OffsetY is the vertical offset to align the starting position of layers. Positive and negative numbers are allowed or enter left / right to position the layer out of the frame.
By clicking into the input boxes additional predefined values can appear, which can help you to set what you would like, or even set a random value.

Scaling animations is also possible with the ScaleX and ScaleY options.

The initial width and height of the layer can be also set from which it will be animated to its proper size during the transition.

Rotation, Skew & Mask

The Rotate parameter will rotates the layer clockwise from the given angle to zero degree. Negative values are allowed for counterclockwise rotation. RotateX along the X (horizontal) axis, RotateY along the Y (vertical) axis.

With the SkewX and SkewY you can skew the layer along the X (horizontal) and the Y (vertical) axis from the given angle to 0 degree. Negative values are allowed for reverse direction.

Mask will clips (cuts off) the sides of the layer by the given amount specified in pixels or percentages. The 4 value in order: top, right, bottom and the left side of the layer.

Timing & Transform

The Start at delays the transition with the given amount of milliseconds before the layer enters the scene. A second equals to 1000 milliseconds.

The Duration in milliseconds when the layer enters into the page. A second equals to 1000 milliseconds.

Easings are the timing function of the animation. With this function you can manipulate the movement of the animated object. Please click on the following link to open easings.net for more information and real-time examples.

The Transform Origin is a quite important parameter for the animations. This option allows you to modify the origin for transformations of the layer according to its position. The three values represent the X, Y and Z axis in 3D space. OriginX can be left, center, right, a number or a percentage value. OriginY can be top, center, bottom, a number or a percentage value. OriginZ can be a number and corresponds the depth in 3D space.

With the Perspective parameter you can change the perspective of this layer individually if you are making 3D transitions.

Style properties

When the Fade option enabled the current layer not just animated from the set position, but faded as well.

You can also animate the color and background color and the rounded corners of the layer. This will mean, that if you have a text content on that layer, these properties can be transformed from these given value to the default one.

The Filter parameter provide effects like blurring or color shifting your layers. Click into the text field to see a selection of filters you can use. Although clicking on the pre-defined options will reset the text field, you can apply multiple filters simply by providing a space separated list of all the filters you would like to use. Click on the "Filter" link for more information.

Opening text transitions

The following options specify the initial state of each text fragments before they start animating toward the joint whole word. Please note, that this kind of transitions are only visible, if the type of the content is text.

The Animate parameter is also a very spectacular option for the layers. If you have text in it, then you can set text-based animations for that. Here are the available options:

• lines ascending
• lines descending
• lines random
• lines center to edge
• lines edge to center
• words ascending
• words descending
• words random
• words center to edge
• words edge to center
• chars ascending
• chars descending
• chars random
• chars center to edge
• chars edge to center

The OffsetX and OffsetY shifts the starting position of text nodes from their original on the horizontal/vertical axis with the given number of pixels. Use negative values for the opposite direction. Percentage values are relative to the width/height of this layer. The values 'left' and 'right', or 'top' and 'bottom' position text nodes out the staging area, so they enter the scene from either side when animating to their destination location.
In these parameters by listing multiple values separated with a | character, the popup will use different transition variations on each text node by cycling between the provided values.

With the ScaleX and ScaleY scales text fragments along the X (horizontal) and Y (Vertical) axis by the specified vector. Use the value 1 for the original size. The value 2 will double, while 0.5 shrinks text fragments compared to their original size.

Rotation & Skew

The Rotate parameter will rotates the text clockwise from the given angle to zero degree. Negative values are allowed for counterclockwise rotation. RotateX along the X (horizontal) axis, RotateY along the Y (vertical) axis.

With the SkewX and SkewY you can skew the layer along the X (horizontal) and the Y (vertical) axis from the given angle to 0 degree. Negative values are allowed for reverse direction.

Timing & Transform

You can set the starting time of this transition with the Start when option. Use one of the pre-defined options to use relative timing, which can be shifted with custom operations.

The with modifier helps you to set delay or play the animation earlier than the selected value above.

With the Duration you can set the length of the animation in millisecond.

Shift Time means that how many miliseconds pause will be between each animation.

Easings are the timing function of the animation. With this function you can manipulate the movement of the animated object. Please click on the following link to open easings.net for more information and real-time examples.

The Transform Origin is a quite important parameter for the animations. This option allows you to modify the origin for transformations of the layer according to its position. The three values represent the X, Y and Z axis in 3D space. OriginX can be left, center, right, a number or a percentage value. OriginY can be top, center, bottom, a number or a percentage value. OriginZ can be a number and corresponds the depth in 3D space.

With the Perspective parameter you can change the perspective of this layer individually if you are making 3D transitions.

Style properties

When the Fade option enabled the current layer not just animated from the set position, but faded as well.

Loop or Middle Transition

Repeats a transition based on the options below. If you set the Loop Count to 1, it can also act as a middle transition in the chain of animation lifecycles. As the available options are quite similar to the Opening Transition settings, you will find the extra settings description here.

Timing & Transition

The Count parameter means the number of how many times will this animation be played. Set 0 to infinite, and set 1 to play that only once, and create a middle animation in that mode, otherwise that we be a loop.

With the Wait option, you can set how many delay will be between each cycle in milliseconds.

By enable the Yoyo will allow reverse transition, so you can loop back and forth seamlessly.

Ending Text Transition

These settings are the same as the Opening Text Transition, but these will refer that what will happens with the text only when the selected events happened.

Ending Transition

The following options will be the end values where this layer animates toward when it leaves the popup canvas. The settings are quite similar to the Opening Transition settings, so those won't be described again.

Hover Transition

Plays a transition based on the options below when the user moves the mouse cursor over this layer. The settings of this transition type is also similar to the Opening Transition, so only the differencies will be described in details.

Timing & Transform

Under the Duration option, you can find the Reverse parameter, which refers for the back animation, when you move your mouse from the layer, and the hover state will be transformed back to normal. With that option you can set the duration of that animation, and you can also set different Reverse Easing as well.

Parallax Transition

Select a parallax type and event, then set the Parallax Level option to enable parallax layers.

With the Parallax level option you can specify the level of how the parallax effect will take on this layer. This can start when you move your mouse over the popup, or when you scroll down the page, based on the setting you made in the Page options / Parallax default. The higher value the more movement.

The other settings are already described in the page options, you can find them there:

Other options

Here you can find settings about layer visibility. Normally a layer is only visible on the current page, but you can show that on the other ones as well, so it will behave a static layer, and will never animate out. This could be useful, if you would like to keep some text or data always visible on all pages, and only change the other part of the pages. Another option is also can be found here, called Play by Scroll Keyframe. This means that will pause when this layer finished its opening transition. If you have more layers with this setting enabled, then you need to scroll again, to play the next layer, and so on... This could be useful if you would like to create a gallery, or something where you would like that the user run through on the whole popup.