Skip to content

Animate like http://csswarp.eleqtriq.com/ #7

@deguich

Description

@deguich

Hi,

First : it's a great script !

I write in issue tab but it's more an evolution proposition. I tried to animate the text using the callback, a setTimeout and a new cssWarp call after changing indent value. But the animation is really slow. The text well follow the curve but it's not really fluid. Is there a solution to just recompute the letter position after changing one parameter (indent for example).

var myWarp = {  
                path        : [[0, 218],
                                [300, 190, 400, 180, 1026, 217],
                                [1300, 240, 1300, 240, 1598, 260]],  
                targets     : "#warped",          
                rotationMode: "rotate",   
                indent      : '10px',                    
                //showPath    : {thickness: 1, color: "black"}, 
                css         : <string>,*/                 
                callback    : redo 
};

function redo()
{
    setTimeout(function()
        { 
            var num = 5 + parseInt(myWarp.indent);
            myWarp.indent = num + 'px';
            if (num<=800)cssWarp(myWarp);
        }, 
        100);
}

Thx

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions