Please note, this is a STATIC archive of website www.themepunch.com from 28 Sep 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Layer Animations & Timeline

When setting your layer animations, choose from one of the 30+ animation templates that’s closest to your desired look.  Then this will act as a “preset” of settings that can adjusted further.

animation-template

After adding a layer to the slide, and selecting it in the preview canvas, when you click the “Animation” tab, you’ll see a live preview of the layer’s animation.

Click the “Pause” button to stop the admin preview.  And then click the same button to preview your animation once again.

layer-settings-animation

Every content layer has a “Start” animation that will happen when the layer first appears, and an “End” animation for when the layer disappears.

The actual time when these animations take place will depend on the layer’s “Visible Timeline”, which is set in the Layers Timing and Sorting part of the slide’s admin.

layer-animation-start-end
layer-animation-basic-settings
  • Special Note:
    Select "No Animation" from #1 above if you do not want your layer to animate.
Legend:
  • 1. Animation Template
  • 2. Animation Easing
  • 3. Animation Speed
  • 4. Split Animation Text
  • 5. Split Animation Delay

1. Animation Template

Choose from over 30+ prebuilt animations.  And preview each option by clicking the “Play” button next to the “Animation” tab.

2. Animation Easing

“Easing” is what gives a web animation that “real life” type of movement.  Choose between over 35 options to see which one you like best.  The most commonly used options are “Power2.easeOut”, and “Power3.easeOut”.

3. Animation Speed

How long the animation will last from start to finish in milliseconds (1000 = 1 second).

An optimal number will depend on your chosen animation.  For example, when using a simple “Fade”, a number between 300-500 is usually best, but for more complex animations (especially when using an “easeInOut” easing), a higher number such as 500-1000 will work well.

4. Animate by Words, Letters or Lines

For text-based layers, you can animate words, letters or lines one by one with this option.

Choose “No Split” to just animate the entire layer at once.

5. Split Animation Delay

When animating by words, letters or lines, the essence of the effect is that each will animate one after the other.  The delay value here is the amount of time that will be used for this sequenced animation.

The delay value is in milliseconds.  A number between 5-30 usually works best.

1.2 Advanced: Opacity, Transforms & Masking
back to menu

Click the “+” button as shown in the following screenshot to edit the “Start” or “End” animation’s advanced settings.

START Animation Settings = Animate FROM these settings

END Animation Settings = Animate TO these settings

layer-animation-advanced-settings

X = Horizontal Axis

Y = Vertical Axis

Z = 3D Axis

Choose “Inherit” to honor the animation’s original settings, “Custom” to enter a specific pixel value, or try out one of the other options to see which one you like best.

animation-offset

Adjust the animation’s Opacity (i.e. “transparency”) level.

Choose “Inherit” to honor the animation’s default setting, “Random” to always randomize the value each time the slide is shown, or “Custom” to enter a special value (a number between 0-1).

animation-opacity

1. Animate 3D rotationX (rotate around x-axis)

2. Animate 3D rotationY (rotate around y-axis)

3. Animate 2D Rotation (circular, non-3D rotation)

Choose “Inherit” to honor the animation’s default setting, “Random” to always randomize the value each time the slide is shown, or “Custom” to enter a special value (a positive or negative number usually between 0-360).

animation-rotation

1. Animate scaleX (layer’s width)

2. Animate scaleY (layer’s height)

Choose “Inherit” to honor the animation’s default setting, “Random” to always randomize the value each time the slide is shown, or “Custom” to enter a special value (a number between 0-1).

For a traditional “Zoom” type animation, set the “scaleX” and “scaleY” parameters to the same values.

animation-scale

1. Animate skewX (horizontal angle)

2. Animate skewY (vertical angle)

Choose “Inherit” to honor the animation’s default setting, “Random” to always randomize the value each time the slide is shown, or “Custom” to enter a specific amount of pixels to skew the layer by.

animation-skew

X = Apply a horizontal mask for the animation

Y = Apply a vertical mask for the animation

Apply a mask to the layer, which will result in the animation only becoming visible once the layer is positioned inside the masked area.

For a good understanding of how masking works when applied to animations, click here to see how a generic animation looks with masking applied, and here to see a generic example of the same animation, but without any masking.

animation-masking

When editing your animations, you’ll start of with a predefined animation template, and additional settings adjustments you make will only be applied to the current layer.

However, once you’ve made adjustments for a specific animation, you can save your adjustments as a new “Animation Template” to use for additional layers.

save-animation-template

1. Save: Override the current preset animation with your adjusted current settings (original animation template will be permanently modified).

2. Save As: Create a new Animation Template based on the current settings (original predefined Animation Template will not be overridden).

3. Rename: Change the title of the currently selected Animation Template for your own convenience.

4. Reset: Revert currently adjusted settings to the predefined Animation Template’s original settings.

5. Delete: Permanently delete the current predefined Animation Template (can not be undone!).

save-animation-options

2. Loop Animations

back to menu

