We Keep Coding

I am using some scroll animations but it is causing horizontal scroll out of the screen

I have set up some scroll animations on many elements of a site I'm building.
I'm using these CSS rules:
.hiddenLeft {
opacity: 0;
filter: blur(5px);
transform: translateX(-090%);
transition: all 1s;
}
.hiddenRight {
opacity: 0;
filter: blur(5px);
transform: translateX(90%);
transition: all 1s;
}
.show {
opacity: 1;
filter: blur(0);
transform: translateX(0);
}
The hiddenLeft and hiddenRight classes are in the elements by default, and then when they are intersected during vertical scroll the show classes are added.
It all works fine, except it has created horizontal scroll to the right out of the width of the site into blank space.
I would like to keep the animations as they are but without the horizontal scroll.
A picture of me scrolling out to the side into the blank space for reference:
enter image description here
I made a very basic replication here:
https://codepen.io/acodeaday/pen/NWMYWNL
I can see that the offending line is
transform: translateX(90%);
But that makes the animation very aesthetically pleasing. So I'm hoping there is a way to solve it while keeping that.

Try using
max-width: 100%!important; height: auto; overflow: hidden!important;
this code whatever you put all of your animation inside. That can be a div. Hope this help~

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

background transition fix and background dim on hover [fiddle inside]

I got completely stuck on this. I have a container with background image. Inside the container are 3 little circles. What I am trying to do is to zoom the background image when I hover over it and dim the background image when I hover over any of the 3 little circles.
I got to the point where the 3 circles are properly overlapping the container and the background zooms in on hover. But I have 2 issues
no. 1 I am not very fond of the way I am achieving the overlay of the circles, which is this code
#circle_wrap{
position: absolute;
margin-top: -130px;
}
no. 2 Is that I have no clue how to dim the background. My original intention was to have a hidden black conteniner with 0.5 opacity that would be displayed when I hover over one of the circles. But I couldn't figure out how to select the overlay.
JSFIDDLE here
If anything couldn't be solved with css only, I'd accept jquery solution as well.
I'm looking for any advice/tips/solutions you guys have, I really need to get this working.
Thank you.

Finally got so angry I am not able to do it with css that I made it with jquery :(
If anyone is interested here is the result
I have at least fixed the issue no1 with better css but the second is done with jquery.
solved no.1 with
.circle_wrap{
position: absolute; bottom: 0; width: 100%; height: 100px;
}
and applying position:relative on its parent
and the solution for no.2 is
$(".circle_wrap").hover(function () {
$(this).siblings("img").css("opacity", "0.2");
},
function () {
$(this).siblings("img").css("opacity", "1");
});
EDIT: safari support
.wrap img:hover{
-moz-transition: scale(1.1) rotate(0deg);
transform: scale(1.1) rotate(0deg);
-webkit-animation-name: scaleThis;
-webkit-animation-duration:5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function:ease-in-out;
}
#-webkit-keyframes scaleThis {
0% { -webkit-transform:scale(1) rotate(0deg); }
10% { -webkit-transform:scale(1.1) rotate(0deg); }
100% {-webkit-transform:scale(1.1) rotate(0deg); }
}

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 Tabs with Vertical Text in CSS

I have a series of .jpeg menu tabs, which contain vertical text, and are oriented vertically (height > width). Attempting to create vertical tabs, such that they go from the top to the bottom of the screen in series, but after reading some documentation, I'm still not sure exactly where to start. Any tips? Sorry for the extremely vague question, but most search results assume you want a vertical menu with horizontal text.

You can use word-wrap: break-word; combined with a narrow width value to force your text to wrap for every single letter: http://jsbin.com/ominus/1/edit
Rotating would look better, but it's another option!

If browser compatibility is not a priority, you can try using CSS3:
.rotated-text {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Should work on IE9+ */
}
Working example: http://jsfiddle.net/C3qrT/
Then you must work to align text as you want.