Shaking popups and popup animation?

Some French Dude

SomeFrenchDude
Messages
679
Reaction score
89
On some other sites, I have seen very effective popups shaking very quickly to grab your attention.

Also, I see some sites having a popups moving on the right hand corner of the screen from outside the screen.

Is that possible with MD popups?
 

Alex

MD developer
Messages
4,883
Reaction score
1,138
Yes, fortunately those are usually pretty simple CSS animation effects that can be applied to the MD popup HTML container. I may have to do a tutorial on this, and maybe this will make it as a core feature.
 

Some French Dude

SomeFrenchDude
Messages
679
Reaction score
89
Yes yes and yes! Quick quick quick! :)

I am the type of MD users - a pure marketer and content producer - who love (and need) such tutorials!
Btw, have you done the tuto about the way you created your slanted screenshots? I have photos waiting for it. :)
 

Some French Dude

SomeFrenchDude
Messages
679
Reaction score
89
Here is another nice popup I stumbled across:

1588418482937.png

It cam with a fluid zooming animation.

@Alex , you were talking about tutorials to teach MD users (non developers) to create their customized popups. I really need that! Hopefully it ranks high in your priority list. Keep up the good work.
 

Some French Dude

SomeFrenchDude
Messages
679
Reaction score
89
Some news about the Popup tutorial?

One question/Ideas for improvement: Will the Show Delay affect an Exit Popup in any way?

It seems like the following settings will make the Popup appear on the page after 5 seconds, when it should ONLY show on exit intent, right? I set it to 0 seconds and it works, but either I'm missing something here or the GUI could be optimized by automatically blocking the Show Delay once you select Show on exit intent.

1589016490384.png
 

Alex

MD developer
Messages
4,883
Reaction score
1,138
Thanks for the kind words, we are making something happen daily. When we DO create that tutorial it will go something like this:

1) Let's add a "top to down" animation to any popup that opens:

See preview: https://www.dropbox.com/s/cd703njglcnkf9n/Screen Recording 2020-05-22 at 02.15 PM.mov?dl=0

2) We can write this simple CSS that will work in most browsers:

CSS:
/* APPLY ANIMATION BASE TO ANY ELEMENT */

.md-popup {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/* ANIMATION: BACK IN DOWN */

.md-popup {
    -webkit-animation-name: backInDown;
    animation-name: backInDown;
}

@keyframes backInDown {
    0% {
        -webkit-transform: translateY(-1200px) scale(0.7);
        transform: translateY(-1200px) scale(0.7);
        opacity: 0.7;
    }   
    80% {
        -webkit-transform: translateY(0px) scale(0.7);
        transform: translateY(0px) scale(0.7);
        opacity: 0.7;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

/* ADD NEW ANIMATION TO ELEMENT */

.md-popup {
    -webkit-animation-name: backInDown;
    animation-name: backInDown;
}
3) What does it all mean? Basically any time I need advanced animations I go to the Animate.css library and reverse engineer their massive library of effects to only pull the CSS I need for the effects I need. To break down the above code by each comment section:

CSS:
/* APPLY ANIMATION BASE TO ANY ELEMENT */
This makes any element animation ready but does not do anything until we add our own effect. So the first step to adding your own animations to elements is to "register" its class name in this section.

CSS:
/* ANIMATION: BACK IN DOWN */
Now let's create our animations here. This animation loads the element from the top of the page down to where it is positioned, and pulling from the Animate.css library we can easily find the effects for the code we want and paste them here. The way I found this effect you asked for is by doing:

1) On the Animate.css homepage I played with the effects in the sidebar until I found the one I wanted:

Image 2020-05-22 at 2.23.14 PM.png

Then click the small icon that appears when you hover over the effect name to copy the selector to your clipboard.

2) Now go to the Animate.css Github page and search the selector. For the rest of this example I will use the animate__wobble class which brought me this result:

CSS:
.animate__wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}
Paste that into your custom CSS. You can now change the .animate__wobble class to any element you want to just directly apply the animation to (like we did in MD popups)

3) Now look at the animation-name in the last code example and search for the name, which in this case is just wobble. Search the rest of the stylesheet to find the code that actually creates the wobble effect and copy the @keyframes wobble query:

Image 2020-05-22 at 2.29.11 PM.png
I know this is a lot and you will see many duplicate looking lines as animations are handled differently by browsers, so many of them have browser prefixes to help browsers understand the animations better. I personally find that most browsers are good at handling animations, and if it doesn't, it should fallback to MD's default display of a simple fade effect for popups so no real harm done by not copying the browser prefixes. Plus it saves a lot of code. Now save your final CSS and your new effect should show up.

-----

Hopefully this was clear, and you can probably see by how much code is involved why I haven't made a full featured animations library in MD. However, I think this will make a perfect addon with the upcoming MD Dropins manager, so you will be able to simply import the Animate.css library into your site and enable its use on various MD features including popups. For now this is a lightweight way to animate your site and with a little elbow grease will do so in a minimal way.

Let me know how this works for you @Some French Dude, simply copying the first snippet in my post will give you the effect you are looking for.
 
Top