Develop Reference

css animation on sidebar close

In this stackblitz, I am not able to add animation while closing, I tried it using transform, but it didnt seem to work
HTML
Blocker is used to covering the full screen in a half-transparent mode in mobile devices
const sidebar = document.querySelector('.sidebar');
sidebar.querySelector('.blocker').onclick = hide;
function show() { // swipe right
sidebar.classList.add('visible');
document.body.style.overflow = 'hidden';
}
function hide() { // by blocker click, swipe left, or url change
sidebar.classList.remove('visible');
document.body.style.overflow = '';
}
function toggle() {
sidebar.classList.contains('visible') ? hide() : show();
}
.sidebar {
/* it's a mobile sidebar, blocker and content */
position: fixed;
top: 0;
left: 0;
width: 100vw;
/* to cover the whole screen */
height: 100vh;
padding: 0;
/* to override the default padding */
background: rgba(0, 0, 0, .5);
/* half transparent background */
display: none;
z-index: 99999;
/* to be on top of any other elements */
}
.sidebar.visible {
display: block;
}
/*cover the whole screen and to detect user click on background */
.sidebar .blocker {
position: absolute;
width: 100%;
height: 100%;
}
/* user content */
.sidebar .content {
position: absolute;
top: 0;
left: 0;
background: #FFF;
height: 100%;
width: 250px;
left: -50%;
/* will be animated to left: 0, by animation */
animation: slide 0.5s forwards;
}
#keyframes slide {
100% {
left: 0;
}
}
<div class="sidebar">
<div class="blocker"></div>
<div class="content">
Sidebar Content
</div>
</div>
With the above code, you can have a working sidebar.
Check the working code from stackblitz
https://allenhwkim.medium.com/mobile-friendly-sidebar-in-few-minutes-7817b5c5239f
https://stackblitz.com/edit/medium-sidebar-1-eevvax?file=style.css,index.js

You can't animate between display:block (when .sidebar has .visible applied to it) and display:none (when .visible is removed from .sidebar).
display:none turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements (i.e. .blocker and .content) also have their display turned off.
The reason you get an animation upon adding .visible is that .sidebar now "exists" and so .sidebar-content also exists and as such animates. As soon as you remove .visible, .sidebar ceases to exist again and so it and its descendants disappear instantaneously.
You are along the right lines using transforms but you need to remove display:none as the method for hiding the sidebar. Something like the below is a good starting point. You may need to change some values to get it looking exactly as you wish. I have added a working codepen to show the result.
.sidebar {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
padding: 0;
background: rgba(0, 0, 0, .5);
z-index: 99999;
transform: translateX(-100%); // new property - will move the element off the left hand side of the screen
transition: transform .5s ease-in-out; // new property - will make the sidebar slide in in a similar manner to your animation
}
.sidebar.visible {
transform: translateX(0); // new property - makes sidebar sit in its natural position (i.e. taking up the whole viewport)
}
.sidebar .blocker {
position: absolute;
width: 100%;
height: 100%;
}
.sidebar .content {
position: absolute;
top: 0;
left: 0;
background: #FFF;
height: 100%;
width: 250px;
}

Transition is jerky when the element is slide up and down on mobile devices?