Apply continuous, animated movement to the layer even after it’s initially animated into view.

loop-animation

1. Loop Animation

Visual Examples: Pendulum | Slide Loop | Pulse | Wave

2. Loop Speed

The amount of time the animation should last before it loops again in seconds.  A number between 2-5 usually works best.

3. Loop Easing *

“Easing” is what gives a web animation that “real life” type of movement.  For Loop animations, try one of the “easeInOut” options such as “Power1.easeInOut” for a smooth, continuous motion.

* not available for “Wave”, as this animation only works best with a predefined easing.

Loop Parameters
loop-pendulum
  • 1. Starting Rotation
  • 2. Ending Rotation
  • 3. Rotation X point
  • 4. Rotation Y point

1-2. Starting/Ending Rotation

Choose the rotation degrees for the start and end of the looped animation.  Use a negative number for the “start” value” and a positive number for the “end” value.

3-4. Rotation X/Y point (transform-origin)

Percentage based values that will act as the axis point for where the layer rotates from.

Loop the layer from one point to another.  “X” values are the horizontal plane (left to right), and “Y” values are the vertical plane (top to bottom).

loop-sides

Adjust the Zoom Start (#1) and Zoom End (#2) parameters to continuously zoom the layer in and out.  A value of “1” equals 100%, so “1.5” would be 150%, etc.

loop-pulse
loop-wave
  • 1. Rotation X point
  • 2. Rotation Y point
  • 3. Start Angle
  • 4. Radius of Rotation

1-2. Rotation X/Y point (transform-origin)

Percentage based values that will act as the axis point for where the layer rotates from.

3. Start Angle

Wave animations rotate on a 360 degree circular loop.  The “angle” value here would be the starting position for the animation when this loop begins.

4. Radius of Rotation

Defines a pixel-based orbital area that the layer will animate around.

The Layers Timing & Sorting section is a visual representation of the slide’s animation sequence.  It’s also where you can adjust the z-index depth for each Layer (i.e. place a Text Layer on top of an Image Layer, etc.).

layers-timing-sorting

1. Play/preview the current slide’s animation sequence (slider’s main background and layers).

2. Reset the timeline so it can be previewed from the start.

3. Drag with your mouse for a slow motion / manual preview experience.

4. Increase/decrease the slide’s main delay.

5. Horizontal scrollbar to help view large timelines.

6. Drag to adjust Timeline section view.

Use the editor shown in the screenshot below to enter precise numbers for the Layer’s animation.

layers-timing-sorting3

1. Start Time: The time when the Layer will begin to animate into view.

2. End Time: The time when the Layer will begin to animate out of view.

3. Start Speed: The total duration of the Layer’s initial animation when it comes into view.

4. End Speed: The total duration of the Layer’s final animation when it transitions out of view.

layers-timing-sorting4

Drag the Layer’s timeline left and right to position the layer’s “visibility” within the lifetime of the current slide.

In the above example, the “Image Layer” is set to animate in at the “1.5 second” mark, and then will animate out at the “5.5” second mark.

layers-timing-sorting5

1. Drag to adjust the Layer’s “Start Time” (when the content will animate into view)

2. Drag to adjust the Layer’s “Start Speed” (the duration of the initial animation)

3. The Layer will be in a static state during this time.

4/5 Drag to adjust the Layer’s End Time & End Speed.

layers-timing-sorting6

The Layer will not animate out until the slide officially changes.

The Layer will animate out BEFORE the slide changes.

  • Important Note:
    For "Single Slide" sliders (i.e. Hero Scene), always set the Layer to
layers-timing-sorting7

Drag the listed Layers with your mouse on top of one another to sort the Layers, setting their z-index/stacking order.  Layers that are hyperlinked should always have a higher z-index than other layers (i.e. positioned below other Layers in the list).

layer-animation-sync
bulk-timing-adjustments
layer-animation-syncs
  1. Shift Start Time *

    Show selected Layers sooner or later in the timeline (+/-)

  2. Adjust to Start Time *

    Shift the collective timeline to a specific point

  3. Adjust to Start Time / Delays *

    The same as #2 above, but also apply even delays for when each animation starts.

    For example, if a delay of 1000 is chosen, when the first animation has completed, exactly one second will pass before the second animation starts.

  4. Adjust to Start Time / Overlap *

    The same as #3 above, except Layer animations will play sequentially, meaning as soon as one Layer has animated in completely, the next will begin.

  5. 'In' animations finish at

    Choose a point in the timeline where all animations will officially complete.

    The Layer's START time will not be changed, which means the animation time is what will be adjusted to reach the new value.

  6. 'Out' animations start at

    Choose a point in the timeline where all animations will officially begin to animate out.

    The Layer's END time will not be changed, which means the animation time is what will be adjusted backwards to reach the new value.

  7. Adjust to Start Time

    Have all selected Layers animate IN at the same exact time.

  8. Adjust to End Time

    Have all selected Layers animate OUT at the same exact time.

* Only available when more than one Layer is selected