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.
Related
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%);
}
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
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');
});
});
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
Here is my problem
Fiddle
I have 4 divs, that are in position:absolute and their position is defined depending on their ids.
When the user clicks on a div, the div makes a transition in rotation and scaling.
My goal is to position the resulting div (yellow) at a very particular place: in the center of the parent node.
Right now in my Fiddle, it does rotate on itself which is not what I want.
What I tried among other things;
add to my transform transform:translate(x,y), but this is relative
to the div before it was clicked, which means each div will send the
transformed div to another position.
add left:5%;top:5%; in the hope that it would work, but it does
not.
add a transform-origin but again, it is relative to the div itself
and not the parent or body
My question: is it possible to define the position of a div during a transition with respect to the parent node instead of itself ?
The reason your top and left override wasn't working is because ID selectors are more specific than class selectors, and therefore take precedence. You can fix this using !important:
.isTurning{
background-color:yellow;
z-index:1;
-webkit-transition: -webkit-transform 0.3s ease-in-out, left 0.3s ease-in-out, top 0.3s ease-in-out;
-webkit-transform: scale(2) rotateY(180deg);
left:27% !important;
top: 25% !important;
}
or using specificity:
#b_1.isTurning, #b_2.isTurning, #b_3.isTurning, #b_4.isTurning{
background-color:yellow;
z-index:1;
-webkit-transition: -webkit-transform 0.3s ease-in-out, left 0.3s ease-in-out, top 0.3s ease-in-out;
-webkit-transform: scale(2) rotateY(180deg);
left:27%;
top: 25%;
}
Here is a demonstration: http://jsfiddle.net/Fs6Zw/
I removed the flipping effect that you didn't want.
I added position:relative on parent. So now when you position: absolute the children, they are positioned based on the parent.
And I placed the yellow squares in the center by doing this :
top:50% !important;
left:50% !important;
margin-top: -75px;
margin-left: -75px;
Forgot to include the link : http://jsfiddle.net/hZfhQ/2/