GSAP with Assets Plugin

The animation below is powered by a GSAP script that is included for this particular page via the assets plugin. The assets are called at the top of the page and are only used on this page. This is a good thing. The animation is an exercise to determine the best way to include GSAP scripts into a page.

One further observation is that the animation element does not appear on any of the summary pages. Keep this in mind when building the page. Best to include a static header image instead of an animation header.

Use the 'Assets' plugin to quickly test out little scripts directly with the the item.md page. When satisfied with the functioning of the script it can be removed from the originating page and pasted into the GSAP scripts repository -- /user/pages/custom-scripts/greg-gsap.js. This page of scripts is loaded in the footer area through the code in /user/themes/gregTheme/templates/partials/base.html.twig.

It is important to remember that the Assets plugin only be used as a development tool. The reason is that Assets will write the scripts as in-line javaScript inside the head element on each page. This is very bad practice and should be avoided.

I have since found that using the Assets plugin is still the preferred method for including specific styles and scripts on a particular page. The difference being is that the styles or scripts need to be placed in their own .css or .js files which are stored in the article's folder. It seems that with this method the style or script are called only when the page is viewed.

Not sure what happens when the styles and scripts are "pipelined" for use on the production server. It appears to me that they are bundled into the combined, minimized files? Need to look into this further.

.circ-moveOnClick {
    width: 200px;
    height: 200px;
    background: hsl(27, 84%, 50%);
    position: relative;
    border-radius: 50%;
    margin: 1rem 0;
}

document.addEventListener("DOMContentLoaded", function(event) {
    "use strict";
        var play = document.getElementById('btn');
        var tl;

    tl = new TimelineLite({paused: true});
    tl.to('.circ', 2.0, {
        x: 300
    });
    // Use native GSAP progress, play and restart methods
    play.addEventListener('click', function() {
        if (tl.progress() < 1) {
            tl.play();
        } else {
            tl.restart();
        }
    }, false);
});

Next Post Previous Post