Trying to create animated dynamic fields in google web designer with custom javascript

Question

I found this JavaScript, and it animates the text perfectly, however how do I assign a dynamic field in Google web designer, to this script?

Below is the the jsfiddle link, to how the dynamic text will animate.

https://jsfiddle.net/MarilynM84/2angj8tL/

function airport(el, array) {

    var self = el;
    var items = array.length;
    var items2 = array.length;
    var chars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', ' ', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '-', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0','!','¿','?','-','+','.',',',"'",'"','ç','ñ','à','á','è','é','ì','í','ò','ó','ù','ú','À','Á','È','É','Ì','Í','Ò','Ó','Ù','Ú'];
    var longest = 0;
    var opts = {
        transition_speed: 2000,
        fill_space: false,
        longest: 0
    };

    //adds extra spaces to strings in array that are shorter than longest
    function pad(a, b) {
        return a + new Array(b - a.length + 1).join(' ');
    }

    self.innerHTML = '';

    //finds the longest string in array
    while (items--) {
        if(array[items].length > longest) {
            longest = array[items].length;
        }
    }

    //makes all strings in array the same length
    while (items2--) {
        array[items2] = pad(array[items2],longest);
    }

    spans = longest;
    while (spans--) {
        var span = document.createElement('span');
        span.className = 'c' + spans;
        self.insertBefore(span, self.firstChild);
    }

    //a - number of the span element
    //b - for checking char[b] against each letter in array[xx]
    //c - current word in array[c]
    //d - used to track position of each letter in array[xx]
    function init(a, b, c, d) {
        var el = self.querySelector('.c' + a);
        var current_letter = array[c] ? array[c].substring(d, d + 1) : null,
            timer,
            word_len = array[c] ? array[c].trim.length : null,
            prev_word_len = array[c - 1] ? array[c - 1].trim.length : array[0].trim.length;

        if (c >= array.length) { //reset
            timer = setTimeout(function() {
                init(1, 1, 1, 1);
            }, 10);
        }
        else if (d >= longest) { //go to next word

            timer = setTimeout(function() {
                init(0, 0, c + 1, 0);
            }, opts.transition_speed);
            console.log(opts);
        }
        else {
            el.innerHTML = chars[b] === ' ' ? ' ' : chars[b];
            timer = setTimeout(function() {
                if (b > chars.length) {
                    init(a + 1, 0, c, d + 1);
                }
                //go to next letter in chars[] if it doesnt match current letter in array[xx]
                else if (chars[b] !== current_letter.toLowerCase()) {
                    init(a, b + 1, c, d);
                }
                else { //found the letter here
                    el.innerHTML = current_letter === ' ' && opts.fill_space ? ' ' : current_letter;
                    if (word_len < prev_word_len) {
                        if (a > word_len) {
                            for (a; a < prev_word_len; a++) {
                                self.querySelector('.c' + a).innerHTML = '';
                            }
                            d = longest;
                        }
                    }
                    init(a + 1, 0, c, d + 1);
                }
            }, 10);
        }
    }

    init(0, 0, 0, 0);
}

// Call element by selected class or ID
airport(
    document.querySelector('.example'),

    // pass in data to be outputed here
    [ 'Dynamic Content',  ]
);

Please help, I'm very much a newbie when it comes to JavaScript, I'm learning as I go. Thank you!!

Answer 1

In Google Web Designer you can create a custom event to call the airport function.

From the Event Panel, add a new event. You can attach the event to Ad Loaded event or to a specific user behavior. As action, select 'Custom'.Add a new Custom Action. Here you can define a custom function, and inside the function add the code that you want to call.

Remember that every global variable is available via document.variable_name

Answer 2

Here's a dynamic solution to your original question less the Google Web Designer stuff. (Frankly, I'd recommend a new person doing websites to start out with simple tutorial, and use something like atom.io for your html/js/css tool. Find a decent book or tutorial, perhaps something like this. )

Here's an updated jsfiddle (Important Note: in the left hand margin of the jsfiddle page, select Frameworks and extensions no wrap in <body> )

https://jsfiddle.net/2angj8tL/2/

Slight rework of the html on top:

<body>
    <label for="textValue">New Text:</label>
        <input type="text" id="textValue" value="Place new text here." />
    <button onclick="hello()">Click me</button>
    <div class="example"></div>
</body>

and in the script portion, add:

function hello() {
    var textInputVal = document.getElementById('textValue').value;
    console.log(textInputVal);
    // Call element by selected class or ID
    airport(
        document.querySelector('.example'),
        // pass in data to be outputed here
        [textInputVal]
    )
}

If you insist on using Google Web Designer, you would go to the bottom of the development tool, click on the button for "Code View", then carefully add key elements of javascript to the <script type="text/javascript" id="gwd-init-code"> block. Be very careful here, so you don't erase or change any machine generated code.

Oops.. update here on Google Web Designer. Turns out that

Google Web Designer (GWD) is a graphical design tool for creating HTML5/CSS3/Javascript banners and advertisements using animations and 3D transforms. Using their graphical tools such as drawing, text, and 3D objects, you can animate these objects and events on a timeline using keyframes. GWD is clearly not designed to create fully-fledged applications or entire websites, but rather banners, popup ads, sidebars, animated buttons even, with a strong focus on projects for Doubleclick and AdWords campaigns.

So yeah, you could add custom JavaScript to those elements, but you should probably be pretty comfortable with JS first. There are many JS files generated in addition to the element mentioned above.