What is an Interaction? 

Interaction is any kind of movement or interactivity between a user and a website. For example, an interaction can happen when an element changes position or scales up and down on scrolling the page. 

Interactions consist of two things:

• Trigger
• Animation

Trigger: A trigger is what starts or continues the animation. It can be clicking, scrolling, hovering, moving the mouse, or loading the page 

Animation: Animation is the effect that executes on the trigger. 

Object/Trigger Selection

In terms of triggers, there are two categories:

Element: This triggers an animation when interacting with an element. 

Page: This triggers an animation when there is a change in the page state. 

In Droip, you can choose the object (element or page) to which you want to add the interaction. 

Element Trigger

As we mentioned, an element trigger triggers an animation when interacting with an element. Element triggers can animate an element or multiple elements on the canvas. You can also select an element for the trigger and then a different element to animate on that trigger.

The type of element triggers are: 

• Mouse click (tap): This trigger initiates an animation when the user clicks or taps on the element.
• Mouse hover: This trigger initiates an animation when the user hovers their mouse over the element.
• Mouse move over element (continuous): This trigger initiates an animation when the user moves their mouse over the element, and the animation continues as long as the mouse remains over the element.
• Scroll into view: This trigger initiates an animation when the element becomes visible on the screen as the user scrolls the page.

To add an element trigger in Droip, from the Interaction panel on the right sidebar, Select Element and then select the element or group of elements you want to animate.

Page Trigger

Page trigger sets off an animation when there is a change in the page’s state. A page trigger can be used to create interactive elements, such as pop-ups, animations, or form submissions, that are triggered by a user’s actions on the page.

The type of page triggers are:

• Mouse move on viewport: This trigger initiates an animation or interaction when the user’s mouse moves within the browser’s viewport.
• When page is scrolling: This trigger initiates an animation or interaction when the user is scrolling through the page.
• Page load: This trigger initiates an animation or interaction when the page is first loaded in the browser.
• Scroll into view: This trigger initiates an animation or interaction when an element becomes visible on the screen as the user scrolls the page.
• Page scrolled: This trigger initiates an animation or interaction when the user scrolls the page up or down.

To add a page trigger in Droip, from the Interaction panel on the right sidebar, Select Page. 

Setting Up the Trigger

Once you have selected the element or page you want to add interaction to, it’s time to add to configure the trigger. 

Trigger an animation on specific breakpoints

To trigger an animation on specific breakpoints, click on the three dots icon beside the Trigger as shown in the screenshot below.  

From here you can select the devices you want the animation to occur. You can also select a custom breakpoint from the Custom Breakpoints drop-down. 

Apply animation on all elements with the same class

If you want to trigger an animation on all elements with the same class, you can set an interaction on an element and apply it to the class of that element. To do that,

1. First, you would select an element on which you want to set the animation.
2. Then, you would set the animation properties, such as the type of animation, duration, and delay.
3. Next, you would set the interaction on the selected element, such as a hover or click event.
4. Finally, you would select the option to “Apply to class” and choose the class of the selected element from the drop-down list.

By applying the animation to the class rather than to the individual element, all elements of that class will have the same animation applied to them when the interaction event is triggered. This can be useful when working with multiple elements that have the same design or functionality, as it allows you to set the animation properties once and have them apply to all elements with that class, rather than having to set the properties for each element individually.

Configure the Trigger

When you select a trigger, you will get the option to configure the trigger. The options you get depend on the type of trigger selected.

For example, when you select “Mouse Click (tap)” as the trigger, you will get the option to set the response for the trigger on the 1st click and the 2nd click. This means you can set different animations or interactions to happen on the first click and a different set of animations or interactions to happen on the second click.

Setting Up the Animation

Next, to add an animation, click on the Select From Library option. This will add a new animation item here which you can click to access the Animation Settings.

Animation Categories and Types

On the top-right corner of this panel, you’ll be able to select the type of animation you want to add. Options include:

Basic: Basic animations are the simplest animations that are in the other categories. Examples of basic animations include Fade in, Back in down, Bounce in right , etc. These basic animations can be combined or customized to create more complex and sophisticated animations, depending on the needs and goals of the design. 

Entrance: Entrance animation refers to how the element being animated will enter the screen or view. For example, it could slide in from the left, fade in, or expand from a small size to a larger size.

You can choose from 41 different entrance animations, some of which are listed below:

1. Back In: Back in up, down, left, right
2. Bounce In: Bounce in, bounce in up, down, left, right
3. Fade In: Fade in, fade in up, down, left, right, etc
4. Flip In: Flip, flip in x, flip in x
5. Light-speed In: Light-speed in right, light-speed in left
6. Rotate In: Rotate in, rotate in down left, down right, up left, up right
7. Zoom In: Zoom in, zoom in up, down, left, right,
8. Slide In: Slide in up, down, left, right

Each animation type, such as fading or zooming, has several variations to choose from, such as fade in up or zoom in left. These variations can be used to create different effects and add visual interest to the animation.

Exit: On the other hand, the Exit animation refers to how the element being animated will exit the screen i.e. the viewport. Examples include back out, fade out, zoom out, and more.

📝 Tip: For every entrance “in” animation you’ll find a corresponding exit “out” animation.

