Download a demo file by clicking here

Overview:

The stacks you place inside parallax warp can be rotated, moved(translated), and made transparent – so that when the user scrolls down, and the stack comes into view, it triggers the animation that un-rotates it, moves it back to it’s original spot, and makes it 100% opaque. Then, if the user scrolls back up the page, the animation is played in reverse as the stack goes out of view (unless ‘Only Trigger Once’ is checked on). You can place any content you like inside of Parallax Warp, text, images, videos, other stacks, etc… You can even put Parallax Warp inside of Parallax Warp for some neat effects (that was used on the preview page for the Subject Line’s 1, 2, and 3 – and the content inside of them).


Animation Theme:

The Animation Theme comes with 14 pre-made animations, or you can choose ‘custom’. When you select custom, you get some new options that control where the stack is positioned and how it’s rotated before it comes into view. You can move and rotate the stack in all 3 directions – X, Y, and Z. The X axis goes left to right, the Y axis goes up and down, and the Z axis goes forwards and backwards. (When you select one of the pre-made themes, instead of the translation/rotation options, there will be some text showing you what the translation and rotation values are. You can use those values to replicate the effect in the custom settings).

Translate and Rotate:

(These options are only visible when the Animation Theme ‘Custom’ is selected.)

Translate:

Translate just means to move. You can move it up and down (Translate Y), left or right (Translate X), or forwards and backwards (Translate Z), and remember, this is where the stack is positioned before it comes into view.

Rotate:

Rotate is a bit less intuitive…

The Y axis is up and down, so when you rotate around the Y axis, the stack will spin like a top on a table.
RotateZ

The X axis goes left to right, so when you rotate around the X axis, the stack will spin like a wheel moving towards you or away from you.
RotateX

The Z axis goes forwards and backwards, so when the stack spins around the Z axis, it moves like a wheel going left or right.
RotateZ

Once the animation is finished, the stack will be back in it’s normal position – this is the same as:
Translate X = 0
Translate Y = 0
Translate Z = 0
Rotate X = 0
Rotate Y = 0
Rotate Z = 0

Offset Mode and Offset By:

The Offset Mode is how it knows when to play the animation. Auto will trigger the animation when the bottom of the stack is within the browser window, but in Manual mode you can set a pixel value (Offset By) and it will wait until the stack is that many pixels away from the top of the browser window to play the animation.

Only Trigger Once:

Only Trigger Once prevents the animation from occurring more than once, it will only play the first time the stack comes into view, and it wont play the animation in reverse when the stack goes back out of view.

Opacity:

Opacity is how see-through the stack is, 0 = not visible, 1 = completely visible. Remember, this is the Opacity BEFORE the stack is in view. When the stack comes into view, the Opacity animates to 1. So to achieve a fade in/fade out effect, set the Opacity to 0. But to remove that effect, set the Opacity to 1.

Perspective:

Perspective should usually stay at the default value for most users, but I wanted to include it for advanced users. The lower the perspective value is, the more 3D everything looks. The higher the perspective value is, the more flat everything looks. I find that 2500 is a good middle value for most purposes.

X Origin and Y Origin:

Every time you rotate something, you need a point of rotation. By default, the X Origin and Y Origin are set to 50% which means that the point of rotation is exactly in the center of the stack. For X, 0% is the left hand side, and 100% is the right hand side; for Y, 0% is the top, and 100% is the bottom. This means that if you wanted a stack to swing in like a door (where the hinge is on one side or the other), you would simply set the X origin to either 0% or 100% depending on which side you want it to come from, Then you would need to set the Y rotation because that’s the axis that goes up and down, and rotating around that axis (with X Origin at 0% or 100%) moves the stack like a door.

Animation Length:

Animation Length is just how long it takes for the animation to play all the way through, pretty self-explanatory.

Animation Easing:

Animation Easing is a bit more complex. Easing is how it stretches and shrinks different parts of the animation, which doesn’t change how long the animation takes to play overall, but it does change the rate at which it plays at different points in the animation. Think of a car, it accelerates slowly, get’s to a maximum speed, then slows down before it stops (ease-in-out) – as opposed to just going from 0 to 60 instantaneously, until it reaches the end of the road and then suddenly stops back to 0 (none).

In a more literal sense:
Imagine if you need to take the number 0 and increase it by 1 until it reaches 90; but you want to do that with some style, so you decrease it by 1 until it gets to -10. Then you start increasing it by 1 until goes past 90, all the way to 100. And finally decreases by 1 until it’s at 90. This would be similar to the ‘Bounce’ option. You can always try each one out and find which one suits the specific animation you want.