Get to Know Ceros
In these video lessons, we'll review the general functionality of the Ceros studio including how to import assets, apply animations, interactions, and how to publish your final experience.
Understanding Ceros Analytics
In this lesson, we'll overview the Ceros analytics dashboard and how you can better understand the key performance indicators that can help you improve your content.
Search Engine Optimization (SEO) and Ceros
In this lesson, we'll dive into the various tools in Ceros that can help you optimize your content for search.
Importing Your Design Files
In this lesson, we'll walk through how to import design files from Photoshop, Illustrator, and Sketch files into Ceros.
Theme and Settings Panel
In this lesson, we'll review the different customization options available within the Theme Menu and Settings Panel.
Creating Buttons and Popups
In these video lessons, we'll review the general functionality of the Ceros studio including how to import assets, apply animations, interactions, and how to publish your final experience.
Creating Mobile Variants Using Adaptive Layouts
In this lesson, we'll take a look at how you can easily create different variants of an experience for Desktop, Tablet, and Mobile devices using the Global Layouts panel.
Create a Carousel
In this lesson, we'll review the steps to creating an image carousel using the Cycle Next and Cycle Previous interactions.
Creating Interactive Maps
In this lesson, we'll review one of the many ways you can create an interactive map in Ceros.
Creating Accessible Content in Ceros
In this lesson, we'll walk through how to leverage the accessibility tools and features in the Ceros studio.
Using Object States for Data Viz
In this lesson, we'll review one of the ways you can create an interactive Bar Chart in Ceros using Object States.
Creating Charts in ChartBlocks
In this lesson, we'll review how to create charts and graphs in ChartBlocks.
How to Use MarkUp
In this quick lesson, we'll walk through how to use MarkUp to streamline the process of giving and receiving design feedback.
Embedding 3rd Party Content and Forms
In this lesson, we'll review how you can use the Embed Object tool to embed 3rd party content such as videos, Google Maps, Spotify Playlists, Social Content, and forms.
Creating Interactive Charts
In this lesson, we'll take a look at how to create animated, interactive charts in Ceros.
Creating an Interactive Menu Bar
In this lesson, we'll take a look at how to create an interactive menu bar to set up some basic navigation within your experience.
Advanced Carousel
In this lesson, we'll build off of the previous carousel lesson to create a more advanced experience using the Show Target and Hide Others interactions.
Creating an Interactive Timeline
In this lesson, we'll review one of the many ways you can create an interactive timeline in Ceros.
Create a Looping Video Background
In this lesson, we'll explore how to make any video file function as a background element - as well as how to layer additional assets overtop for more unique visualizations.
Gating Content with Hubspot and Marketo Forms
In this lesson, we'll take a look at how you can gate multipage eBooks and long scrolling infographics using Hubspot and Marketo forms.
Creating a Slideshow
In this lesson, we'll cover how to create an automatic image slideshow within your experience.
Transcript
Now that we’ve covered the basics of setting up your canvas, we can get into the fun parts of bringing your experience to life. So to follow along with this lesson, go ahead and upload the build-along experience to your account.
As you can see in the final version, we’ve applied a few simple animations to give this piece a bit more character. The text subtly fades in, the clouds slide across the screen, and the arrow bounces to encourage users to scroll down. Since we’re only focusing on the animations in this case, there isn’t anywhere to scroll to, but you get the point.
Let’s start by selecting the text box and opening the “Animation” tab. You’ll notice there are two different animation triggers available, one for “on view,” which is when the object becomes visible, and the other for “on hide,” which is when the object is hidden through an interaction. We’ll cover the “on hide” portion in the next video.
In the animation menu, there are three main categories of animations, with a ton of customization options available. In this case, we're going to apply a simple “fade-in” animation and change the direction to “down.” We can play around with the easing section when we get to the clouds, but for now, let’s leave this on the default “soft ease.” In the delay and duration section, let’s set the delay to one second and leave the duration at the default .8 seconds.
As you can see in the preview, as we make any changes to these attributes, the preview will update automatically, which is a great way to see how your content is coming together.
Next up, let's apply an animation to both of the clouds on the right-hand side of the screen. To create the effect of the clouds slowly sliding across the screen, we’re going to apply a “slide in” animation, and change the direction to the right. To ensure the clouds move at a uniform speed, we can also turn off the easing option, and increase the duration to about 60 seconds to slow the clouds down.
The final object we want to animate is the arrow icon. A quick trick you can use is copying an animation from one object by right-clicking and then pasting that animation onto another. This gets us part way there, but let’s add in a secondary animation of “bob,” with a one second delay and a two second duration set to repeat. This will ensure the user knows they can scroll down. Giving the preview a quick refresh, you can see how even these subtle animations bring a whole new look and feel to the piece.
In the following lesson, we’ll explore how you can couple animations and interactions together to create even more unique effects.
Transcript
Now that we’ve covered the basics of setting up your canvas, we can get into the fun parts of bringing your experience to life. So to follow along with this lesson, go ahead and upload the build-along experience to your account.
As you can see in the final version, we’ve applied a few simple animations to give this piece a bit more character. The text subtly fades in, the clouds slide across the screen, and the arrow bounces to encourage users to scroll down. Since we’re only focusing on the animations in this case, there isn’t anywhere to scroll to, but you get the point.
Let’s start by selecting the text box and opening the “Animation” tab. You’ll notice there are two different animation triggers available, one for “on view,” which is when the object becomes visible, and the other for “on hide,” which is when the object is hidden through an interaction. We’ll cover the “on hide” portion in the next video.
In the animation menu, there are three main categories of animations, with a ton of customization options available. In this case, we're going to apply a simple “fade-in” animation and change the direction to “down.” We can play around with the easing section when we get to the clouds, but for now, let’s leave this on the default “soft ease.” In the delay and duration section, let’s set the delay to one second and leave the duration at the default .8 seconds.
As you can see in the preview, as we make any changes to these attributes, the preview will update automatically, which is a great way to see how your content is coming together.
Next up, let's apply an animation to both of the clouds on the right-hand side of the screen. To create the effect of the clouds slowly sliding across the screen, we’re going to apply a “slide in” animation, and change the direction to the right. To ensure the clouds move at a uniform speed, we can also turn off the easing option, and increase the duration to about 60 seconds to slow the clouds down.
The final object we want to animate is the arrow icon. A quick trick you can use is copying an animation from one object by right-clicking and then pasting that animation onto another. This gets us part way there, but let’s add in a secondary animation of “bob,” with a one second delay and a two second duration set to repeat. This will ensure the user knows they can scroll down. Giving the preview a quick refresh, you can see how even these subtle animations bring a whole new look and feel to the piece.
In the following lesson, we’ll explore how you can couple animations and interactions together to create even more unique effects.