{ "name": "am/lottieplayer-module", "d4Shortcode": "et_pb_lottieplayer", "title": "AM Lottie", "titles": "AM Lotties", "category": "module", "moduleIcon": "divi/module-lottie", "moduleClassName": "am-lottieplayer-module", "moduleOrderClassName": "am-lottieplayer-module", "childrenName": [], "attributes": { "module": { "type": "object", "selector": "{{selector}}", "default": { "meta": { "adminLabel": { "desktop": { "value": "AM Lottie" } } }, "advanced": { "align": { "desktop": { "value": "center" } }, "sizing": { "desktop": { "value": { "forceFullwidth": "off" } } }, "spacing": { "desktop": { "value": { "showBottomSpace": "on" } } } } }, "styleProps": { "spacing": { "important": { "desktop": { "value": { "margin": true } } } }, "sizing": { "propertySelectors": { "desktop": { "value": { "height": "{{selector}} .et_pb_image_wrap dotlottie-player", "min-height": "{{selector}} .et_pb_image_wrap dotlottie-player", "max-height": "{{selector}} .et_pb_image_wrap dotlottie-player" } } } } }, "settings": { "meta": { "adminLabel": {} }, "advanced": { "elements": {}, "html": {}, "htmlAttributes": {}, "align": { "groupType": "group-item", "item": { "groupSlug": "designAlignment", "label": "Alignment", "description": "Here you can choose the animation alignment.", "category": "layout", "multipleChoices": false, "onChangeParams": ["multipleChoices"], "render": true, "priority": 50, "features": { "hover": false, "sticky": false }, "component": { "type": "field", "name": "divi/button-options", "props": { "options": { "left": { "icon": "divi/align-left" }, "center": { "icon": "divi/align-center" }, "right": { "icon": "divi/align-right" } }, "showLabel": false } } } }, "sizing": { "groupType": "group-items", "items": { "forceFullwidth": { "groupSlug": "designSizing", "attrName": "module.advanced.sizing", "subName": "forceFullwidth", "label": "Force Fullwidth", "description": "When enabled, this will force your animation to extend 100% of the width of the column it's in.", "category": "layout", "render": true, "priority": 100, "features": { "hover": false, "sticky": false }, "component": { "type": "field", "name": "divi/toggle" } }, "sizing": { "groupSlug": "designSizing", "priority": 110, "render": true, "component": { "type": "group", "name": "divi/sizing", "props": { "grouped": false } } } } }, "spacing": { "groupType": "group-items", "items": { "showBottomSpace": { "groupSlug": "designSpacing", "subName": "showBottomSpace", "label": "Show Space Below The Animation", "description": "Here you can choose whether or not the animation should have a space below it.", "category": "layout", "render": true, "priority": 120, "features": { "preset": ["html"] }, "component": { "type": "field", "name": "divi/toggle" } }, "spacing": { "groupSlug": "designSpacing", "priority": 130, "render": true, "component": { "type": "group", "name": "divi/spacing", "props": { "grouped": false } } } } } }, "decoration": { "layout": {}, "background": {}, "animation": {}, "attributes": {}, "conditions": {}, "disabledOn": {}, "filters": {}, "interactions": {}, "overflow": {}, "order": {}, "position": {}, "scroll": {}, "sizing": {}, "spacing": {}, "sticky": {}, "transform": {}, "transition": {}, "zIndex": {} } } }, "lottie": { "type": "object", "selector": "{{selector}} .et_pb_image_wrap", "label": "Animation", "supportsCustomAttributes": true, "styleProps": { "border": { "selector": "{{selector}} .et_pb_image_wrap" }, "boxShadow": { "selector": "{{selector}} .et_pb_image_wrap", "useOverlay": true } }, "styleComponentsProps": { "background": false, "boxShadow": { "settings": { "overlay": true } } }, "default": { "innerContent": { "desktop": { "value": { "src": "", "controls": "on", "autoplay": "off", "loop": "off", "mode": "off", "reverse": "off", "subframe": "on", "speed": 1, "intermission": 0, "segment_in": 1, "segment_out": "", "animateonscroll": "off", "playonclick": "off", "hover": "off", "mouseout": "stop", "selector": "", "exclude_selector": "off", "playonvisible": "off", "delay": 0, "once": "off", "objectfit": "contain", "renderer": "svg", "url": "", "url_new_window": "off", "description": "" } } } }, "settings": { "innerContent": { "groupType": "group-items", "items": { "src": { "groupSlug": "contentAnimation", "subName": "src", "label": "AM Lottie", "description": "Upload your desired animation in Lottie JSON format, dotLottie format, or type in the URL to the Lottie you would like to display", "category": "basic_option", "features": { "dynamicContent": { "type": "url" }, "sticky": false, "responsive": true, "hover": false, "preset": "content" }, "render": true, "priority": 10, "component": { "type": "field", "name": "divi/upload", "props": { "chooseText": "Choose a Lottie JSON or a dotLottie", "uploadButtonText": "Use animation", "dataType": "json", "hideMetadata": true } } }, "controls": { "groupSlug": "contentAnimation", "subName": "controls", "label": "Show controls", "description": "Show or hide controls.", "category": "basic_option", "render": true, "priority": 20, "features": { "preset": ["html"] }, "component": { "type": "field", "name": "divi/toggle" } }, "autoplay": { "groupSlug": "contentAnimation", "subName": "autoplay", "label": "Autoplay", "description": "Control whether the animation plays on page load or not.", "category": "basic_option", "render": true, "priority": 30, "features": { "preset": ["html"] }, "component": { "type": "field", "name": "divi/toggle" } }, "loop": { "groupSlug": "contentAnimation", "subName": "loop", "label": "Loop", "description": "Loop the animation.", "category": "basic_option", "render": true, "priority": 40, "features": { "preset": ["html"] }, "component": { "type": "field", "name": "divi/toggle" } }, "mode": { "groupSlug": "contentAnimation", "subName": "mode", "label": "Boomerang", "description": "Play the animation forward, then backward.", "category": "basic_option", "render": true, "priority": 50, "features": { "preset": ["html"] }, "component": { "type": "field", "name": "divi/toggle" } }, "reverse": { "groupSlug": "contentAnimation", "subName": "reverse", "label": "Reverse", "description": "Reverse the animation.", "category": "basic_option", "render": true, "priority": 60, "features": { "preset": ["html"] }, "component": { "type": "field", "name": "divi/toggle" } }, "subframe": { "groupSlug": "contentAnimation", "subName": "subframe", "label": "Subframe", "description": "Enabling this can sometimes reduce flicker", "category": "basic_option", "render": true, "priority": 70, "features": { "preset": ["html"] }, "component": { "type": "field", "name": "divi/toggle" } }, "speed": { "groupSlug": "contentAnimation", "subName": "speed", "label": "Playback speed", "description": "Control the playback speed of the animation.", "render": true, "priority": 80, "features": { "preset": ["html"] }, "component": { "type": "field", "name": "divi/range", "props": { "min": 0.1, "max": 10, "step": 0.1, "allowedUnits": [], "defaultUnit": "" } } }, "intermission": { "groupSlug": "contentAnimation", "subName": "intermission", "label": "Intermission", "description": "Pause between loops, in miliseconds. 1s = 1000", "render": true, "priority": 90, "features": { "preset": ["html"] }, "component": { "type": "field", "name": "divi/range", "props": { "min": 0, "max": 5000, "step": 100, "allowedUnits": [], "defaultUnit": "" } } }, "segment_in": { "groupSlug": "contentAnimation", "subName": "segment_in", "label": "Choose where to start", "description": "Frame to start the animation from.", "render": true, "priority": 100, "features": { "preset": ["html"] }, "component": { "type": "field", "name": "divi/range", "props": { "min": 0, "max": 1000, "step": 1, "allowedUnits": [], "defaultUnit": "" } } }, "segment_out": { "groupSlug": "contentAnimation", "subName": "segment_out", "label": "And where to end", "description": "Frame to end the animation at. Leave empty to play through the last frame.", "render": true, "priority": 110, "features": { "preset": ["html"] }, "component": { "type": "field", "name": "divi/range", "props": { "min": 0, "max": 1000, "step": 1, "allowedUnits": [], "defaultUnit": "" } } }, "animateonscroll": { "groupSlug": "contentAnimation", "subName": "animateonscroll", "label": "Animate on scroll", "description": "Make the animation play only when scrolling, relative to the speed and direction of the scroll", "category": "basic_option", "render": true, "priority": 120, "features": { "preset": ["html"] }, "component": { "type": "field", "name": "divi/toggle" } }, "playonclick": { "groupSlug": "contentAnimation", "subName": "playonclick", "label": "Play on click", "category": "basic_option", "render": true, "priority": 130, "features": { "preset": ["html"] }, "component": { "type": "field", "name": "divi/toggle" } }, "hover": { "groupSlug": "contentAnimation", "subName": "hover", "label": "Play on mouseover", "category": "basic_option", "render": true, "priority": 140, "features": { "preset": ["html"] }, "component": { "type": "field", "name": "divi/toggle" } }, "mouseout": { "groupSlug": "contentAnimation", "subName": "mouseout", "label": "On mouseout", "description": "What should happen when the pointer leaves the trigger.", "render": true, "priority": 150, "features": { "preset": ["html"], "responsive": false, "hover": false, "sticky": false }, "component": { "type": "field", "name": "divi/select", "props": { "options": { "void": { "label": "No event" }, "stop": { "label": "Stop" }, "pause": { "label": "Pause" }, "reverse": { "label": "Reverse" } } } } }, "selector": { "groupSlug": "contentAnimation", "subName": "selector", "label": "Trigger element", "description": "Anchor tag (id) for an element you want to trigger the animation, either by hover or click.", "category": "basic_option", "render": true, "priority": 160, "features": { "sticky": false, "responsive": false, "hover": false, "preset": ["html"] }, "component": { "type": "field", "name": "divi/text" } }, "exclude_selector": { "groupSlug": "contentAnimation", "subName": "exclude_selector", "label": "Apply interaction only to trigger element", "category": "basic_option", "render": true, "priority": 170, "features": { "preset": ["html"] }, "component": { "type": "field", "name": "divi/toggle" } }, "playonvisible": { "groupSlug": "contentAnimation", "subName": "playonvisible", "label": "Play on scroll, when visible in viewport", "category": "basic_option", "render": true, "priority": 180, "features": { "preset": ["html"] }, "component": { "type": "field", "name": "divi/toggle" } }, "delay": { "groupSlug": "contentAnimation", "subName": "delay", "label": "Delay, in milliseconds", "category": "basic_option", "render": true, "priority": 190, "features": { "preset": ["html"] }, "component": { "type": "field", "name": "divi/range", "props": { "min": 0, "max": 5000, "step": 1, "allowedUnits": [], "defaultUnit": "" } } }, "once": { "groupSlug": "contentAnimation", "subName": "once", "label": "Play only once", "category": "basic_option", "render": true, "priority": 200, "features": { "preset": ["html"] }, "component": { "type": "field", "name": "divi/toggle" } }, "objectfit": { "groupSlug": "contentAnimation", "subName": "objectfit", "label": "Object Fit", "description": "Choose how to scale the animation", "category": "basic_option", "render": true, "priority": 210, "features": { "preset": ["html"], "responsive": false, "hover": false, "sticky": false }, "component": { "type": "field", "name": "divi/select", "props": { "options": { "contain": { "label": "Contain" }, "cover": { "label": "Cover" }, "fill": { "label": "Fill" }, "none": { "label": "None" } } } } }, "renderer": { "groupSlug": "contentAnimation", "subName": "renderer", "label": "Renderer", "description": "Choose renderer", "category": "configuration", "render": true, "priority": 220, "features": { "preset": ["html"], "responsive": false, "hover": false, "sticky": false }, "component": { "type": "field", "name": "divi/select", "props": { "options": { "svg": { "label": "SVG" }, "canvas": { "label": "Canvas" } } } } }, "url": { "groupSlug": "contentLink", "subName": "url", "label": "Animation Link URL", "description": "If you would like your Lottie to be a link, input your destination URL here. No link will be created if this field is left blank.", "category": "basic_option", "render": true, "priority": 10, "features": { "dynamicContent": { "type": "url" }, "sticky": false, "responsive": false, "hover": false, "preset": "content" }, "component": { "type": "field", "name": "divi/text" } }, "url_new_window": { "groupSlug": "contentLink", "subName": "url_new_window", "label": "Animation Link Target", "description": "Here you can choose whether or not your link opens in a new window", "category": "configuration", "render": true, "priority": 20, "features": { "responsive": false, "hover": false, "sticky": false, "preset": "content" }, "component": { "type": "field", "name": "divi/select", "props": { "options": { "off": { "label": "In The Same Window" }, "on": { "label": "In The New Tab" } } } } }, "description": { "groupSlug": "advancedAttributes", "subName": "description", "label": "Animation Alternative Text", "description": "This defines the HTML ALT text. A short description of your animation can be placed here. Helpful for screen readers.", "category": "basic_option", "render": true, "priority": 10, "features": { "dynamicContent": { "type": "text" }, "sticky": false, "preset": "content" }, "component": { "type": "field", "name": "divi/text" } } } }, "decoration": { "border": {}, "boxShadow": {} } } } }, "customCssFields": { "lottieAnimation": { "label": "Lottie Animation", "subName": "lottieAnimation", "selectorSuffix": " .et_pb_image_wrap dotlottie-player" } }, "settings": { "design": "auto", "advanced": "auto", "groups": { "contentAnimation": { "panel": "content", "priority": 10, "groupName": "contentAnimation", "component": { "name": "divi/composite", "props": { "groupLabel": "Animation" } } }, "contentLink": { "panel": "content", "priority": 20, "groupName": "contentLink", "component": { "name": "divi/composite", "props": { "groupLabel": "Link" } } }, "designAlignment": { "panel": "design", "priority": 10, "groupName": "alignment", "multiElements": true, "component": { "name": "divi/composite", "props": { "groupLabel": "Alignment", "clipboardCategory": "style", "presetGroup": "divi/alignment" } } }, "designSizing": { "panel": "design", "priority": 60, "groupName": "sizing", "multiElements": true, "component": { "name": "divi/composite", "props": { "groupLabel": "Sizing", "clipboardCategory": "style", "presetGroup": "divi/sizing" } } }, "designSpacing": { "panel": "design", "priority": 70, "groupName": "spacing", "multiElements": true, "component": { "name": "divi/composite", "props": { "groupLabel": "Spacing", "clipboardCategory": "style", "presetGroup": "divi/spacing" } } }, "advancedAttributes": { "panel": "advanced", "priority": 95, "groupName": "advancedAttributes", "component": { "name": "divi/composite", "props": { "groupLabel": "Attributes" } } } } } }