{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"Animation Styles","description":"Accelerate E&P application development and protect your innovation by consuming our Data and Domain APIs / Platform APIs.","lang":"en-US","meta":[{"name":"robots","content":"noindex"}],"llmstxt":{"hide":true,"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"animation-styles","__idx":0},"children":["Animation Styles"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Most of the shapes in Carnac can be animated using ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/doc/classes/geotoolkit.attributes.animationstyle.animationstyle.html"},"children":["AnimationStyle"]},", which internally uses ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/doc/classes/geotoolkit.animation.effects.abstracteffect.abstracteffect.html"},"children":["AbstractEffects"]},". Every effect can animate only one property of a shape. Parameters of effect are very similar to the SMIL animation. This tutorial includes several examples of animation below."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"color-animation","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Attributes/AnimationStyles/animationStyles#color"},"children":["#"]}," Color Animation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This animation example changes the color of the shape."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Rectangle } from \"@int/geotoolkit/scene/shapes/Rectangle.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nfunction createScene(canvas) {\n const color = new Rectangle({\n \"left\": 50,\n \"top\": 10,\n \"width\": 200,\n \"height\": 100,\n \"linestyle\": {\n color: KnownColors.Orange,\n width: 3\n },\n \"fillstyle\": KnownColors.Blue,\n \"animationstyle\": {\n \"attributename\": \"fill\",\n \"duration\": 1e3,\n \"repeatcount\": Infinity,\n \"from\": KnownColors.Blue,\n \"to\": KnownColors.Orange\n }\n });\n return new Plot({\n \"canvaselement\": canvas,\n \"root\": new Group().addChild(color)\n });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n position: relative;\n}\n\n.cg-tooltip {\n position: absolute;\n display: block;\n padding: 2px 12px 3px 7px;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 13px;\n background: white !important;\n opacity: 0.9;\n color: #333333;\n border: solid 1px gray;\n border-radius: 5px;\n text-align: left;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n border-radius: 5px;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n position: absolute;\n display: block;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 12px;\n padding: 3px 7px;\n background: #f7f7f7;\n color: #333333;\n border: 1px solid #938e8e;\n opacity: 0.8;\n text-align: left;\n box-shadow: 3px 3px 10px #888;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cg-tooltip-container {\n border-radius: 0;\n }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 5px solid transparent;\n border-left: 0;\n border-right: 5px solid #938e8e;\n transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 4px solid transparent;\n border-left: 0;\n border-right: 4px solid #f7f7f7;\n transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 5px solid transparent;\n border-top: 0;\n border-bottom: 5px solid #938e8e;\n transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 4px solid transparent;\n border-top: 0;\n border-bottom: 4px solid #f7f7f7;\n transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 5px solid transparent;\n border-right: 0;\n border-left: 5px solid #938e8e;\n transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 4px solid transparent;\n border-right: 0;\n border-left: 4px solid #f7f7f7;\n transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0px;\n border: 5px solid transparent;\n border-bottom: 0;\n border-top: 5px solid #938e8e;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0;\n border: 4px solid transparent;\n border-bottom: 0;\n border-top: 4px solid #f7f7f7;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n text-transform: none;\n}\n\n.cg-tooltip-item-name {\n text-transform: capitalize;\n white-space: nowrap;\n vertical-align: middle;\n font-size: 13px;\n}\n.cg-tooltip-row {\n display: flex;\n flex-direction: row;\n align-items: center;\n white-space: pre-wrap;\n font-size: 12px;\n line-height: 100%;\n margin: 1px 0;\n}\n.cg-tooltip-title {\n font-size: 13px;\n height: 14px;\n text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n display: inline-flex;\n min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n margin-right: 3px;\n background-color: transparent;\n display: block;\n}\n.cg-tooltip-symbol > img {\n display: block;\n}\n.cg-tooltip-list-cell {\n display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n display: block;\n margin-right: 3px;\n width: 6px;\n height: 6px;\n vertical-align: middle;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n border-radius: 4px;\n margin-right: 5px;\n height: 8px;\n width: 8px;\n display: inline-block;\n}\n.cg-tooltip-title-legacy {\n font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: rotate(45deg);\n border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 0px;\n border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Carnac/Attributes/AnimationStyles/animationStyles?section=color&extract=true","width":"100%","height":"238.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"combined-animation","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Attributes/AnimationStyles/animationStyles#combined"},"children":["#"]}," Combined Animation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Animation effects can be run one by one."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Rectangle } from \"@int/geotoolkit/scene/shapes/Rectangle.ts\";\nimport { AnimationStyle } from \"@int/geotoolkit/attributes/AnimationStyle.ts\";\nimport { AnimationFill } from \"@int/geotoolkit/animation/AnimationFill.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nfunction createScene(canvas) {\n const rectangle = new Rectangle({\n \"left\": 50,\n \"top\": 50,\n \"width\": 10,\n \"height\": 50,\n \"linestyle\": {\n color: KnownColors.Orange,\n width: 3\n },\n \"fillstyle\": KnownColors.Blue\n });\n const combineAnimation = new AnimationStyle([{\n \"attributename\": \"width\",\n \"fill\": AnimationFill.Freeze,\n \"begin\": \"2s;fill.end\",\n \"duration\": 1e3,\n \"id\": \"width\",\n \"from\": 10,\n \"to\": 100\n }, {\n \"id\": \"fill\",\n \"attributename\": \"fill\",\n \"begin\": \"width.end+1s\",\n \"duration\": 1e3,\n \"from\": KnownColors.Blue,\n \"to\": KnownColors.Yellow\n }]);\n rectangle.setAnimationStyle(combineAnimation);\n return new Plot({\n \"canvaselement\": canvas,\n \"root\": new Group().addChild(rectangle)\n });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n position: relative;\n}\n\n.cg-tooltip {\n position: absolute;\n display: block;\n padding: 2px 12px 3px 7px;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 13px;\n background: white !important;\n opacity: 0.9;\n color: #333333;\n border: solid 1px gray;\n border-radius: 5px;\n text-align: left;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n border-radius: 5px;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n position: absolute;\n display: block;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 12px;\n padding: 3px 7px;\n background: #f7f7f7;\n color: #333333;\n border: 1px solid #938e8e;\n opacity: 0.8;\n text-align: left;\n box-shadow: 3px 3px 10px #888;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cg-tooltip-container {\n border-radius: 0;\n }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 5px solid transparent;\n border-left: 0;\n border-right: 5px solid #938e8e;\n transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 4px solid transparent;\n border-left: 0;\n border-right: 4px solid #f7f7f7;\n transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 5px solid transparent;\n border-top: 0;\n border-bottom: 5px solid #938e8e;\n transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 4px solid transparent;\n border-top: 0;\n border-bottom: 4px solid #f7f7f7;\n transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 5px solid transparent;\n border-right: 0;\n border-left: 5px solid #938e8e;\n transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 4px solid transparent;\n border-right: 0;\n border-left: 4px solid #f7f7f7;\n transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0px;\n border: 5px solid transparent;\n border-bottom: 0;\n border-top: 5px solid #938e8e;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0;\n border: 4px solid transparent;\n border-bottom: 0;\n border-top: 4px solid #f7f7f7;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n text-transform: none;\n}\n\n.cg-tooltip-item-name {\n text-transform: capitalize;\n white-space: nowrap;\n vertical-align: middle;\n font-size: 13px;\n}\n.cg-tooltip-row {\n display: flex;\n flex-direction: row;\n align-items: center;\n white-space: pre-wrap;\n font-size: 12px;\n line-height: 100%;\n margin: 1px 0;\n}\n.cg-tooltip-title {\n font-size: 13px;\n height: 14px;\n text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n display: inline-flex;\n min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n margin-right: 3px;\n background-color: transparent;\n display: block;\n}\n.cg-tooltip-symbol > img {\n display: block;\n}\n.cg-tooltip-list-cell {\n display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n display: block;\n margin-right: 3px;\n width: 6px;\n height: 6px;\n vertical-align: middle;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n border-radius: 4px;\n margin-right: 5px;\n height: 8px;\n width: 8px;\n display: inline-block;\n}\n.cg-tooltip-title-legacy {\n font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: rotate(45deg);\n border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 0px;\n border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Carnac/Attributes/AnimationStyles/animationStyles?section=combined&extract=true","width":"100%","height":"238.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"complex-animation","__idx":3},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Attributes/AnimationStyles/animationStyles#complex"},"children":["#"]}," Complex Animation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Animation style can contain several effects, which would be animated simultaneously."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Rectangle } from \"@int/geotoolkit/scene/shapes/Rectangle.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nfunction createScene(canvas) {\n const complex = new Rectangle({\n \"left\": 0,\n \"top\": 100,\n \"width\": 50,\n \"height\": 50,\n \"linestyle\": {\n color: KnownColors.Orange,\n width: 3\n },\n \"fillstyle\": KnownColors.Blue,\n \"animationstyle\": [{\n \"attributename\": \"transform\",\n \"type\": \"rotate\",\n \"duration\": 2e3,\n \"repeatcount\": Infinity,\n \"from\": 0,\n \"to\": 360\n }, {\n \"attributename\": \"x\",\n \"duration\": 2e3,\n \"repeatcount\": Infinity,\n \"values\": [0, 300]\n }, {\n \"attributename\": \"y\",\n \"duration\": 2e3,\n \"repeatcount\": Infinity,\n \"values\": [100, 10, 100]\n }]\n });\n return new Plot({\n \"canvaselement\": canvas,\n \"root\": new Group().addChild(complex)\n });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n position: relative;\n}\n\n.cg-tooltip {\n position: absolute;\n display: block;\n padding: 2px 12px 3px 7px;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 13px;\n background: white !important;\n opacity: 0.9;\n color: #333333;\n border: solid 1px gray;\n border-radius: 5px;\n text-align: left;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n border-radius: 5px;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n position: absolute;\n display: block;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 12px;\n padding: 3px 7px;\n background: #f7f7f7;\n color: #333333;\n border: 1px solid #938e8e;\n opacity: 0.8;\n text-align: left;\n box-shadow: 3px 3px 10px #888;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cg-tooltip-container {\n border-radius: 0;\n }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 5px solid transparent;\n border-left: 0;\n border-right: 5px solid #938e8e;\n transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 4px solid transparent;\n border-left: 0;\n border-right: 4px solid #f7f7f7;\n transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 5px solid transparent;\n border-top: 0;\n border-bottom: 5px solid #938e8e;\n transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 4px solid transparent;\n border-top: 0;\n border-bottom: 4px solid #f7f7f7;\n transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 5px solid transparent;\n border-right: 0;\n border-left: 5px solid #938e8e;\n transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 4px solid transparent;\n border-right: 0;\n border-left: 4px solid #f7f7f7;\n transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0px;\n border: 5px solid transparent;\n border-bottom: 0;\n border-top: 5px solid #938e8e;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0;\n border: 4px solid transparent;\n border-bottom: 0;\n border-top: 4px solid #f7f7f7;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n text-transform: none;\n}\n\n.cg-tooltip-item-name {\n text-transform: capitalize;\n white-space: nowrap;\n vertical-align: middle;\n font-size: 13px;\n}\n.cg-tooltip-row {\n display: flex;\n flex-direction: row;\n align-items: center;\n white-space: pre-wrap;\n font-size: 12px;\n line-height: 100%;\n margin: 1px 0;\n}\n.cg-tooltip-title {\n font-size: 13px;\n height: 14px;\n text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n display: inline-flex;\n min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n margin-right: 3px;\n background-color: transparent;\n display: block;\n}\n.cg-tooltip-symbol > img {\n display: block;\n}\n.cg-tooltip-list-cell {\n display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n display: block;\n margin-right: 3px;\n width: 6px;\n height: 6px;\n vertical-align: middle;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n border-radius: 4px;\n margin-right: 5px;\n height: 8px;\n width: 8px;\n display: inline-block;\n}\n.cg-tooltip-title-legacy {\n font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: rotate(45deg);\n border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 0px;\n border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Carnac/Attributes/AnimationStyles/animationStyles?section=complex&extract=true","width":"100%","height":"288.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-animation","__idx":4},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Attributes/AnimationStyles/animationStyles#custom"},"children":["#"]}," Custom Animation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Animation style can also animate custom properties. For this there are 2 requirements"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Animated property can be got/set with getProperties/setProperties"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Type of animated property should be Number"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For example, on Arc we can animate radius and startArc/endArc properties."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n position: relative;\n}\n\n.cg-tooltip {\n position: absolute;\n display: block;\n padding: 2px 12px 3px 7px;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 13px;\n background: white !important;\n opacity: 0.9;\n color: #333333;\n border: solid 1px gray;\n border-radius: 5px;\n text-align: left;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n border-radius: 5px;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n position: absolute;\n display: block;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 12px;\n padding: 3px 7px;\n background: #f7f7f7;\n color: #333333;\n border: 1px solid #938e8e;\n opacity: 0.8;\n text-align: left;\n box-shadow: 3px 3px 10px #888;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cg-tooltip-container {\n border-radius: 0;\n }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 5px solid transparent;\n border-left: 0;\n border-right: 5px solid #938e8e;\n transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 4px solid transparent;\n border-left: 0;\n border-right: 4px solid #f7f7f7;\n transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 5px solid transparent;\n border-top: 0;\n border-bottom: 5px solid #938e8e;\n transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 4px solid transparent;\n border-top: 0;\n border-bottom: 4px solid #f7f7f7;\n transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 5px solid transparent;\n border-right: 0;\n border-left: 5px solid #938e8e;\n transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 4px solid transparent;\n border-right: 0;\n border-left: 4px solid #f7f7f7;\n transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0px;\n border: 5px solid transparent;\n border-bottom: 0;\n border-top: 5px solid #938e8e;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0;\n border: 4px solid transparent;\n border-bottom: 0;\n border-top: 4px solid #f7f7f7;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n text-transform: none;\n}\n\n.cg-tooltip-item-name {\n text-transform: capitalize;\n white-space: nowrap;\n vertical-align: middle;\n font-size: 13px;\n}\n.cg-tooltip-row {\n display: flex;\n flex-direction: row;\n align-items: center;\n white-space: pre-wrap;\n font-size: 12px;\n line-height: 100%;\n margin: 1px 0;\n}\n.cg-tooltip-title {\n font-size: 13px;\n height: 14px;\n text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n display: inline-flex;\n min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n margin-right: 3px;\n background-color: transparent;\n display: block;\n}\n.cg-tooltip-symbol > img {\n display: block;\n}\n.cg-tooltip-list-cell {\n display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n display: block;\n margin-right: 3px;\n width: 6px;\n height: 6px;\n vertical-align: middle;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n border-radius: 4px;\n margin-right: 5px;\n height: 8px;\n width: 8px;\n display: inline-block;\n}\n.cg-tooltip-title-legacy {\n font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: rotate(45deg);\n border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 0px;\n border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Arc } from \"@int/geotoolkit/scene/shapes/Arc.ts\";\nimport { Functions } from \"@int/geotoolkit/animation/Easing.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nfunction createScene(canvas) {\n const custom = new Arc({\n \"x\": 150,\n \"y\": 80,\n \"radius\": 50,\n \"startarc\": 0,\n \"endarc\": 1.5 * Math.PI,\n \"linestyle\": {\n color: KnownColors.Orange,\n width: 3\n },\n \"fillstyle\": KnownColors.Blue,\n \"animationstyle\": {\n \"attributename\": \"endarc\",\n \"function\": Functions.EaseOutBounce,\n \"duration\": 1e3,\n \"repeatcount\": Infinity,\n \"from\": 0,\n \"to\": 2 * Math.PI\n }\n });\n return new Plot({\n \"canvaselement\": canvas,\n \"root\": new Group().addChild(custom)\n });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Carnac/Attributes/AnimationStyles/animationStyles?section=custom&extract=true","width":"100%","height":"238.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"custom-effect","__idx":5},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Attributes/AnimationStyles/animationStyles#customEffect"},"children":["#"]}," Custom Effect"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This example of custom animation on 3D PieChart shows how to animate inclination and pad of outsideline properties."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { AbstractProcessor } from \"@int/geotoolkit/animation/processors/AbstractProcessor.ts\";\nimport { obfuscate } from \"@int/geotoolkit/lib.js\";\nimport { AbstractEffect } from \"@int/geotoolkit/animation/effects/AbstractEffect.ts\";\nimport { Registry } from \"@int/geotoolkit/animation/effects/Registry.ts\";\nimport { DataMode, LabelLocation, PieMode } from \"@int/geotoolkit/controls/shapes/DonutChart.ts\";\nimport { PieChart } from \"@int/geotoolkit/controls/shapes/PieChart.ts\";\nimport { AnimationStyle } from \"@int/geotoolkit/attributes/AnimationStyle.ts\";\nimport { Rect } from \"@int/geotoolkit/util/Rect.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nimport { Functions } from \"@int/geotoolkit/animation/Easing.ts\";\nclass Processor extends AbstractProcessor {\n constructor() {\n super();\n }\n process(from, to, out, func) {\n out = out || {};\n out[\"inclination3d\"] = func(from[\"inclination3d\"], to[\"inclination3d\"]);\n out[\"outsideline\"] = out[\"outsideline\"] || {};\n out[\"outsideline\"][\"pad\"] = func(from[\"outsideline\"][\"pad\"], to[\"outsideline\"][\"pad\"]);\n return out;\n }\n clone(value) {\n return {\n \"inclination3d\": value[\"inclination3d\"],\n \"outsideline\": {\n \"pad\": value[\"outsideline\"][\"pad\"]\n }\n };\n }\n}\nobfuscate(Processor);\nclass Effect extends AbstractEffect {\n constructor(attr) {\n super(attr);\n this.setProcessor(new Processor());\n }\n isApplicable(effect, node) {\n return effect[\"attributename\"] === \"options\" && node instanceof PieChart;\n }\n getAnimatedValue(node) {\n const pieChart = node instanceof PieChart ? node : null;\n const options = pieChart?.getOptions();\n if (!options) {\n return null;\n }\n return {\n \"inclination3d\": options[\"inclination3d\"],\n \"outsideline\": {\n \"pad\": options[\"outsideline\"][\"pad\"]\n }\n };\n }\n apply(node) {\n const options = this.getCurrentValue();\n const pieChart = node instanceof PieChart ? node : null;\n pieChart?.setOptions({\n \"inclination3d\": options[\"inclination3d\"],\n \"outsideline\": {\n \"pad\": options[\"outsideline\"][\"pad\"]\n }\n });\n }\n}\nobfuscate(Effect);\nRegistry.getInstance().registerEffect(Effect);\nlet idTimeout, idInterval;\nfunction createScene(canvas) {\n const values = {\n \"Chert\": 30,\n \"Shale\": 17,\n \"Salt\": 22,\n \"Limestone\": 10\n };\n const data = {\n \"mode\": DataMode.Associative,\n \"values\": values\n };\n const options = {\n \"minpercentage\": 2,\n \"maxslices\": 4,\n \"piemode\": PieMode.Pie3D,\n \"inclination3d\": 0,\n \"depth3d\": 50,\n \"fillstyles\": [\n KnownColors.Red,\n KnownColors.Blue,\n KnownColors.Green,\n KnownColors.Yellow\n ],\n \"label\": {\n \"textstyle\": {\n \"font\": \"8pt Arial\"\n },\n \"location\": LabelLocation.Outside\n },\n \"outsideline\": {\n \"length\": 15,\n \"pad\": 0\n }\n };\n const widget = new PieChart(options, data);\n const animationStyle = new AnimationStyle({\n \"attributename\": \"options\",\n \"begin\": \"auto\",\n \"duration\": 1500,\n \"function\": Functions.EaseOutBounce\n });\n widget.setAnimationStyle(animationStyle);\n const plot = new Plot({\n \"canvaselement\": canvas,\n \"root\": widget,\n \"autorootbounds\": false\n });\n const W = plot.getWidth(), H = plot.getHeight();\n const xC = W / 2, yC = H / 2;\n widget.setBounds(new Rect(xC - 130, yC - 130, xC + 130, yC + 130));\n widget.setOptions({\n \"inclination3d\": 50,\n \"outsideline\": {\n \"pad\": 25\n }\n });\n idInterval = window.setInterval(() => {\n widget.setAnimationStyle(null).setVisible(false).setOptions({\n \"inclination3d\": 0,\n \"outsideline\": {\n \"pad\": 0\n }\n }).setAnimationStyle(animationStyle);\n idTimeout = window.setTimeout(() => {\n widget.setOptions({\n \"inclination3d\": 50,\n \"outsideline\": {\n \"pad\": 25\n }\n }).setVisible(true);\n }, 300);\n }, 4e3);\n return plot;\n}\nfunction clear() {\n clearInterval(idInterval);\n clearTimeout(idTimeout);\n}\nexport {\n clear,\n createScene\n};\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n position: relative;\n}\n\n.cg-tooltip {\n position: absolute;\n display: block;\n padding: 2px 12px 3px 7px;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 13px;\n background: white !important;\n opacity: 0.9;\n color: #333333;\n border: solid 1px gray;\n border-radius: 5px;\n text-align: left;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n border-radius: 5px;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n position: absolute;\n display: block;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 12px;\n padding: 3px 7px;\n background: #f7f7f7;\n color: #333333;\n border: 1px solid #938e8e;\n opacity: 0.8;\n text-align: left;\n box-shadow: 3px 3px 10px #888;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cg-tooltip-container {\n border-radius: 0;\n }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 5px solid transparent;\n border-left: 0;\n border-right: 5px solid #938e8e;\n transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 4px solid transparent;\n border-left: 0;\n border-right: 4px solid #f7f7f7;\n transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 5px solid transparent;\n border-top: 0;\n border-bottom: 5px solid #938e8e;\n transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 4px solid transparent;\n border-top: 0;\n border-bottom: 4px solid #f7f7f7;\n transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 5px solid transparent;\n border-right: 0;\n border-left: 5px solid #938e8e;\n transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 4px solid transparent;\n border-right: 0;\n border-left: 4px solid #f7f7f7;\n transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0px;\n border: 5px solid transparent;\n border-bottom: 0;\n border-top: 5px solid #938e8e;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0;\n border: 4px solid transparent;\n border-bottom: 0;\n border-top: 4px solid #f7f7f7;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n text-transform: none;\n}\n\n.cg-tooltip-item-name {\n text-transform: capitalize;\n white-space: nowrap;\n vertical-align: middle;\n font-size: 13px;\n}\n.cg-tooltip-row {\n display: flex;\n flex-direction: row;\n align-items: center;\n white-space: pre-wrap;\n font-size: 12px;\n line-height: 100%;\n margin: 1px 0;\n}\n.cg-tooltip-title {\n font-size: 13px;\n height: 14px;\n text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n display: inline-flex;\n min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n margin-right: 3px;\n background-color: transparent;\n display: block;\n}\n.cg-tooltip-symbol > img {\n display: block;\n}\n.cg-tooltip-list-cell {\n display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n display: block;\n margin-right: 3px;\n width: 6px;\n height: 6px;\n vertical-align: middle;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n border-radius: 4px;\n margin-right: 5px;\n height: 8px;\n width: 8px;\n display: inline-block;\n}\n.cg-tooltip-title-legacy {\n font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: rotate(45deg);\n border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 0px;\n border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Carnac/Attributes/AnimationStyles/animationStyles?section=customEffect&extract=true","width":"100%","height":"388.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"opacity-animation","__idx":6},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Attributes/AnimationStyles/animationStyles#opacity"},"children":["#"]}," Opacity Animation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This animation example shows how to change the Opacity to create the animation effect."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Rectangle } from \"@int/geotoolkit/scene/shapes/Rectangle.ts\";\nimport { Image } from \"@int/geotoolkit/scene/shapes/Image.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nimport intImage from \"/src/assets/images/slb-134x80.png?import\";\nfunction createScene(canvas) {\n const opacity = [new Rectangle({\n \"left\": 50,\n \"top\": 50,\n \"width\": 50,\n \"height\": 50,\n \"linestyle\": {\n color: KnownColors.Orange,\n width: 3\n },\n \"fillstyle\": KnownColors.Blue,\n \"animationstyle\": {\n \"attributename\": \"opacity\",\n \"duration\": 1e3,\n \"repeatcount\": Infinity,\n \"from\": 1,\n \"to\": 0\n }\n }), new Image({\n \"ax\": 120,\n \"ay\": 35,\n \"url\": intImage,\n \"animationstyle\": {\n \"attributename\": \"opacity\",\n \"duration\": 1e3,\n \"repeatcount\": Infinity,\n \"from\": 1,\n \"to\": 0\n }\n })];\n return new Plot({\n \"canvaselement\": canvas,\n \"root\": new Group().addChild(opacity)\n });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n position: relative;\n}\n\n.cg-tooltip {\n position: absolute;\n display: block;\n padding: 2px 12px 3px 7px;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 13px;\n background: white !important;\n opacity: 0.9;\n color: #333333;\n border: solid 1px gray;\n border-radius: 5px;\n text-align: left;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n border-radius: 5px;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n position: absolute;\n display: block;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 12px;\n padding: 3px 7px;\n background: #f7f7f7;\n color: #333333;\n border: 1px solid #938e8e;\n opacity: 0.8;\n text-align: left;\n box-shadow: 3px 3px 10px #888;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cg-tooltip-container {\n border-radius: 0;\n }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 5px solid transparent;\n border-left: 0;\n border-right: 5px solid #938e8e;\n transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 4px solid transparent;\n border-left: 0;\n border-right: 4px solid #f7f7f7;\n transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 5px solid transparent;\n border-top: 0;\n border-bottom: 5px solid #938e8e;\n transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 4px solid transparent;\n border-top: 0;\n border-bottom: 4px solid #f7f7f7;\n transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 5px solid transparent;\n border-right: 0;\n border-left: 5px solid #938e8e;\n transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 4px solid transparent;\n border-right: 0;\n border-left: 4px solid #f7f7f7;\n transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0px;\n border: 5px solid transparent;\n border-bottom: 0;\n border-top: 5px solid #938e8e;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0;\n border: 4px solid transparent;\n border-bottom: 0;\n border-top: 4px solid #f7f7f7;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n text-transform: none;\n}\n\n.cg-tooltip-item-name {\n text-transform: capitalize;\n white-space: nowrap;\n vertical-align: middle;\n font-size: 13px;\n}\n.cg-tooltip-row {\n display: flex;\n flex-direction: row;\n align-items: center;\n white-space: pre-wrap;\n font-size: 12px;\n line-height: 100%;\n margin: 1px 0;\n}\n.cg-tooltip-title {\n font-size: 13px;\n height: 14px;\n text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n display: inline-flex;\n min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n margin-right: 3px;\n background-color: transparent;\n display: block;\n}\n.cg-tooltip-symbol > img {\n display: block;\n}\n.cg-tooltip-list-cell {\n display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n display: block;\n margin-right: 3px;\n width: 6px;\n height: 6px;\n vertical-align: middle;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n border-radius: 4px;\n margin-right: 5px;\n height: 8px;\n width: 8px;\n display: inline-block;\n}\n.cg-tooltip-title-legacy {\n font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: rotate(45deg);\n border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 0px;\n border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Carnac/Attributes/AnimationStyles/animationStyles?section=opacity&extract=true","width":"100%","height":"238.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"position-animation","__idx":7},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Attributes/AnimationStyles/animationStyles#position"},"children":["#"]}," Position Animation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This animation example uses the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/doc/classes/geotoolkit.animation.easing.easing.html"},"children":["EasingFunction"]}," to change the position of the shape."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n position: relative;\n}\n\n.cg-tooltip {\n position: absolute;\n display: block;\n padding: 2px 12px 3px 7px;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 13px;\n background: white !important;\n opacity: 0.9;\n color: #333333;\n border: solid 1px gray;\n border-radius: 5px;\n text-align: left;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n border-radius: 5px;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n position: absolute;\n display: block;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 12px;\n padding: 3px 7px;\n background: #f7f7f7;\n color: #333333;\n border: 1px solid #938e8e;\n opacity: 0.8;\n text-align: left;\n box-shadow: 3px 3px 10px #888;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cg-tooltip-container {\n border-radius: 0;\n }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 5px solid transparent;\n border-left: 0;\n border-right: 5px solid #938e8e;\n transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 4px solid transparent;\n border-left: 0;\n border-right: 4px solid #f7f7f7;\n transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 5px solid transparent;\n border-top: 0;\n border-bottom: 5px solid #938e8e;\n transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 4px solid transparent;\n border-top: 0;\n border-bottom: 4px solid #f7f7f7;\n transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 5px solid transparent;\n border-right: 0;\n border-left: 5px solid #938e8e;\n transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 4px solid transparent;\n border-right: 0;\n border-left: 4px solid #f7f7f7;\n transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0px;\n border: 5px solid transparent;\n border-bottom: 0;\n border-top: 5px solid #938e8e;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0;\n border: 4px solid transparent;\n border-bottom: 0;\n border-top: 4px solid #f7f7f7;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n text-transform: none;\n}\n\n.cg-tooltip-item-name {\n text-transform: capitalize;\n white-space: nowrap;\n vertical-align: middle;\n font-size: 13px;\n}\n.cg-tooltip-row {\n display: flex;\n flex-direction: row;\n align-items: center;\n white-space: pre-wrap;\n font-size: 12px;\n line-height: 100%;\n margin: 1px 0;\n}\n.cg-tooltip-title {\n font-size: 13px;\n height: 14px;\n text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n display: inline-flex;\n min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n margin-right: 3px;\n background-color: transparent;\n display: block;\n}\n.cg-tooltip-symbol > img {\n display: block;\n}\n.cg-tooltip-list-cell {\n display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n display: block;\n margin-right: 3px;\n width: 6px;\n height: 6px;\n vertical-align: middle;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n border-radius: 4px;\n margin-right: 5px;\n height: 8px;\n width: 8px;\n display: inline-block;\n}\n.cg-tooltip-title-legacy {\n font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: rotate(45deg);\n border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 0px;\n border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Rectangle } from \"@int/geotoolkit/scene/shapes/Rectangle.ts\";\nimport { Functions } from \"@int/geotoolkit/animation/Easing.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nfunction createScene(canvas) {\n const position = new Rectangle({\n \"left\": 75,\n \"top\": 5,\n \"width\": 50,\n \"height\": 50,\n \"linestyle\": {\n color: KnownColors.Orange,\n width: 3\n },\n \"fillstyle\": KnownColors.Blue,\n \"animationstyle\": {\n \"attributename\": \"y\",\n \"function\": Functions.EaseOutBounce,\n \"duration\": 1e3,\n \"repeatcount\": Infinity,\n \"to\": 200\n }\n });\n return new Plot({\n \"canvaselement\": canvas,\n \"root\": new Group().addChild(position)\n });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Carnac/Attributes/AnimationStyles/animationStyles?section=position&extract=true","width":"100%","height":"388.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"size-animation","__idx":8},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Attributes/AnimationStyles/animationStyles#size"},"children":["#"]}," Size Animation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This animation example shows how to change the attributes height and width to create the animation effect."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Rectangle } from \"@int/geotoolkit/scene/shapes/Rectangle.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nfunction createScene(canvas) {\n const size = new Rectangle({\n \"left\": 50,\n \"top\": 50,\n \"width\": 5,\n \"height\": 50,\n \"linestyle\": {\n color: KnownColors.Orange,\n width: 3\n },\n \"fillstyle\": KnownColors.Blue,\n \"animationstyle\": [{\n \"attributename\": \"width\",\n \"duration\": 1e3,\n \"repeatcount\": Infinity,\n \"from\": 5,\n \"to\": 200\n }, {\n \"attributename\": \"height\",\n \"duration\": 1e3,\n \"repeatcount\": Infinity,\n \"from\": 50,\n \"to\": 5\n }]\n });\n return new Plot({\n \"canvaselement\": canvas,\n \"root\": new Group().addChild(size)\n });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n position: relative;\n}\n\n.cg-tooltip {\n position: absolute;\n display: block;\n padding: 2px 12px 3px 7px;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 13px;\n background: white !important;\n opacity: 0.9;\n color: #333333;\n border: solid 1px gray;\n border-radius: 5px;\n text-align: left;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n border-radius: 5px;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n position: absolute;\n display: block;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 12px;\n padding: 3px 7px;\n background: #f7f7f7;\n color: #333333;\n border: 1px solid #938e8e;\n opacity: 0.8;\n text-align: left;\n box-shadow: 3px 3px 10px #888;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cg-tooltip-container {\n border-radius: 0;\n }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 5px solid transparent;\n border-left: 0;\n border-right: 5px solid #938e8e;\n transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 4px solid transparent;\n border-left: 0;\n border-right: 4px solid #f7f7f7;\n transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 5px solid transparent;\n border-top: 0;\n border-bottom: 5px solid #938e8e;\n transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 4px solid transparent;\n border-top: 0;\n border-bottom: 4px solid #f7f7f7;\n transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 5px solid transparent;\n border-right: 0;\n border-left: 5px solid #938e8e;\n transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 4px solid transparent;\n border-right: 0;\n border-left: 4px solid #f7f7f7;\n transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0px;\n border: 5px solid transparent;\n border-bottom: 0;\n border-top: 5px solid #938e8e;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0;\n border: 4px solid transparent;\n border-bottom: 0;\n border-top: 4px solid #f7f7f7;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n text-transform: none;\n}\n\n.cg-tooltip-item-name {\n text-transform: capitalize;\n white-space: nowrap;\n vertical-align: middle;\n font-size: 13px;\n}\n.cg-tooltip-row {\n display: flex;\n flex-direction: row;\n align-items: center;\n white-space: pre-wrap;\n font-size: 12px;\n line-height: 100%;\n margin: 1px 0;\n}\n.cg-tooltip-title {\n font-size: 13px;\n height: 14px;\n text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n display: inline-flex;\n min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n margin-right: 3px;\n background-color: transparent;\n display: block;\n}\n.cg-tooltip-symbol > img {\n display: block;\n}\n.cg-tooltip-list-cell {\n display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n display: block;\n margin-right: 3px;\n width: 6px;\n height: 6px;\n vertical-align: middle;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n border-radius: 4px;\n margin-right: 5px;\n height: 8px;\n width: 8px;\n display: inline-block;\n}\n.cg-tooltip-title-legacy {\n font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: rotate(45deg);\n border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 0px;\n border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Carnac/Attributes/AnimationStyles/animationStyles?section=size&extract=true","width":"100%","height":"238.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"transformation","__idx":9},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/Carnac/Attributes/AnimationStyles/animationStyles#transformation"},"children":["#"]}," Transformation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This animation example shows how to change the transform attributes to create the animation effect."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { Rectangle } from \"@int/geotoolkit/scene/shapes/Rectangle.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { Group } from \"@int/geotoolkit/scene/Group.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nfunction createScene(canvas) {\n const transformation = new Rectangle({\n \"left\": 50,\n \"top\": 50,\n \"width\": 50,\n \"height\": 50,\n \"linestyle\": {\n color: KnownColors.Orange,\n width: 3\n },\n \"fillstyle\": KnownColors.Blue,\n \"animationstyle\": {\n \"attributename\": \"transform\",\n \"type\": \"translate\",\n \"duration\": 1e3,\n \"repeatcount\": Infinity,\n \"unit\": \"cm\",\n \"from\": { \"x\": 0, \"y\": 0 },\n \"to\": { \"x\": 2, \"y\": 0 }\n }\n });\n return new Plot({\n \"canvaselement\": canvas,\n \"root\": new Group().addChild(transformation)\n });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n position: relative;\n}\n\n.cg-tooltip {\n position: absolute;\n display: block;\n padding: 2px 12px 3px 7px;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 13px;\n background: white !important;\n opacity: 0.9;\n color: #333333;\n border: solid 1px gray;\n border-radius: 5px;\n text-align: left;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n border-radius: 5px;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n position: absolute;\n display: block;\n overflow: visible !important;\n font-family: Roboto, Helvetica, Arial, sans-serif;\n font-size: 12px;\n padding: 3px 7px;\n background: #f7f7f7;\n color: #333333;\n border: 1px solid #938e8e;\n opacity: 0.8;\n text-align: left;\n box-shadow: 3px 3px 10px #888;\n margin: 0 !important;\n z-index: 10000;\n max-width: 400px;\n text-wrap: normal !important;\n white-space: normal !important;\n user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cg-tooltip-container {\n border-radius: 0;\n }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 5px solid transparent;\n border-left: 0;\n border-right: 5px solid #938e8e;\n transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 0;\n top: 50%;\n border: 4px solid transparent;\n border-left: 0;\n border-right: 4px solid #f7f7f7;\n transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 5px solid transparent;\n border-top: 0;\n border-bottom: 5px solid #938e8e;\n transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n top: 0;\n border: 4px solid transparent;\n border-top: 0;\n border-bottom: 4px solid #f7f7f7;\n transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 5px solid transparent;\n border-right: 0;\n border-left: 5px solid #938e8e;\n transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n right: 0;\n top: 50%;\n border: 4px solid transparent;\n border-right: 0;\n border-left: 4px solid #f7f7f7;\n transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0px;\n border: 5px solid transparent;\n border-bottom: 0;\n border-top: 5px solid #938e8e;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n content: '';\n position: absolute;\n display: block;\n width: 0px;\n left: 50%;\n bottom: 0;\n border: 4px solid transparent;\n border-bottom: 0;\n border-top: 4px solid #f7f7f7;\n transform: translate(-50%, 100%);\n z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n text-transform: none;\n}\n\n.cg-tooltip-item-name {\n text-transform: capitalize;\n white-space: nowrap;\n vertical-align: middle;\n font-size: 13px;\n}\n.cg-tooltip-row {\n display: flex;\n flex-direction: row;\n align-items: center;\n white-space: pre-wrap;\n font-size: 12px;\n line-height: 100%;\n margin: 1px 0;\n}\n.cg-tooltip-title {\n font-size: 13px;\n height: 14px;\n text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n display: inline-flex;\n min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n margin-right: 3px;\n background-color: transparent;\n display: block;\n}\n.cg-tooltip-symbol > img {\n display: block;\n}\n.cg-tooltip-list-cell {\n display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n display: block;\n margin-right: 3px;\n width: 6px;\n height: 6px;\n vertical-align: middle;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n border-radius: 4px;\n margin-right: 5px;\n height: 8px;\n width: 8px;\n display: inline-block;\n}\n.cg-tooltip-title-legacy {\n font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 50%;\n border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n height: 10px;\n width: 10px;\n display: inline-block;\n transform: rotate(45deg);\n border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n height: 10px;\n width: 10px;\n display: inline-block;\n border-radius: 0px;\n border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/Carnac/Attributes/AnimationStyles/animationStyles?section=transformation&extract=true","width":"100%","height":"208.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"Animation Styles","id":"animation-styles","depth":1},{"value":"Color Animation","id":"color-animation","depth":3},{"value":"Combined Animation","id":"combined-animation","depth":3},{"value":"Complex Animation","id":"complex-animation","depth":3},{"value":"Custom Animation","id":"custom-animation","depth":3},{"value":"Custom Effect","id":"custom-effect","depth":3},{"value":"Opacity Animation","id":"opacity-animation","depth":3},{"value":"Position Animation","id":"position-animation","depth":3},{"value":"Size Animation","id":"size-animation","depth":3},{"value":"Transformation","id":"transformation","depth":3}],"frontmatter":{"title":"Animation Styles","seo":{"title":"Animation Styles"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/carnac/attributes/animation-styles","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}