Share JSXGraph: example "Animation using CSS transitions"

Share JSXGraph: example "Animation using CSS transitions"

This website is a beta version. The official release will be in **2024**.

Javascript is disabled in your browser.

This site includes the JavaScript library JSXGraph to demonstrate its functionalities. To watch this, enable JavaScript in settings of your browser and reload this page.

example

{"id":10049,"alias":"animation-using-css-transitions","name":"Animation using CSS transitions","reference":"[{\"link\": \"https:\/\/dev.w3.org\/SVG\/proposals\/css-animation\/animation-proposal.html\", \"text\": \"SVG attributes for transitions\"}]","content":"const board = JXG.JSXGraph.initBoard(BOARDID, {\n    boundingbox: [-5, 5, 5, -5],\n    axis: false\n});\n\nvar A = board.create('point', [-1, 0], {\n    name: 'A',\n    transitionDuration: 2000,\n    transitionProperties: ['cx', 'cy']\n});","pre":"<button onClick=\"A.moveTo([3, 3], 0);\">Move \"A\"<\/button>","post":"","number_of_boards":1,"description":"With the attributes `transitionDuration` and `transitionProperties` it is possible to use CSS transitions for animations. It is advisable to turn this attribute on only when the animation is started.","dimensions":[{"width":"100%","height":"","aspect-ratio":"1 \/ 1"}],"large_in_db":0,"license":{"title":"Creative Commons Attribution 4.0 International","identifier":"CC BY 4.0","free":"- Share\r\n- Adapt","restrictions":"- Attribution\r\n- No additional restrictions","with_attribution":1,"link":"https:\/\/creativecommons.org\/licenses\/by\/4.0\/","image":"https:\/\/i.creativecommons.org\/l\/by\/4.0\/88x31.png","rank":0},"timestamp":"2023-01-27 10:09:40","draft":0,"deleted":0,"tags":[{"id":133,"alias":"jsxgraph-objects","name":"JSXGraph objects"},{"id":130,"alias":"technical","name":"Technical"}],"groups":[],"refers_to":[],"authors":[],"unique_ids":["jxgbox-66290c8eabda7"],"code_display":"\/\/ Define the id of your board in BOARDID\n\nconst board = JXG.JSXGraph.initBoard(BOARDID, {\n    boundingbox: [-5, 5, 5, -5],\n    axis: false\n});\n\nvar A = board.create('point', [-1, 0], {\n    name: 'A',\n    transitionDuration: 2000,\n    transitionProperties: ['cx', 'cy']\n});","code_execute_html":"<div id=\"jxgbox-66290c8eabda7\" class=\"jxgbox shadow\" style=\"aspect-ratio: 1 \/ 1; width: 100%;\" data-ar=\"1 \/ 1\"><\/div>\n<script type=\"text\/javascript\">\r\n    (function() {\r\n        let addWrapper = function (boardid, classes = [], styles = \"\") {\r\n            let board = document.getElementById(boardid),\r\n                wrapper, wrapperid = boardid + \"-wrapper\";\r\n            \r\n            wrapper = document.createElement(\"div\");\r\n            wrapper.id = wrapperid;\r\n            wrapper.classList.add(\"jxgbox-wrapper\");\r\n            \r\n            for (let c of classes)\r\n                wrapper.classList.add(c);\r\n                \r\n            wrapper.style = styles;\r\n                \r\n            board.parentNode.insertBefore(wrapper, board.nextSibling);\r\n            wrapper.appendChild(board);\r\n        }\r\n        \r\n        const FORCE_WRAPPER = false || true;\r\n        \r\n        let boardid = \"jxgbox-66290c8eabda7\",\r\n            wrapper_classes = \"p-3\".split(\" \"),\r\n            wrapper_styles = \"width: 100%; \",\r\n            board = document.getElementById(boardid),\r\n            ar, ar_h, ar_w, padding_bottom;\r\n        \r\n        ar = board.dataset.ar;\r\n            \r\n        if (!CSS.supports(\"aspect-ratio\", \"1 \/ 1\") && JXG.exists(ar, true)) {\r\n            \r\n            ar = ar.split(\"\/\", 3);\r\n            ar_w = ar[0].trim();\r\n            ar_h = ar[1].trim();\r\n            padding_bottom = ar_h \/ ar_w * 100;\r\n            \r\n            if (wrapper_styles !== \"\")\r\n                addWrapper(boardid, wrapper_classes, wrapper_styles);\r\n            \r\n            board.style = \"height: 0; padding-bottom: \" + padding_bottom + \"%; \/*\" + board.style + \"*\/\";\r\n            \r\n        } else if (FORCE_WRAPPER) {\r\n            \r\n            wrapper_styles = \"\";\r\n            if (board.style.width.indexOf(\"%\") > -1) {\r\n                wrapper_styles += \"width: \" + board.style.width + \"; \"\r\n                board.style.width = \"100%\";\r\n            }\r\n            if (board.style.height.indexOf(\"%\") > -1) {\r\n                wrapper_styles += \"height: \" + board.style.height + \"; \"\r\n                board.style.height = \"100%\";\r\n            }\r\n            addWrapper(boardid, wrapper_classes, wrapper_styles);\r\n        }\r\n    })();\r\n        <\/script>","code_execute_html_pre":"<button onClick=\"A.moveTo([3, 3], 0);\">Move \"A\"<\/button>","code_execute_html_post":"","code_execute_js":"const BOARDID_66290c8eabda4_0 = 'jxgbox-66290c8eabda7';\nconst BOARDID_66290c8eabda4_ = BOARDID_66290c8eabda4_0;\n\nconst board = JXG.JSXGraph.initBoard(BOARDID_66290c8eabda4_, {\n    boundingbox: [-5, 5, 5, -5],\n    axis: false\n});\n\nvar A = board.create('point', [-1, 0], {\n    name: 'A',\n    transitionDuration: 2000,\n    transitionProperties: ['cx', 'cy']\n});","code_export_js":"\/*\nThis example is licensed under a \nCreative Commons Attribution 4.0 International License.\nhttps:\/\/creativecommons.org\/licenses\/by\/4.0\/\n\nPlease note that you have to mention \nThe Center of Mobile Learning with Digital Technology\nin the credits.\n*\/\n\nconst BOARDID = 'your_div_id'; \/\/ Insert your id here!\n\nconst board = JXG.JSXGraph.initBoard(BOARDID, {\n    boundingbox: [-5, 5, 5, -5],\n    axis: false\n});\n\nvar A = board.create('point', [-1, 0], {\n    name: 'A',\n    transitionDuration: 2000,\n    transitionProperties: ['cx', 'cy']\n});","code_export_html":"<button onClick=\"A.moveTo([3, 3], 0);\">Move \"A\"<\/button>\n\n<div id=\"board-0-wrapper\" class=\"jxgbox-wrapper \" style=\"width: 100%; \">\n   <div id=\"board-0\" class=\"jxgbox\" style=\"aspect-ratio: 1 \/ 1; width: 100%;\" data-ar=\"1 \/ 1\"><\/div>\n<\/div>\n\n<script type = \"text\/javascript\"> \n    \/*\n    This example is licensed under a \n    Creative Commons Attribution 4.0 International License.\n    https:\/\/creativecommons.org\/licenses\/by\/4.0\/\n    \n    Please note that you have to mention \n    The Center of Mobile Learning with Digital Technology\n    in the credits.\n    *\/\n    \n    const BOARDID = 'board-0';\n\n    const board = JXG.JSXGraph.initBoard(BOARDID, {\n        boundingbox: [-5, 5, 5, -5],\n        axis: false\n    });\n    \n    var A = board.create('point', [-1, 0], {\n        name: 'A',\n        transitionDuration: 2000,\n        transitionProperties: ['cx', 'cy']\n    });\n <\/script> ","code_export_jsfiddle_html":"<button onClick=\"A.moveTo([3, 3], 0);\">Move \"A\"<\/button>\n\n<div id=\"board-0-wrapper\" class=\"jxgbox-wrapper \" style=\"width: 100%; \">\n   <div id=\"board-0\" class=\"jxgbox\" style=\"aspect-ratio: 1 \/ 1; width: 100%;\" data-ar=\"1 \/ 1\"><\/div>\n<\/div>\n","code_export_jsfiddle_js":"\/*\nThis example is licensed under a \nCreative Commons Attribution 4.0 International License.\nhttps:\/\/creativecommons.org\/licenses\/by\/4.0\/\n\nPlease note that you have to mention \nThe Center of Mobile Learning with Digital Technology\nin the credits.\n*\/\n\nconst BOARDID = 'board-0';\n\nconst board = JXG.JSXGraph.initBoard(BOARDID, {\n    boundingbox: [-5, 5, 5, -5],\n    axis: false\n});\n\nvar A = board.create('point', [-1, 0], {\n    name: 'A',\n    transitionDuration: 2000,\n    transitionProperties: ['cx', 'cy']\n});","code_export_html_file":"<!DOCTYPE html>\n<html>\n   <head>\n      <title>Animation using CSS transitions<\/title>\n      <meta content=\"text\/html; charset=UTF-8\" http-equiv=\"Content-Type\" \/>\n      <link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/jsxgraph.uni-bayreuth.de\/distrib\/jsxgraph.css\" \/>\n      <script src=\"https:\/\/jsxgraph.uni-bayreuth.de\/distrib\/jsxgraphcore.js\" type=\"text\/javascript\"><\/script>\n      <style type=\"text\/css\">\nbody {\n   font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", \"Liberation Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n<\/style>\n   <\/head>\n   <body>\n      <h1>Animation using CSS transitions<\/h1>\n      <button onClick=\"A.moveTo([3, 3], 0);\">Move \"A\"<\/button>\n      \n      <div id=\"board-0-wrapper\" class=\"jxgbox-wrapper \" style=\"width: 100%; \">\n         <div id=\"board-0\" class=\"jxgbox\" style=\"aspect-ratio: 1 \/ 1; width: 100%;\" data-ar=\"1 \/ 1\"><\/div>\n      <\/div>\n      \n      <script type = \"text\/javascript\"> \n          \/*\n          This example is licensed under a \n          Creative Commons Attribution 4.0 International License.\n          https:\/\/creativecommons.org\/licenses\/by\/4.0\/\n          \n          Please note that you have to mention \n          The Center of Mobile Learning with Digital Technology\n          in the credits.\n          *\/\n          \n          const BOARDID = 'board-0';\n      \n          const board = JXG.JSXGraph.initBoard(BOARDID, {\n              boundingbox: [-5, 5, 5, -5],\n              axis: false\n          });\n          \n          var A = board.create('point', [-1, 0], {\n              name: 'A',\n              transitionDuration: 2000,\n              transitionProperties: ['cx', 'cy']\n          });\n       <\/script> \n\n      <div style=\"margin:30px 15px; text-align:center; font-style:italic; font-size:80%;\">\n         <p>\n            <a rel=\"license\" href=\"https:\/\/creativecommons.org\/licenses\/by\/4.0\/\" target=\"_blank\"><img alt=\"license\" src=\"https:\/\/i.creativecommons.org\/l\/by\/4.0\/88x31.png\" style=\"height: 31px; width: auto;\"><\/a>\n         <\/p>\n         <p>\n         This example is licensed under a \n         <a rel=\"license\" href=\"https:\/\/creativecommons.org\/licenses\/by\/4.0\/\" target=\"_blank\">Creative Commons Attribution 4.0 International<\/a> License.\n         <\/p>\n         <p>\n         Please note that you have to mention \n         <a href=\"http:\/\/mobile-learning.uni-bayreuth.de\/\" target=\"_blank\">The Center of Mobile Learning with Digital Technology<\/a>\n         in the credits.\n         <\/p>\n      <\/div>\n\n      <p>For more examples have a look at our <a target=\"_blank\" href=\"https:\/\/jsxgraph.org\/share\/example\/animation-using-css-transitions\">JSXGraph examples database<\/a>.<\/p>\n   <\/body>\n<\/html>\n","code_export_moodle":"<button onClick=\"A.moveTo([3, 3], 0);\">Move \"A\"<\/button>\n\n<jsxgraph width=\"100%\" aspect-ratio=\"1 \/ 1\" title=\"Animation using CSS transitions\" description=\"This construction was copied from JSXGraph examples database: https:\/\/jsxgraph.org\/share\/\" useGlobalJS=\"false\">\n   \/*\n   This example is licensed under a \n   Creative Commons Attribution 4.0 International License.\n   https:\/\/creativecommons.org\/licenses\/by\/4.0\/\n   \n   Please note that you have to mention \n   The Center of Mobile Learning with Digital Technology\n   in the credits.\n   *\/\n   \n   const board = JXG.JSXGraph.initBoard(BOARDID, {\n       boundingbox: [-5, 5, 5, -5],\n       axis: false\n   });\n   \n   var A = board.create('point', [-1, 0], {\n       name: 'A',\n       transitionDuration: 2000,\n       transitionProperties: ['cx', 'cy']\n   });\n<\/jsxgraph>","link":"https:\/\/jsxgraph.org\/share\/example\/animation-using-css-transitions","link_raw":"https:\/\/jsxgraph.org\/share\/raw\/animation-using-css-transitions","alert_deleted":"This example is deprecated and has therefore been flagged as \"*deleted*\"."}

