08-motion.htm

<!DOCTYPE html>
<html>
    <head>
        
        <title>Motion example</title>
        
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

        <!-- LIBRARY FILES -->
        <link rel="stylesheet" type="text/css" href="basic/basic.min.css">
        <script src="basic/basic.min.js" type="text/javascript" charset="utf-8"></script>

        <script>

        let box;
    
        window.onload = function() {
            
            // BOX: My box.
            box = Box({
                width: 120,
                height: 120,
                color: "orangered",
                round: 4,
            });
            that.center();
            // When there is a change, soften it with movement.
            that.setMotion("left 0.3s, top 0.3s, width 0.3s, height 0.3s");
            that.onClick(extendBox);
            
        };
        
        const extendBox = function(clickedBox) {

            clickedBox.width += 50;
            clickedBox.height += 50;
            clickedBox.center();

        };

        </script>

    </head>
    <body>
        
        <!-- HTML content -->
        
    </body>
</html>