Home/ Questions/Q 6770861
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T15:21:50+00:00

Please refer this fiddle , I have tried to create an animation where a

  • 0

Please refer this fiddle,

I have tried to create an animation where a div flies in, then text appears one character at a time.

I want more of a smooth writing effect – what I have created resembles more of a typing effect.

Is there any jquery plugin that does this?
Or can I enhance my code to achieve it?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It would be tricky, but you could probably do this using svg animations using the raphael javascript library. Below some code that’s slightly adapted from the raphael animation demo as a proof of concept. Obviously you would have to have several gradual path animations to get the effect that you actually want.

    <html>
    <head>
        <meta charset="utf-8">
        <title>Raphaël · Animation</title>
        <link rel="stylesheet" href="http://raphaeljs.com/demo.css"media="screen">
        <link rel="stylesheet" href="http://raphaeljs.com/demo-print.css"media="print">
        <style media="screen">
            #holder {
                height: 419px;
                margin: -205px 0 0 -305px;
                width: 619px;
            }
        </style>
        <script src="http://raphaeljs.com/raphael.js"></script>

        <script>
            Raphael.fn.arrow = function (x, y) {
                return this.path(["M", x, y] + "m-10-10l20,0 0-6 10,16 -10,16 0-6 -20,0 0,6 -10-16 10-16z").attr({fill: "#fff", stroke: "none", "stroke-dasharray": "-", "fill-opacity": 0.2});
            };
            window.onload = function () {
                // var r = Raphael("holder", 619, 419),
                var r = Raphael("holder", 619, 419), //Raphael(0, 0, "100%", "100%"),
                    dashed = {fill: "none", stroke: "#666", "stroke-dasharray": "- "};
                // Path 3
                (function () {
                    var el = r.path("M20,290c0-20 40,20 40,0").attr({fill: "none", stroke: "#fff", "stroke-width": 2}),
                        elattrs = [{path: "M20,290c0-20 40,20 40,0c0-20 -40,20 -40,0z"}, {path: "M20,290c0-20 40,20 40,0c"}],
                        now = 1;
                    r.arrow(90, 290).node.onclick = function () {
                        el.stop().animate(elattrs[+(now = !now)], 1000);
                    };
                })();
            };
        </script>
    </head>
    <body>
        <div id="holder"></div>
    </body>
</html>
    • 0