Skip to content
Menu
hatch
  • inspiration
    • community gallery
    • blog
    • templates
  • help
    • forum
    • tutorials
    • faqs
    • customer support
  • about
    • our team
    • newsroom
    • careers
    • contact
hatch

How to make an interactive animated e-card

Posted on May 8, 2023

To celebrate Mother’s Day, we’ve created an adorable virtual card in the style of a photo gallery you can remix. Swap out your own photos and messages for mom or anyone you want to share a caring note with! This step-by-step guide will walk you through how to make an interactive animated e-card that will surely delight the recipient. 

How to make an interactive animated ecard that looks like a gallery wall

Step 1: Open up the remixable project here. In the style of a gallery wall, each of the images reveals a message underneath or triggers an effect when clicked on. Above are the different states of the photos and stickers, side by side. You can swap out stickers, change text and more. The elements you can edit easily include:

  • Each picture frame
  • The top and bottom images inside the frames
  • The text notes
  • Animated stickers
  • Background image
  • “Tap around” text
  • How the elements behave; right now they are all triggered on a click

In the upper right corner, you’ll see the editing pencil icon which will open the project in Hatch. When you start to edit, Hatch will automatically create a new version for you to work on directly. 

To start making changes, open up the objects button located at the bottom left of your screen (at the red arrow in the image below). With the objects tree open, you can see each element you can edit. 

Opening the object tree to view individual elements

How to change the background image

In the image above, “wallpaper” is selected within the object tree (with blue highlight) and you can see selection handles on the wallpaper. When you select the wallpaper, a toolbar will appear above with the option to replace the image.

If you aren’t sure which layer you’re replacing, the visual thumbnail will help. To change the wallpaper background, simply click on “replace.” A window appears that allows you to upload an image or to pull an image from sites like Unsplash or Pixabay.  

How to choose a new background image

How to change the photos

There are three photos in this project. The top left photo is called “field-photo” in the object tree and is selected in the image below. Just like the background image, you can replace the photo using the toolbar that appears when the photo is selected. When you click on “replace” you’ll see the option to upload your own file. Repeat this process for the other two photos in the card. You can see them in the object tree called “kite_photo” and “bw_photo.”

How to replace the photos

How to change the stickers

The stickers bring charm and delightful animation to the card. All of the frames and mini animations are actually stickers. When you’re editing, you’ll notice some of the stickers appear layered. This is because they have transparent backgrounds so you can see what’s beneath them. You can change the stickers using the same “replace” button as the photos and background. 

How to change the stickers in the card

However, the secret to changing the images when they are clicked is that the top image is the picture frame itself with transparent “glass” in the middle. Select the picture frame, like the gold circular frame in the top left, shown below. When you click over to the Actions menu, you’ll see there are two actions that occur “on click.” When you click the frame, both “cooking_sticker” and “thank_you_mom” sticker will toggle between being visible and not visible. You can replace both the stickers and they will keep their actions.  These actions are what make a regular photo page an interactive animated ecard!

How to see what actions are triggered on an image

To change what is triggered when clicking that frame, expand the options by clicking on the little carrot next to the trash, shown below. 

How to change what is triggered when clicking

How to change the notes

There are two notes in this project, behind the field photo and the kite photo. If you select one of the notes from the object tree, you’ll see the selection handles but you’ll notice the note isn’t visible. You’ll need to bring the note above the photo and the frame to edit the text. Click on the “stack” button shown below to change the object position and bring the note to the front. 

How to find the note under the photo
How to change the position and order of the objects

When you bring the note to the front, you’ll see the position of the note object move to the very bottom of the object tree which shows it is now the very top layer. Select “Adjust” and you’ll be able to edit the text as well as the color and font. 

How to edit text in an interactive ecard

Once you’re done editing the note, use the same position selector to send the note back behind the frame and the photo. If you’re not sure about the position, you can also manually drag the note object from the object tree and put it just in front of the background wallpaper. 

We’ve scattered some other stickers around under frames and around pictures. Don’t be afraid to click around in the object tree to see where they are and how they are behaving. Open up that action panel to see how things are triggered off of one another. Experiment and play around as you make an interactive animated e-card. We can’t wait to see what you create!

Related

  • cool website effects
  • interactive webpage
  • interactivity
  • no code
  • webpage effects
  • faqs
  • trends
  • tutorials
  • How to make a personal app with custom widgets
  • What’s new in Hatch
  • Made with Hatch: the community showcase
  • How to add gravity effects to a webpage with no-code physics
  • How to turn a Hatch webpage into a web app

add links app development bio link casual apps community communityshowcase community work content cool website effects custom apps design basics digital experience ecommerce embeds falling animation features form gravity scenes hover animations inspiration interactive effects interactive graphics interactive webpage interactive website interactivity invitation landing page link-in-bio link in bio links page links pages low code multipage websites new media no code online shops online store parallax scrolling personal apps portfolio sites portfolio website programmability promote web design webpage effects

©2023 hatch
 

Loading Comments...