Animation using CSS transitions

JSXGraph objects Technical

With the attributes `transitionDuration` and `transitionProperties` it is possible to use CSS transitions for animations. It is advisable to turn this attribute on only when the animation is started.

Web references:

SVG attributes for transitions

<button onClick="A.moveTo([3, 3], 0);">Move "A"</button>

// Define the id of your board in BOARDID

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-5, 5, 5, -5],
    axis: false
});

var A = board.create('point', [-1, 0], {
    name: 'A',
    transitionDuration: 2000,
    transitionProperties: ['cx', 'cy']
});

/*
This example is licensed under a 
Creative Commons Attribution 4.0 International License.
https://creativecommons.org/licenses/by/4.0/

Please note that you have to mention 
The Center of Mobile Learning with Digital Technology
in the credits.
*/

const BOARDID = 'your_div_id'; // Insert your id here!

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-5, 5, 5, -5],
    axis: false
});

var A = board.create('point', [-1, 0], {
    name: 'A',
    transitionDuration: 2000,
    transitionProperties: ['cx', 'cy']
});

<button onClick="A.moveTo([3, 3], 0);">Move "A"</button>

<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution 4.0 International License.
    https://creativecommons.org/licenses/by/4.0/
    
    Please note that you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-5, 5, 5, -5],
        axis: false
    });
    
    var A = board.create('point', [-1, 0], {
        name: 'A',
        transitionDuration: 2000,
        transitionProperties: ['cx', 'cy']
    });
 </script>

