Foundation 6 Drilldown Animation Speed - javascript

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%);
}

Related

Turn CSS animation into javascript

I would like to convert the following CSS animation into a JavaScript animation so that it functions on click of a div called "button".
#book1:hover>.hardcover_front {
-webkit-transform: rotateY(-145deg) translateZ(0);
-moz-transform: rotateY(-145deg) translateZ(0);
transform: rotateY(-145deg) translateZ(0);
z-index: 0;
}
I understand how to do the transformations in Javascript, just wondering how to do the trigger, so for the button on click to affect the .hardcover_front of #book1

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.

Browser Zoom to 75% when application loads on 1024x768

My application looks better when browser zoomed to 75% in IE 9.
When resolution is 1024x768 .
Can i make the IE 9 browser to zoom to 75%.
I tried with media queries.
#media (min-width : 980px) and (max-width: 1199px) {
.zoo {
transform: scale(0.75);
-webkit-transform: scale(0.75);
-webkit-transform-origin: 0 0;
-moz-transform: scale(0.75);
-moz-transform-origin: 0 0;
-o-transform: scale(0.75);
-o-transform-origin: 0 0;
-ms-transform: scale(0.75);
-ms-transform-origin: 0 0;
}
}
Added this css class to body.But it dosen't work

So you want to apply manual browser zooming using CSS and/or JS?
This is really not possible with CSS and/or JQuery. Manual browser
zoom and CSS zoom property both work differently and will produce
different results.
Alternative: On page load provide users with a modal window
instructing them how to manually Zoom in/out, close it after they have
zoomed successfully.
Source:
https://stackoverflow.com/a/30152402/2534513
Changing the browser zoom level

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

vertical menu/nav auto scrolling

I am looking for jquery plugin or something for my vertical menu. here is the scenario.. I have a long list of categories e.g. 70 categories, which I have to display in the right/left navigation, but I want them to display only 10 categories and soon as someone rolls over categories (up/down) it automatically scrolls up/down and shows remaining categories within the specific height (10 visible at a time), I hope my question is clear if not, I will demonstrate with images.. can someone please point me to the right direction.. thanks...
Edit: something like this but with only category names and in vertical direction : http://valums.com/files/2009/menu/final.htm

As MrOBrian said...you can edit the style part in the source code. This also depends on target browsers. Here is something to get you started...
div.sc_menu {
/* Set it so we could calculate the offsetLeft */
position: relative;
height: 145px;
width: 200px;
overflow: auto;
/* Added this part */
writing-mode: tb-lr;
filter: flipv fliph;
transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
/* Added this part */
}

Categories