Interactivity with Readymag: 6 features to catch all eyes
Learn how to use the most advanced interactive options in Readymag—instructions are paired with gorgeous examples and tips from our designer.
People engage more with interactive content and tend to get a fuller experience when a website offers a story rather than bare information. With the right tool and a bit of imagination, you can quickly turn even a PDF-like page into an entire interactive journey—here’s how, with Readymag. Also, catch some handy tips from our designer, Denis Deviatko.
Default Readymag animations
What: Readymag animations can liven up all widgets except for Hotspot and Maps. While those animations can be basic if you need them this way, you can bring any of your ideas to life by combining the elemental moves into multistep interactive stories.
How: Select how your animation will appear: on Load, on Click or Tap for mobile, on Hover/Hold for mobile, and on Scroll. Animation can be initiated not only by an animated widget itself, but also by another trigger widget—up to 20.
Then, choose the effects you want: when animated, your widget can move, change opacity, rotate, or scale. For the Move animations, you can turn on the Bézier curves in the Animation panel and tweak the movement path to your liking by pulling the handles. Speed ease-ins and ease-outs for the effect also have curve controls.
Combine the effects using steps—assign a new effect type to a new step and customize its parameters: duration, delay, easing, and loop.
Lottie animations
What: Lottie is a lightweight and swift vector animation that can be simply embedded into a website by just pasting a link or uploading a file.
How: You can craft your own Lottie animation in Adobe After Effects with special plugins or use the native Lottie Creator. Also, you can find pre-made animations for any occasion on Lottie’s website and on the web in general.
Once added, your Lottie animation will be static in the Editor. To see how it will behave on a published website, click on Lottie Playback in the widget settings and then click Play. Also, within Readymag, Lottie settings allow you to decide on playback speed, loop your animation, crop the timeline, set playback direction, and add a delay—the controls appear in the Lottie Playback, Animation, and Interaction settings.
Video
What: Upload any high-resolution video directly to Readymag and customize how it looks and plays. You can also add a video to your website background.
How: The basic things you can do with video are set it for autoplay, mute it, loop it, and add a thumbnail. Don’t forget that the Video widget is still a widget, which means you can tweak its borders, radius, and opacity or make it draggable. But if you want to go further with customization, you have several options:
Custom video controls are switched on by default: they allow you to choose icons or texts to play and pause videos. Custom controls can be placed wherever you want or even tied to the cursor position. You can adjust the controls’ color and size and hide them during playback. You can also create your own controls: add custom play and pause icons, set them as triggers, and configure them to trigger play and pause with Hotspot and Animation. However, with custom controls, your video won’t have a timeline, volume slider, or full-screen play option. If you need any of these, you can easily switch to default browser controls.
For the video background, you can upload an MP4 file, the size of which depends on your Readymag plan. The video will be automatically looped, but you can disable it in the Background settings.
Shots
What: The Shots widget allows you to upload a sequence of images, which will then start to move based on users’ actions. Shots help control animation frames more precisely and create animated objects with transparent backgrounds.
How: Select an array of PNG and JPEG files you’d like to play together. They’ll be uploaded in the order you store them on your computer and have their original size and resolution. You can also upload a video instead of images.
Then, choose the playback option: Move/Touch on mobile, Hover/Hold on mobile, Click/Tap on Mobile, or Scroll.
Hotspot
What: Hotspot is perfect for creating popups, burger menus, footnotes, notifications, creative UI elements, or adding up to complex narratives.
How: Each Hotspot widget consists of two elements: the Icon and the Popup. You can choose or upload any icon to serve as an initially visible Icon, while only text and images can appear in the Popup, which is displayed when the Icon is activated. Both the Icon and the Popup can be placed anywhere in your layout.
Draggable
What: Make elements draggable to let your website visitors participate in forming the layout. This is a fun option that can also be used for gamification.
How: You can make any widget—except for Video, Music, and Google Maps—draggable on Click and Drag, or Tap and Drag for mobile. However, if you’re familiar with the Code widget, any multimedia content can go draggable.
Feeling inspired by the examples and tips? It’s your sign to try creating complex interactive websites yourself. Here’s a wide knowledge base so that you’ll never get lost on your Readymag journey.