How to Animate your Next button with JavaScript and Bouncing Arrow

natestoker 18 July 2024 JavaScript or Logic

When you lock down the course, or if you need some kind of indicator that the learner can now move forward, sometimes the next button going from greyed out to normal state is not enough to draw attention. Imagine a “Next” button that subtly throbs with an eye-catching orange light. This kind of visual cue is like a friendly nudge, especially handy if your learners get a little lost or sidetracked.

The Secret Sauce: JavaScript and GSAP

  1. JavaScript: Think of this as the brains behind the trick, telling the button when and how to pulse.
  2. GSAP (GreenSock Animation Platform): This is our animation wizard, making the whole thing look smooth and professional.

The Magic Code

  (function() {
    // Define the function to highlight the next button using GSAP
    window.highlightNextButton = function() {
        var nextButton = document.getElementById('next');
        if (!nextButton) {
            console.error("Next button not found.");
            return; // Exit the function early if the next button isn't found
        }

        // Apply the border animation
        gsap.fromTo(nextButton, 
            { borderColor: "#FFFFFF" }, 
            {
                duration: 1,
                borderColor: "#CC5500",
                ease: "sine.inOut",
                yoyo: true,
                repeat: -1, // Pulse indefinitely
                borderWidth: "3px",
                borderStyle: "solid"
            }
        );

        // Create and animate the bouncing arrow
        var arrow = document.createElement('div');
        arrow.innerHTML = "⬇"; // Downward arrow
        arrow.style.position = "absolute";
        arrow.style.fontSize = "96px"; // Adjust as needed
        arrow.style.color = "#CC5500";
        arrow.style.zIndex = "9999"; // Ensure it's on top
        arrow.id = "nextButtonArrow"; // Assign a unique ID for easier reference

        document.body.appendChild(arrow);

        // Calculate and set the arrow's position
        var arrowRect = arrow.getBoundingClientRect();
        var nextButtonRect = nextButton.getBoundingClientRect();
        arrow.style.left = nextButtonRect.left + (nextButtonRect.width / 2) - (arrowRect.width / 2) + "px";
        arrow.style.top = nextButtonRect.top - arrowRect.height + 10 + window.scrollY + "px"; // Position above the button with padding

        // Animate the arrow
        gsap.fromTo(arrow, 
            { y: "-5px" }, 
            { 
                y: "5px", 
                duration: 0.5, 
                ease: "power1.inOut", 
                yoyo: true, 
                repeat: -1 // Bounce indefinitely
            }
        );
    };

    // Define the function to clear the highlight animation and remove the arrow
    window.clearHighlightNextButton = function() {
        console.log("clearHighlightNextButton called."); // Debugging log

        var nextButton = document.getElementById('next');
        if (nextButton) {
            // Kill any ongoing animations on the next button
            gsap.killTweensOf(nextButton);
            // Reset the border to its original state
            nextButton.style.borderColor = "";
            nextButton.style.borderWidth = "";
            nextButton.style.borderStyle = "";
        }

        // Remove the arrow element by its ID
        var arrow = document.getElementById('nextButtonArrow');
        if (arrow) {
            gsap.killTweensOf(arrow);
            arrow.remove();
        }
    };

    // Ensure clearHighlightNextButton is called at the correct place
    window.clearHighlightNextButton(); // Clear previous highlight and arrow if needed

    // Example usage (uncomment to test):
    // window.highlightNextButton();
    window.clearHighlightNextButton(); // Call this to clear after some condition
})();

Let’s Decode It 

  • highlightNextButton(): This part finds the “Next” button and tells GSAP to create a smooth animation. This code animates the “Next” button with a pulsing border and adds a bouncing arrow above it for emphasis.
  • clearHighlightNextButton(): This bit stops the animations and returns the button to its normal look.

How to Work Your Magic in Your eLearning Course

  • Add the Code: Paste the JavaScript code into the main master slide’s timeline start actions.
  • Start the Pulse: To make the button glow at specific moments (like when a learner reaches a certain point, the timeline ends, or completes a set of actions):
    • Create a JavaScript trigger.
    • In the trigger, add the code: highlightNextButton();
  • Stop the Pulse: To stop the glow when learners click “Next” or move to a new slide:
    • Place the code clearHighlightNextButton(); in the main master slide’s timeline. This ensures it runs every time there’s a slide change.

Important Note for Non-Coders:

Don’t be intimidated by the code! It’s often as simple as copying, pasting, and adjusting a few details. Feel free to experiment with different colors and pulse speeds to match your course’s unique aesthetic. Always remember to test thoroughly to ensure the pulsing effect looks.

Why This is a Big Deal for eLearning

In the world of eLearning, a simple pulsing “Next” button can subtly direct learners to the next step, making navigation more intuitive and enjoyable. It’s a small touch that can elevate the overall learning experience.

See video below.

Related Posts