Options: direction

The direction option determines how will the generated spans be added to the container element.

This option is not taken into consideration when using .applyToElementsSequentially().

direction="ltr" (default)

If you do not specify any direction option, the default: "ltr" is used. Spans are added from left to right.

direction="rtl"

Spans are added from right to left.

Example

Yoda is a fictional character in the Star Wars space opera franchise created by George Lucas, first appearing in the 1980 film The Empire Strikes Back.

JS CSS HTML


var rules = {
    border: {
        values: ["7px solid #356244", "7px solid #12AD2A", "7px solid #63FF20"],
        steps: true,
    },
    transformRotateY: {
        values: ["0", "180"],
        steps: true,
    },
    transformSkewY: {
        min: -12,
        max: 12,
        steps: true,
    },
    transformSkewX: {
        min: -12,
        max: 12,
        steps: true,
    }

}

var opts = {
    direction: "rtl",
    split: "words"
}

var mixItUp = new generativeText(rules, opts);
mixItUp.applyToElementById("example1");


#example1 span { padding: 0.3em; }


<div id="example1">Yoda is a fictional character in the Star Wars space opera franchise created by George
Lucas, first appearing in the 1980 film The Empire Strikes Back.</div>