Design animated pop-up panels with CSS

Be inspired by the simple but impressive 3D pop-up panel effect found on the Freewrite site


Be inspired by the simple but impressive 3D pop-up panel effect found on the Freewrite site



In this day and age, it is hard to completely switch off from so many distractions and actually get some work done.

Computers are fantastic at letting us read email, watch YouTube, catch up on social media and of course do our work. It’s a great tool, with great power, but with great power, of course, comes greater responsibility. Sometimes people just need to switch off from distraction, especially on the web so that they can create, and Freewrite has been designed to do just that. It is a dedicated writing implement; think of an older e-ink Kindle with a clickety, clackety keyboard and you’ve got a great idea of what it is. More and more devices like this are being produced for the Internet of Things. These smart devices are designed to do one thing well, usually connecting to the internet to get some data, or save data but without the distraction of having to actually open the dreaded web browser.

The site for Freewrite was built by the company that makes the Freewrite, Bonne Marque, and it focuses on showing off the device, but more importantly bringing it to life to show its benefits. Much of this has been done with beautifully animated CSS panels and elements.

1. Create the expanding panel

Add the code for this step to FileSilo. This creates the div structure for the panel. The block will expand up and outwards like on the Freewrite site, with the circle being the button to trigger this.

2. Add the CSS

Inside either style tags or a separate CSS file, start to add the CSS. This consists of creating some specific keyframes for the animation. These will be added to the elements when the user clicks the round button on the screen, which will trigger the animation.

@keyframes animation1 {
0% { transform: scale(0.01, 0); }
50% { transform: scale(0.01, 1); }
100% { transform: scale(1, 1); background: rgba(98, 123, 157, 1); } }
#block {
width: 400px; height: 400px;
position: relative;
top: 200px;
background: rgba(98, 123, 157, 0); }

3. Animate classes

The classes for this step will be added to respective elements after the user has clicked. They call the right animation keyframes for each element and will call to play once, then stop at the final keyframe of 100 per cent to leave the animation in that state.

4. Style the circle

The circle is the element that can be clicked on and this is positioned on the screen just over the original panel. The keyframes that follow this show the new position that the circle will animate to after it has been pressed, moving up on the screen.

#circle {
position: relative;
width: 80px; height: 80px;
left: 160px; top: 160px;
background: rgb(70, 85, 105);
border-radius: 50%;}
@keyframes animation2 {
0% {}
100% { transform: translateY(-400px);} }

5. Hide the text

When the page first loads, the text is set with its opacity to zero and hidden. When the circle is clicked, the show class will be added but there is a 1.5 second delay on the text so this will only animate as other elements are completing their movement into place.

#txt {
transition: all 0.5s ease;
transition-delay: 1.5s;
padding: 20px; }
.hide { opacity: 0; }
.show { opacity: 1; }

6. Make it happen

The circle calls the start function when it is clicked. The following should be added to script tags at the bottom of the page. The first three lines grab access to the elements, caching them in variables. The appropriate classes are added when clicked.

var block = document.getElementById("block");
var circle = document.getElementById("circle");
var txt = document.getElementById("txt");
var open = false;
function start() {
txt.classList.add("show"); }


Warning: file_get_contents( failed to open stream: HTTP request failed! HTTP/1.0 500 Internal Server Error in /var/www/html/ on line 9