JSFiddle - React, Tailwind, and code Playground

by Kenneth Luplau-Brøgger

HTML

<h1>Helloooo we are In2media!</h1>

SCSS

h1 {
    font-family: helvetica;
    font-size: 100px;
    font-weight: normal;
    line-height: 1em;
}

JavaScript

$.fn.headlineMasker = function(options) {
    options = $.extend({
        lineDelay: 500,
        speed: 800,
        animateFrom: {
            "top": "1em"
        }
    }, options);
    
    var lineWrapper = function($element) {
        var spanInserted = $element.html().split(" ").join(" </span><span>");
        var wrapped = ("<span>").concat(spanInserted, "</span>");
        $element.html(wrapped);
        var refPos = $element.find("span:first-child").position().top;
        var newPos;
        $element.find("span").each(function(index) {
            newPos = $(this).position().top   
            if (index == 0){
               return;
            }
            if (newPos == refPos){
                $(this).prepend($(this).prev().text() + " ");
                $(this).prev().remove();
            } 
            refPos = newPos;
        }).wrap("<span/>");
    };
    
    var $headline = $(this);
    var $backup = $headline.clone(true);
    
    //break into lines
    lineWrapper($headline);
    
    var $headlineWrappers = $headline.children("span")
    var $headlineLines = $headlineWrappers.children("span");
    
    $headlineWrappers.css({
        "background": options.background,
        "display": "block",
        "position": "relative",
        "overflow": "hidden"
    })
    
    $headlineLines.css($.extend({
        "display": "inline-block",
        "clear": "both",
        "position": "relative",
        "white-space": "nowrap"
    }, options.animateFrom));
    
    $headlineLines.each(function(i, line) {
        setTimeout(function() {
            var resetCSS = {};
            
            console.log("options.animateFrom.width", options.animateFrom.width);
            
            if (options.animateFrom.width !== undefined) {
                resetCSS.width = "100%";
            }
            
            if (options.animateFrom.left !== undefined) {
                resetCSS.left = "0";
            }
            
            if...