Special: Special animations refer to the ones that may not be included in the basic, entrance, or exit categories. This includes Hinge, jack in the box, roll in, and roll out.

Attention: This option refers to a way of drawing the attention of the user towards the animated element, for example by blinking or flashing.

Animation Settings

Once you’ve selected your preferred animation, you can configure the following for this animation:

Duration: The Duration property is used to specify the length of time the animation will take to complete. You can specify the time in seconds or milliseconds

Delay: This option refers to the amount of time that will pass before the animation begins, measured in seconds or milliseconds. Say you want to run the animation for 1 second, but then delay it for 4 seconds before running again. You can do that by using Delay. 

Repeat Count: Using Repeat Count, you can specify the number of times your animation will repeat before stopping. 

Timing Function: This option refers to how the animation will progress over time, such as linearly or exponentially.

Direction: This option refers to the direction that the animation will take, such as left to right or top to bottom.

Fill Mode: This option refers to how the animation will affect the element being animated after the animation has been completed. For example, the element could be set to retain its end state or to return to its original state.

Animation Type: As mentioned earlier, some animation categories like entrance and exit have further sub-categories which you can select from this dropdown. After that, you can choose your preffered animation.

Custom Timing Editor

The Custom Timing Editor is a powerful tool that allows you to fine-tune the progression of your animation transitions. With the Custom Timing Editor, you can define a custom easing curve and set keyframe values to create a more natural and dynamic animation.

On the Timing Editor, on the left, you will find more predefined Timing Function styles. The Default tab shows all the styles but you can also click on the other tabs to see the styles of only one category. 

The different timing function styles available in the editor are:

1. Ease In: This style starts the animation slowly and gradually speeds up. This is useful for creating a sense of acceleration.
2. Ease Out: This style starts the animation fast and gradually slows down. This is useful for creating a sense of deceleration.
3. Ease Both: This style starts the animation slow, speeds up in the middle, and then slows down again. This is useful for creating a more natural and dynamic animation.
4. Spring: This style creates a spring-like animation, where the element oscillates back and forth. It is useful for creating a bouncy or elastic effect.

Each of these timing function styles can be used in different scenarios, depending on the type of animation you want to create. For example, you can use the Ease In style for a button that grows when hovered over, or the Spring style for a logo that bounces when the page loads. 

By experimenting with different styles, you can create unique and engaging animations that will make your website stand out.

Here’s how to use the graph to create different timing function styles: 

1. Ease In: To create an “Ease In” style animation, start by setting the keyframe values at the bottom of the graph. This will create a slow start to the animation. As you move toward the middle of the graph, gradually increase the keyframe values to create a sense of acceleration.
2. Ease Out: To create an “Ease Out” style animation, start by setting the keyframe values at the top of the graph. This will create a fast start to the animation. As you move toward the middle of the graph, gradually decrease the keyframe values to create a sense of deceleration.
3. Ease Both: To create an “Ease Both” style animation, start by setting the keyframe values at the bottom of the graph for a slow start, then gradually increase the keyframe values to create a sense of acceleration. As you reach the top of the graph, gradually decrease the keyframe values to create a sense of deceleration.
4. Spring: To create a “Spring” style animation, start by setting the keyframe values at the top of the graph. Then create two peaks and troughs on the graph, where the animation oscillates back and forth.

You can also adjust the duration of the animation by dragging the endpoints of the graph.

It’s also important to preview the animation by clicking on the “Preview” button to make sure it works as expected before publishing.

Custom Response

You can also create a Custom Response for your trigger instead of selecting a preset animation from the library. This is handy because using Custom Responses, you can target any element and alter its attributes.

To do this simply click on the Custom Response button to add a new response. Then, click on this new item to open the Custom Response Editor. Here you’ll find the following:

Timeline: The Timeline will display all of the animations added to this trigger along with their duration. To increase this duration, simply click and drag away the ending time.

Action: Action icons are located above the Timeline and are basically style attributes that you can alter for your target element as a response to the trigger. Options included are:

• Color
• Background Color
• Border Color
• Move
• Scale
• Size
• Rotate
• Skew
• Fade
• Filter

Repeat Count: Define how many times you want the animations here to be repeated. Setting this as one means no repetition. You can also click on the Infinity symbol to repeat the animations continuously.

Target Element: Elements you target will appear on the left side of the Timeline. To target one, simply select it from the canvas.
Then, while it’s selected, choose the Action you want to use and click on Add to add it to the Timeline.

Then, clicking on this animation on the timeline will give you the option to set its values. 

Make Initial State: While the animation is selected, you’ll also be able to enable this option to make this the starting state of the element.

Edit Transition: Click on this button to access the Transition settings which can help make your response smoother. (You can also drag the ends of the animation on the timeline to edit this.)

Lastly, we have a few other options at the very top of the Custom Response Editor. These are:

Rename: Click on the pencil icon located in the window’s top-left corner to rename your custom response. 

Live Preview: Enable this option to constantly see the changes you make on this panel live on your canvas.

Preview: Click on this button to replay the animation response on your canvas.

Undo: Click on the reverse arrow icon to undo an action.

Duplicate: Make a copy of this animation. Right-click on the animation on the timeline to access this option.

Delete: Remove this animation. Right-click on the animation on the timeline to access this option.