In this video tutorial, we use the cloneNode function of Javascript to clone a png image of a sheep. And then we’ll move the clones using GSAP to create a nice division animation.

It was amazing to see that you can actually duplicate elements in Articulate Storyline 360 using Javascript.

I was inspired by Doctor Strange splitting into multiple clones during the battle with Thanos from Infinity War (lol), and I wondered if we could achieve this effect in Articulate Storyline 360.

Check out the documentation for the cloneNode function here: https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode

Here’s the video

Code used

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


var sheep = document.querySelector("[data-acc-text='sheep']");

// Function to execute when the button is clicked
function cloneElement(target, numClones) {
    // Calculate the step size based on the number of clones
    const step = 400 / (numClones - 1); // Total range is 400 (-200 to 200)

    for (let i = 0; i < numClones; i++) {
        // Clone the image
        const clone = target.cloneNode(true);

        // Append clones to the container
        target.parentElement.appendChild(clone);

        // Calculate the xPercent value for each clone
        const xPercent = -200 + step * i;

        // Animate each clone
        gsap.to(clone, { xPercent: xPercent, duration: 1, opacity: 1, ease: 'power2.out' });
    }
}

// Add event listener to the image
sheep.addEventListener('click', () => {
    cloneElement(sheep, 4); // Create 4 clones
    sheep.remove();
});