Making "The Teaser" Effect

Nico, CX Specialist | Zuuvi 

Keeping Viewers Engaged

So many options, so little time. That is usually the designer's challenge.

In Creative Corner, I'll inspire you to create the coolest ads. This example shows how to make a nice effect on a static image. I call it "The Teaser" because the image is being revealed piece by piece, keeping your viewers engaged for longer.

Alright alright alright, but how do you do it? I'll tell you 🤓
See the video-guide or the step-by-step guide below.

Step-by-step Guide to "The Teaser" Image Effect.

• First thing, add an image that covers the whole format.

• Add rectangles as covers. In the example, I have added 5 rectangles, but you can always add more or less depending on which effect you want.
  Make sure to make the covers the same size. The example takes part of a format in size 930x600 and each rectangle (covers) are 170x600 px. Place them symmetrical with the exact amount of pixel space.

• Add other sizes of rectangles as dividers between the covers, so it covers the whole image. I have added four in size 25x600 px.

• Now add the animations. Start with animation for the covers.
  Add "Resize Y" to each of the cover layers.
  See the settings for the animation below. I have mixed the start time to make a nice reveal of the image.
  
  

• Then add animations to the dividers. Add the Resize X to each layer. I want the dividers to animate at the same time, so the start is the same on all four layers. See the setting for that animation below.

   

What you do next, is up to you. I made the image stay for a second, then pushed in a new image, and continued that effect with 5 different images showing different destinations 🌟

That's it! Happy designing.