Popup entrance / exit animation?

How To
1

Errrrrm did I miss this somewhere? How to apply an entrance / exit animation?

I checked the bricks academy popup intro video and Thomas mentions it but doesn’t actually go into detail about how to apply the animation?

2

Hahah, I was scratching my head about this for a while!

Entrance animations are no longer under styles > layout. They are now inside the interactions menu!

Screenshot_10
Screenshot_10698Ă—1027 39.2 KB

1 Like
3

There’s no exit animation?

4

Well, it depends on how sophisticated you want it?

But for basic animations, you have both entrances and exits - for example, you could use combinations:

1 x interaction = enter viewport = FadeIN
1x Interaction = leave viewport = FadeOUT

There are obviously multiple combinations you can set up with different triggers, animations, etc.

If you are looking for something more than that, then Motionpage is probably the place to go at this moment in time.

5

In the popup template settings, I set interactions,

Trigger: Content Load
Delay: 1s (for test)
Action: Start Animation
Animation: FadeInDown
Animation Duration: 6s
Animation Delay:0

The animation doesn’t work and it just shows up the popup.

Am I doing something wrong?

3 Likes
6

This is working for me…

On the page with the popup trigger (button in my case)
Trigger: Click
Action: Start animation
Animation: fadein
Target: Popup
Popup: “Your popup”

On the popup template (Close Button in my case)
Trigger: Click
Action: Start animation
Animation: fadeout
Target: Popup
Popup: “Your popup”

2 Likes
7

While this works with buttons clicked, it doesn’t play the exit-animation on esc or if the backdrop is clicked. Any ideas?

8

there is no keyboard key trigger

I didn’t know esc was closing the popups :slight_smile:

you can write a button click simulating with .js when the esc button is clicked.
here run this .js on same page and setup the button class name to your button;

document.addEventListener('keydown', function(event) {
    // Check if the key pressed is 'Escape'
    if (event.key === 'Escape') {
        // Find the button with the class '.button-class'
        var button = document.querySelector('.button-class');

        // If the button exists, simulate a click
        if (button) {
            button.click();
        }
    }
});

tell me if it works or not I didn’t test it :slight_smile:

9

Thanks for answering! I tried your code snippet and I do see a small change of the box “trying” to fade out, but the animation get’s cut off by the popup simply dissappearing.

10

I am not surprised :rofl:

here try this :smiley:

let escapePressed = false;

document.addEventListener('keydown', function(event) {
    // Check if the key pressed is 'Escape'
    if (event.key === 'Escape' && !escapePressed) {
        escapePressed = true; // Set flag to true

        // Delay the execution of the following block by 1000 milliseconds (1 second)
        setTimeout(function() {
            // Here, perform the action you intended to do with the Escape key
            // For example, logging a message or executing a function
            console.log('Escape action performed after delay');

            // Find the button with the class '.button-class'
            var button = document.querySelector('.button-class');

            // If the button exists, simulate a click
            if (button) {
                button.click();
            }

            escapePressed = false; // Reset flag
        }, 1000); // 1000 milliseconds delay
    }
});
11

Sadly, that doesn’t work either. No animation at all when esc is pressed. I am thinking about submitting this to the idea board…

Once again, thanks for the effort!

1 Like
12

Found a solution! (with help from ChatGPT)

Make sure to set “Close on” to None in the template settings.

Then, use the following code to select the close button and simulate a click. I added a code element on the page where I want the popup, but you can also place it in the code section under Bricks settings.

CSS

/* Class to disable clicking on the backdrop */
.unclickable {
    pointer-events: none;
    opacity: 0.5; /* Optional: gives visual feedback that it's unclickable */
}

JS

// Function to simulate a button click
function triggerButtonClick() {
    // Find the button with the class 'closeanimatedpopup'
    var button = document.querySelector('.closeanimatedpopup');
    
    // If the button exists, simulate a click
    if (button) {
        button.click();
        console.log('Button clicked!');
    } else {
        console.warn('Button not found.');
    }
}

// Function to log a success message
function displaySuccessMessage(message) {
    console.log(message);
}

// Flag to track if Escape key was pressed
let escapePressed = false;

document.addEventListener('DOMContentLoaded', () => {
    // Handle Escape key press
    document.addEventListener('keydown', (event) => {
        if (event.key === 'Escape' && !escapePressed) {
            escapePressed = true; // Set flag to true

            // Trigger the button click
            triggerButtonClick();

            escapePressed = false; // Reset flag
        }
    });

    // Handle backdrop click
    const backdrop = document.querySelector('.brx-popup-backdrop');
    if (backdrop) {
        backdrop.addEventListener('click', () => {
            backdrop.classList.add('unclickable'); // Disable further clicks
            triggerButtonClick(); // Trigger the button click
            displaySuccessMessage('Success: Backdrop clicked!'); // Log success message
            
            // Re-enable clickability after 1 second
            setTimeout(() => {
                backdrop.classList.remove('unclickable');
            }, 1000);
        });
    } else {
        console.warn('.brx-popup-backdrop not found');
    }
});

Explanation:

  • CSS: The .unclickable class disables clicking on the backdrop by using pointer-events: none and adds an optional opacity change to indicate the backdrop is temporarily unclickable.
  • JS:
    • The code simulates a click on the close button (with class .closeanimatedpopup).
    • The backdrop click is handled to prevent further clicks for 1 second after the popup closes, using the unclickable class.
    • The Escape key also triggers the close button click if pressed.

This solution should work as intended, but feel free to tweak the timing or styles based on your preferences!