We Keep Coding

Foundation 6 Drilldown Animation Speed

I'm aiming to apply custom animation speeds to the Foundation 6 drilldown menu in Foundation 6 For Sites. I know that in _settings.scss, you a can alter the initial click animation through $drilldown-transition, however the animation parameters are ignored when going back a level in the drilldown.
I've checked dist > assets > css > app.css to see if some other parameter or some kind of hidden bit of CSS was controlling this, but it's evident to me that it's handled via JS beyond just adding / removing classes.
TLDR; I'm looking for insight on how to control the animation speed / style of the drilldown menu when going back a level vs going forward a level.
EXP: https://media.giphy.com/media/X8M8Hax10K9SslPN1v/giphy.gif

The close-speed was due to the following lines, viewable in dist > assets > css > app.css
.drilldown .is-drilldown-submenu.is-active {
z-index: 1;
display: block;
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
.drilldown .is-drilldown-submenu.is-closing {
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
The shift from -100% to 100% is too extreme to really get the smooth feel you'd expect. Reducing 100% to 5% resolved the issue.
.mobile_nav > .grid-x > .cell > .is-drilldown .drilldown .is-drilldown-submenu.is-closing {
-webkit-transform: translateX(5%);
-ms-transform: translateX(5%);
transform: translateX(5%);
}

Unwanted whitespace created by CSS transition animation

I was creating scroll triggered css animations, and I'm having trouble with my off screen transitions from the right. The animation works exactly how I want it to, but it's creating unwanted whitespace on the side of the page. The size of this white space seems to correspond to the transition I set, and doesn't go away until I've triggered all the animations on the page. Any ideas on how to remove this whitespace so that the elements are moving in from off the canvas?
Here is the link to my testing environment
http://lamp.cse.fau.edu/~zellis1/test/
/*Slide in right*/
.slidein-right{
opacity: 0;
-moz-transition: all 750ms ease-out;
-webkit-transition: all 750ms ease-out;
-o-transition: all 750ms ease-out;
transition: all 750ms ease-out;
-moz-transform: translate3d(100px, 0px, 0px);
-webkit-transform: translate3d(100px, 0px, 0px);
-o-transform: translate(100px, 0px);
-ms-transform: translate(100px, 0px);
transform: translate3d(100px, 0px, 0px);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.slidein-right.in-view{
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}

Not related to css animation, one thing you could do to fix this, is to add overfrlow-x: hidden; to your body.
body{
overflow-x: hidden;
}

As your are using transform to animate the elements and CSS specification for transforms (the method by which Animate.css moves the elements) specifies that elements should affect the overflow of the browser and hence the body overflows until all the transform animation are over.
you can add overflow:hidden (better overflow-x:hidden as you are transforming in x-direction only) on the containing element.
Add this CSS
animation-fix{
overflow-x:hidden;
}
and add class animation-fix to body and remove it on all animation completes.
you can do this by checking the number of divs with .animation-element.in-view class is equal to the number of divs with .animation-element class you have in html.

This guy here is always your friend when you get rogue white spaces coming out the woodwork:
overflow: hidden;
overflow-x: hidden;
overflow:y: hidden;
If the anomaly is directly to the right, then probably overflow-x will be the guy you want. I also recommend checking it out in other web browsers after to make sure it is completely solved.
Check Chrome, Firefox, Safari, and IE or Edge. Just to get a nice rounded out sample. Check it on a smartphone too. Sorry my background is QA, I'm just trying to install some bonus logic because consistency is key.
As part of this, I highly recommend pressing say F12 and directly editing the CSS on the page because it might be occurring on a different layer than you expect.

How to run a hide function and an animation when document.ready(function)

this is my first question because I can't find a similar one.
So, I try to hide some elements when my page is ready and also an animation. It just doesn't work. Sorry for my English and I'm also very new to Jquery. Here you see the code:
$(document).ready(function(){
$("#mainbox-search-main").show();
$("#mainbox-search-extra").hide();
$("#mainbox-login").hide();
$("#mainbox-register").hide();
$("#mainbox-pasfor").hide();
$(".fab").animate({
-webkit-transition-duration: 1s /* Safari */
transition-duration: 1s
-ms-transform: rotate(180deg) /* IE 9 */
-webkit-transform: rotate(180deg) /* Safari */
transform: rotate(180deg)
});
});

It's hard to replicate it without a JSFiddle: http://www.jsfiddle.net
However, to make it easier on yourself just add a class with those properties:
JQuery
$(".fab").addClass('animate-it');
CSS
.animate-it{
-webkit-transition-duration: 1s /* Safari */
transition-duration: 1s
-ms-transform: rotate(180deg) /* IE 9 */
-webkit-transform: rotate(180deg) /* Safari */
-moz-transform: rotate(180deg) /* Firefox */
transform: rotate(180deg)
}
In addition, you don't really need to hide any elements when the document is being loaded. Just initially set those displays to none.
#mainbox-search-extra, #mainbox-login, #mainbox-register, #mainbox-pasfor{
display:none;
}
When you want to show them, just use the show() method that you have used for the #mainbox-search-main element.
Addressing Unnecessary Lag Time
I also want to point out that you may want to add a delay to the animation in case there is some undesired lag time between when the animation fires, and the DOM is considered to be loaded.
$(".fab").delay(500).addClass('animate-it');
Conclusion: Adding a Callback Function
With the hidden elements being taken care of in the CSS, we have a shorter amount of code to work with. To ensure that the animate happens AFTER the #mainbox-search-main element is shown, try adding a callback function to it:
$(document).ready(function(){
$("#mainbox-search-main").show(function(){
$(".fab").delay(500).addClass('animate-it');
});
});

CSS - Using hover to affect multiple elements differently

I'm looking to create something akin to the Mac App Dock. Basically, I have an number of divs all next to each other with the same class, and a unique ID (done through php).
Currently, when you hover over one element, it magnifies it using transform, however this doesn't affect the elements adjacent to them.
I'm wondering if there's a way to essentially make it so item-2 has a hover effect of transform:scale(2.0), and upon hovering over that element, item-1 & item-3 would get an effect of transform:scale(1.5);
Although, I imagine this is impossible in css. If so, is there a way I can achieve this effect in php or javascript somehow?

This is tricky since transform: scale doesn't seem to behave consistently across browsers.
I put together some CSS and Javascript to do what you described, although making it look good on all browsers would take much more time.
Try out my demo here: CodePen
HTML
<ul id="list">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>
CSS
#list li:hover {
zoom: 2;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
position: relative;
z-index: 999;
}
.beside {
zoom: 1.5;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
Javascript (jQuery)
$('#list li').on("mouseenter", function() {
$(this).prev().addClass("beside");
$(this).next().addClass("beside");
});
$('#list li').on("mouseleave", function() {
$(this).prev().removeClass("beside");
$(this).next().removeClass("beside");
});

How to zoom in to the center of a div

I want to create a zoom in effect on my large div. I have searched many questions and still don't know how this work.
I want to be able to zoom into the center of the user screen instead of the set position.
http://jsfiddle.net/kB27M/1/
I have tried css3 zoom feature and animate zoom property but still can't pull this one. Can anyone help me about it? Thanks a lot!

You should scale the div:
.scaled {
-moz-transform: scale(3);
-webkit-transform: scale(3);
-ms-transform: scale(3);
transform: scale(3);
}
div {
transition: all 500ms ease-in;
}
Simply apply the CSS class to the div and then use the transitionEndevent to apply further styles via .animate().
On transitionEnd (discard live(), use on()): jsfiddle