/*
This example is licensed under a 
Creative Commons Attribution 4.0 International License.
https://creativecommons.org/licenses/by/4.0/

Please note that you have to mention 
The Center of Mobile Learning with Digital Technology
in the credits.
*/

const BOARDID = 'your_div_id'; // Insert your id here!

const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-5, 5, 5, -5],
    axis: false
});

var A = board.create('point', [-1, 0], {
    name: 'A',
    transitionDuration: 2000,
    transitionProperties: ['cx', 'cy']
});

<button onClick="A.moveTo([3, 3], 0);">Move "A"</button>

<div id="board-0-wrapper" class="jxgbox-wrapper " style="width: 100%; ">
   <div id="board-0" class="jxgbox" style="aspect-ratio: 1 / 1; width: 100%;" data-ar="1 / 1"></div>
</div>

<script type = "text/javascript"> 
    /*
    This example is licensed under a 
    Creative Commons Attribution 4.0 International License.
    https://creativecommons.org/licenses/by/4.0/
    
    Please note that you have to mention 
    The Center of Mobile Learning with Digital Technology
    in the credits.
    */
    
    const BOARDID = 'board-0';

    const board = JXG.JSXGraph.initBoard(BOARDID, {
        boundingbox: [-5, 5, 5, -5],
        axis: false
    });
    
    var A = board.create('point', [-1, 0], {
        name: 'A',
        transitionDuration: 2000,
        transitionProperties: ['cx', 'cy']
    });
 </script>