I've created a modal that slides up and down on click using CSS and jQuery.
When viewed on the desktop, it looks "OK" ish but when viewed on mobile devices, its jerky. Especially when the modal goes down.
What I am tryingt o achieve is a very smooth slide up and down. I did come across quite a few similar questions but I don't see any difference between what I am doing and what was suggested to other people to fix this issue.
The main purpose of this modal is to be used in a hybrid mobile app in phonegap. And this modal should look similar to YouTube player on iPhones.... So if you open YouTube on your mobile device, and play a video, on the top left, you will see an arrow that's pointing down. If you click/tap on that, you will see that YouTube player will get minimise. That is the sort of animation that I am trying to achieve.
This is what I have so far:
https://jsfiddle.net/zshk3nex/1/
$(document).on('click', '.tol', function() {
if ($('.hid-box').hasClass("easout")) {
$('.hid-box').removeClass("easout");
$('.hid-box').addClass("easin");
$('.hid-box').css('top', 0);
} else {
$('.hid-box').addClass("easin");
$('.hid-box').css('top', 0);
}
});
$(document).on('click', '.minifyBtn', function() {
if ($('.hid-box').hasClass("easin")) {
$('.hid-box').removeClass("easin");
$('.hid-box').addClass("easout");
$('.hid-box').css('top', '90%');
} else {
$('.hid-box').addClass("easout");
$('.hid-box').css('top', '90%');
}
});
.holder {
height: 100%;
width: 100%;
overflow: hidden;
background: red;
position: absolute;
z-index: 9999;
top: 0;
height: 100%;
left: 0;
}
.hid-box {
height: 100%;
width: 100%;
overflow: hidden;
background: #ff0;
position: absolute;
z-index: 9999;
top: 100%;
height: 100%;
}
.easin {
transition: all 0.2s ease-in;
}
.easout {
transition: all 0.6s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
<button class="tol">
click here to show modal
</button>
<div class="hid-box">
<div style="position:absolute;width:100%;height:100%;top:0;left:0;background:none;z-index:999;">
<h1 class="minifyBtn">CSS3 slide up</h1>
<p style="text-align:center;">
<div style="text-align:center;" class="dsp player4" id="player4"></div>
</p>
</div>
</div>
</div>
Could someone please advice on this issue?

Absolute properties such at top and bottom aren't great for animations. Instead you could use transform. transform performs far better in animations and transitions.
When using percentages in transform the percentage is based on the elements box, rather than the parent, like with almost all other css values.
Another thing that could help improve performs is to narrow down your transition property. In your case you have selected to transition all properties. You could set it to only transition the properties you need. In this case that would be transition: transform 0.2s ease-in. While this won't necessarily.
Let's clean up your code a little bit.
$(document).on('click', '.tol', function() {
$('.hid-box').toggleClass("active")
});
.holder {
height: 100%;
width: 100%;
overflow: hidden;
background: red;
position: absolute;
z-index: 9999;
top: 0;
height: 100%;
left: 0;
}
.hid-box {
height: 100%;
width: 100%;
overflow: hidden;
background: #ff0;
position: absolute;
z-index: 9999;
top: 100%;
height: 100%;
transition: transform 200ms;
}
.hid-box.active {
transform: translateY(-100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
<button class="tol">
click here to show modal
</button>
<div class="hid-box">
<div style="position:absolute;width:100%;height:100%;top:0;left:0;background:none;z-index:999;">
<h1 class="minifyBtn">CSS3 slide up</h1>
<p style="text-align:center;">
<div style="text-align:center;" class="dsp player4" id="player4"></div>
</p>
</div>
</div>
</div>
I've removed the vast majority of the jQuery you used, only toggling a single class now. I've moved the transition to the main element. I've also added a active class which simply sets the transform property to translateY(-100%). This means it will move it -100% of the elements height.
All of this should make it perform better on mobile. However at the end of the day it will also depend on the strength of your device. If it is somewhat older it might not perform as well.
I hope that helps!

How does photoswipe apply styles to blur image when you click on share button?

You can see example here: http://codepen.io/dimsemenov/pen/gbadPv
Click on Share button and you'll see it blurs the image (and everything else).
I am observing this in inspector and I can't figure it out.
I have downloaded source code and it set a watch in photoswipe-ui-defaults.js in this last line:
_openWindowPopup = function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
pswp.shout('shareLinkClick', e, target);
It never gets executed.
I have added other similar modal and I want to achieve same effect, but I can't figure out what is being done to achieve that blur.

Well, it would looks partly complicated that's why it isn't clear for the first look.
There all time rendered .pswp_share-modal with this css
Share Modal:
.pswp_share-modal {
display: block;
background: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 10px;
position: absolute;
z-index: 1600;
opacity: 0;
-webkit-transition: opacity .25s ease-out;
transition: opacity .25s ease-out;
-webkit-backface-visibility: hidden;
will-change: opacity;
}
When you click to the "share" button somewhere in js .pswp__share-modal--fade-in class attaches to the same element with this css:
Modal with fade in effect:
.pswp__share-modal--fade-in {
opacity: 1
}
As you can see the general idea is to turn opacity to 100% when share modal is active. Blur effect is exist cause actual modal background has rgba(0,0,0,0.5);

What you have to do is add an extra div, make it full screen, and then add a background to the div. I have an example here (it looks ugly but you'll catch what I'm trying to say).
$(document).ready(function() {
$('#modal-btn').click(function(){
$('.modal').css("display","block");
});
$('.modal').click(function(){
$(this).css("display","none");
});
});
html, body {
background-color: #000;
color: #fff;
height: 100%;
width: 100%;
z-index: 1;
}
.modal {
background-color: #000;
background-color: rgba(0, 0, 0, 0.5);
display: none;
height: 100vh;
position: absolute;
top: 0;
left: 0;
width: 100vw;
z-index: 2;
}
.modal-content {
background-color: #aaa;
height: 50%;
margin: 10px auto;
text-align: center;
width: 50%;
z-index: 3;
}
<html>
<head></head>
<body>
<!-- Page content -->
<div>
The content that goes in the background.
<button id="modal-btn" class="btn">Open Modal</button>
</div>
<!-- Modal -->
<div class="modal">
<div class="modal-content">The Modal Content</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</body>
</html>

horizontal navigation slide out with grow effect

I want to recreate an effect I saw on airforce.com . It's right below the hero, I poked around a bit and can't seen to find out what they did.
It looks like it was developed using knockout but I would like to recreate it using jQuery and Css.
If you know what the effect is called or know of a library that can achieve this, PLEASE let me know thanks!
https://www.airforce.com/

I created a simple mockup of the effect using css only. View fiddle
https://jsfiddle.net/rob_primacy/p6ee9d71/2/
<div class="image-block">
<div class="image"></div>
</div>
.image-block {
position: relative;
width: 300px;
left: 200px;
}
.image {
display: block;
position: absolute;
left: 0;
right: 0;
overflow: hidden;
transition: all ease .3s;
height: 600px;
background: url("http://www.difrusciaphotography.com/wp-content/uploads /2015/08/Place-to-unwind_Lake-Kananaskis-Alberta-Canada.jpg") #000 no-repeat center center;}
.image-block:hover .image {
left: -40px;
right: -40px;
transition: all ease .3s;
}

Upside down tab like tabzilla from the Mozilla.com website

Mozilla.com has this tab on the top of their site that you can click and a menu drops down. I have a client who wants me to do the same thing but upside down, from the bottom half of the page. Apparently this is a really hard request. How do I make something like tabzilla that goes up and either overlaps or pushes the content away? Thanks!
Update: I love you guys.
Edit: http://hemakessites.com/mayukh/4/ Why does the top "Sign In/Register" pop down and the "Toggle" on the bottom pops up? I'm not seeing the difference besides 'top' and 'bottom' in the css. How does that change the direction of the popup?
Also, clicking the '337-9147' will expand the menu. I only want the button region to be clickable. How can I accomplish this?
You guys are awesome and I'm going to return the favor by answering some questions on here when I get time.

I took a similar approach as others, in that you set a div to have a fixed, or absolute position at the bottom of the screen (depending on whether the tab should always be visible, or only at the very bottom). Then, you can write some very simple javascript to vary the height of the element, and as the bottom is fixed, it will cause the tab to rise into the screen.
Essentially all you need is
.container{
position: absolute;
bottom: -1px;
}
And
$('.container').toggle(function(){
$(this).animate({height:'205px'}, 500)
},function(){
$(this).animate({height:'20px'}, 200)
});
Here's a jsfiddle demo.

Here's a jQuery solution, which is smoother than css3:
So, you'll want to do something like this jsfiddle (NOTE: This requires jQuery):
http://jsfiddle.net/cFkn2/
$(document).ready(function() {
$('#tab').click(function() {
if ($('#tab').css('height') == '20px') {
$('#tab').animate({
height: '100px'
}, 1000);
}
else {
$('#tab').animate({
height: '20px'
}, 1000);
};
});
});
and
#tab{
position: absolute;
bottom: 0;
width: 100%;
background-color: red;
height:20px;
}
and
<div id="tab">CONTENT</div>
Style, edit, and add easing to taste.

I was lazy to make here click handler, so it is css3 only hover sample
I used fixed position with {top: 100%}, transition for animation, margin <0 to show;
HTML
<div id="menu">
<div id="handler">handler</div>
<div id="menucontent">
menu menu<br>
menu menu<br>
</div>
</div>
<div id="content">
<div> text text text</div>
<div> text text text</div>
<!-- many of them -->
<div> text text text</div>
<div> text text text</div>
<div> text text text</div>
</div>
CSS:
#content > div {
font-size: 2em;
height: 2.1em;
border: 1px solid black;
margin-top: 10px;
}
#menu {
left: 30px;
position: fixed;
font-size: 20px;
width: 300px;
height: 300px;
top: 100%;
border: 1px solid red;
background: white;
-webkit-transition: all 1s;
-mozilla-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
#menu #handler {
position: absolute;
top: -40px;
background: green;
font-size: 30px;
height: 40px;
padding-left: 5px;
padding-right: 5px;
left: 10px;
}
#menu:hover {
margin-top: -300px;
}
with click, or
JS:
$(function() {
$('#menu #handler').click(function() {
$('#menu').toggleClass('shown');
});
});
in css change hover to class shown
#menu.shown {
margin-top: -300px;
}