FAQ
You need help?
Moveicon provides icons under the following one license: Creative Commons Attribution (CC BY) - this license enables you to download, use, copy, share, modify, and build upon the symbol as long as you follow proper attribution requirements.
You can use the icon for free as long as you attribute, or pay via a NounPro subscription, pre-paid credit or a 3€ fee (shared with icon designers) to not have to attribute.
Yes, once you've purchased an icon via a Moveicon subscription, pre-paid credit or a single 3€ purchase, it is yours to use for an unlimited amount of time. You do not need to maintain your paid subscription to use these icons in your work.
Yes, you can modify and build upon the symbol as long as you follow proper attribution requirements. You can use the icon for free as long as you attribute, or pay via a Moveicon subscription, pre-paid credit or a single 3€ purchase to not have to attribute.
You can either purchase a Moveicon subscription, use pre-paid credit or via a single 3€ purchase. Either way, buying the license lets you to use the icon for any purpose, even commercially, without giving the creator credit. We share the profits with creators to compensate them for their work when credit is not given.
If you choose to give creator credit to download an icon for free, then you need to follow these requirements:
The format should be “Icon name” by Creator Name, from the Moveicon. The icon name must be hyperlinked to the original source. If you can’t hyperlink in the medium you’re using the icon, then type out thenounproject.com as the source. This attribution must be listed next to the icon, below the icon, or somewhere on the project you create to properly reference the icon.
To make it easier, free downloads include a line of text with the creator credit. However, if you would like to credit the creator in a different way or are using the icon in a different medium, you can copy the line of text and place it where it's relevant.
Example 1: “Eiffel tower” icon by Argraphic from Moveicon.
Example 2: “Eiffel Tower” icon by Argraphic, from moveicon.com.
Lottie Player
Interactivity Guide
This is a quick demo for using the Lottie web player to add interactivity to your applications
Getting started
Requirements
The Lottie Web Player wrapper is required to use the interactivity library. Click here to view the repository for the player.
Installation
via yarn
yarn add @lottiefiles/lottie-interactivity
via npm
npm install --save @lottiefiles/lottie-interactivity
via cdn
src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"
Add Lottie component to your html dom.
id="firstLottie" src="https://assets1.lottiefiles.com/packages/lf20_M1JAO6.json" style="width:400px; height: 400px;">"
Configure library (put under script tags)
LottieInteractivity.create({
mode: 'scroll',
player: '#firstLottie',
actions: [
{
visibility[0,1],
type: 'seek',
frames: [0, 50],
},
],
});
The name of the player ie: 'firstLottie' in this example is the ID set to the lottie web component on the html page. Configration will contain an actions object. This object takes an array named actions which consists of an array of objects. Multiple objects can be added into this array and therefore multiple actions such as "seek","play", "stop" and "loop", can be set.
Each object has a start and end which is essentially a percentage for the height of the lottie container and is a value between 0 and 1. The visibility arrays first value is the start and the second value is the end. This refers to the percentage of the viewport.
Ensure that the ending frame is the frame you want the interactivity to end at. This could be the last frame or a frame of your choosing. In this case it is set to 50.
Configuration modes include "scroll" where the animation will be synced to the scrolling of the window and "cursor" where the scrolling of the animation will be synced to the cursor position within the container.
The configuration can include a container field as shown in the next example. If a container is not provided the parent div will be taken as a container.
Sync Lottie with scroll
This section shows an example of a Lottie that is synced with the scroll bar. The scrolling effect is activated as soon as the animation enters the viewport. You may position the Lottie anywhere on your website and the Lottie will seek frame by frame as you scroll down the website.
id="your_id" src="https://assets1.lottiefiles.com/packages/lf20_M1JAO6.json"
LottieInteractivity.create({
mode:"scroll",
player:'#firstLottie',
actions: [
{
visibility:[0,1],
type: "seek",
frames: [0, 50],
},
]
});
Lottie scroll relative to container
There may be situations where you would like to wrap the lottie player inside a container or just in general sync the lottie scroll with a div on your page. In which case you may pass a container variable with the container id into the action object.
This containers ID is "MyContainerId". The scroll activates in this example once the container with "MyContainerId" is in the viewport.
id="secondLottie" src="https://assets1.lottiefiles.com/packages/lf20_M1JAO6.json" style="width:400px; height: 400px;"
LottieInteractivity.create({
mode:"scroll",
player: "#secondLottie",
container: "#MyContainerId",
actions: [
{
visibility:[0,1],
type: "seek",
frames: [0, 50]
}
]
});
Lottie scroll with offset
If you would like to add an offset to the top of the container or player you may add an extra action object to the array. For this example, from 0 to 30% of the container, the lottie will be stopped and from 30% to 100% of the container the lottie will be synced with the scroll.
id="thirdLottie" src="https://assets1.lottiefiles.com/packages/lf20_M1JAO6.json" style="width:400px; height: 400px;"
LottieInteractivity.create({
mode:"scroll",
player: "#thirdLottie"
actions: [
{
visibility:[0,0.3],
type: "stop",
frames: [0]
},
{
visibility: [0.3,1]
type: "seek",
frames: [0, 50]
}
]
});
Scroll effect with offset and segment looping
In cases where you would like the animation to loop from a specific frame to a specific frame, you can add an additional object to actions in which you can specify the frames. In the example below, the lottie loops frame 45 to 60 once 45% of the container is reached.
id="fourthLottie" src="https://assets1.lottiefiles.com/packages/lf20_M1JAO6.json" style="width:400px; height: 400px;"
LottieInteractivity.create({
mode:"scroll",
player: "#fourthLottie"
actions: [
{
visibility:[0,0.3],
type: "stop",
frames: [0]
},
{
visibility: [0.3,1]
type: "seek",
frames: [0, 50]
}
]
});
Play segments
If you would like to play the animation and loop it only from a certain frame to a certain frame, then you can utilize the loop action and frames variable. This example shows an animation looping from frame 70 to 500.
id="fifthLottie" src="https://assets1.lottiefiles.com/packages/lf20_M1JAO6.json" style="width:400px; height: 400px;"
LottieInteractivity.create({
mode:"scroll",
player: "#fifthLottie"
actions: [
{
visibility:[0,0.3],
type: "stop",
frames: [0]
},
{
visibility: [0.3,1]
type: "seek",
frames: [0, 50]
}
]
});
Play segments on hover
To loop certain segments on hover, ensure that the Lottie is already at the frame you want to start the on hover loop from (Check the javascript code to find out how). Once thats done you can use the library's "hover" action to loop the segment.
id="seventhLottie" src="https://assets1.lottiefiles.com/packages/lf20_M1JAO6.json" style="width:400px; height: 400px;"
LottieInteractivity.create({
mode:"cursor",
player: "#seventhLottie",
actions: [
{
position: { x: [0, 1], y: [0, 1] },
type: "loop",
frames: [25, 50]
},
{
position: { x: -1, y: -1 },
type: 'stop',
frames: [25],
}
]
});
Sync cursor position with animation
To progress the animation as you move the cursor either on the Lottie or on a given container, you may use the "cursor" mode. This will make the Lottie interactivity based on the cursors movement. Move your cursor on the animation below.
id="eightthLottie" src="https://assets1.lottiefiles.com/packages/lf20_M1JAO6.json" style="width:400px; height: 400px;"
LottieInteractivity.create({
mode:"cursor",
player: "#eightthLottie",
actions: [
{
position: { x: [0, 1], y: [0, 1] },
type: "loop",
frames: [0, 50]
}
]
});
How to upload your animations to Moveicon
Here is your step by step guide on how to upload your animations to Moveicon.
Step 1
Create an account with Moveicon or sign in to your account.
Step 2
Click on Upload an animation on my account menu.
Step 3
Give your animation a title, description and tags so people can find it easier. You may also include the After Effects Source File if you have it.
Step 4
Click Publish to Public
Step 5
Sit back and relax while you wait for your animation to be approved by Moveicon.