I have a weird conflict in my main.js file. I run a fade up animation on ".main-headline--left"
$('.main-headline--left').addClass('wow animated fadeInUp');
This works fine, but when I add a piece of code that makes nav-links active based on what page the user is on, the animation obstructs the logo which hangs off of the navbar (logo height > navbar fixed height). Here is that code:
if(location.pathname != "/") {
$('.navbar-nav--split a[href^="/' + location.pathname.split("/")[3] + '"]').addClass('is-active');
} else $('.navbar-nav--split a:eq(0)').addClass('is-active');
I notice this only happens in Chrome. Is there perhaps a better way to organize my Javascript or a better way to write the code so that this problem is rectified?
Here is the css animation:
#keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(30px);
transition: .1s transform, .1s opacity;
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
I did not explicitly set z-index on containing elements. However, setting a z-index of 9999 on both the logo navbar does not fix the problem.
today I ran into similar issue... I patched it by changing the value of animation-fill-mode for the class animated as below...
.animated
{
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: initial; //Changed from both to initial
animation-fill-mode: initial; /*Changed from both to initial
}
Notably, setting the animation-fill-mode to forwards was causing my issue...
animation-fill-mode: both inherits both forwards as well as backwards property, so my trillionth z-index element got hid under the millionth z-index element...
Setting it to initial worked for me.
I found a fix to my problem, but I have no idea why this solution works. By adding "-webkit-backface-visibility: hidden;" to my logo element, my logo no longer gets cropped when the animation on my headline and the transition on my anchor's pseudo element are run on load. I was wondering whether anyone knows why this would fix this problem. My logo element never moves on the z axis. There is a jsfiddle in the comment section that shows the code
#GughaG's answer is right if don't need forwards, but if you do need, try adding position: absolute -- fixed me right up!
The answers here did not initially make it clear that the transformed elements cannot be siblings of each other and still retain z-index layering. Therefore, a top, middle and bottom layer animating would flip/flop all over each other and other elements in the page, for example a modal popup.
What needs to happen is a wrapping control layer that is not animated but holds the z-index order of things.
i.e. from this:
<wrapper>
<child-1 /> <- animated element bottom layer
<child-2 /> <- animated element middle layer
<child-3 /> <- animated element top layer
</wrapper>
To this:
<wrapper>
<child-wrapper-1>
<child-1 /> <- animated element bottom layer
</child-wrapper-1>
<child-wrapper-2>
<child-2 /> <- animated element middle layer
</child-wrapper-2>
<child-wrapper-3>
<child-3 /> <- animated element top layer
</child-wrapper-3>
</wrapper>
Where child-wrapper 1 has z-index of 1, child-wrapper 2 has z-index of 2 etc. and are NOT animated.
Here is a working fiddle: https://jsfiddle.net/pingram3541/8rdx9u2w/show
Related
I have an image that I wanted to zoomIn on page refresh. The image is located at the very top of the page. When you open the page from another webpage the image is there for a split second, disappears and then zooms in as the element is supposed to. How do I get the appearance for the split second to not show at all and just have the image zoomIn from 0 opacity?
Here is my code for this project:
#keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
100% {
opacity: 1;
}
}
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}
<div class="Header-Image-Container rellax">
<img src="images/Calibrator_Logo_Text_NoBackground.png" alt="Header Picture" class="Header-Image
wow zoomIn" data-wow-duration="3s" />
</div>
Here is a link to the actual site where I am having the issue: www.calibrator.ca/TestSite. I am just trying to have the image start from a 0 opacity and then zoom to a 1. To me it looks as if the css code would accomplish this but when it renders in chrome and firefox it has this flash of the image before it disappears. Any help is appreciated.
If there is any delay at all between the painting of the loaded image and the start of the animation (likely), the image will be visible for a short amount of time, causing the flash you see. A solution is to style the image with visibility: hidden at the start, and then set visibility to visible as the first frame of your animation (or use JavaScript to make it visible). (You could alternatively initially style the image to opacity: 0 but then you might also see a non-scale3d'd image for a split second at the beginning, so you'd need to style that initially as well; probably easier just to start with visibility: hidden.)
By the way, with your code as written, you also risk the animation occurring before the image has loaded (something you might not notice with a fast connection and cached image). If that happened, your animation would essentially be invisible to users. A solution would be only to add the animation class (zoomIn) to your image after the image's load event has fired. (Ideally you'd attach a load handler to the image using addEventListener(), but you could also keep it simple and use an onload attribute directly in your <img> tag.)
I have some text I am animating in, and I do so using CSS keyframes. I keep the look of the end result of the animation, so I'm using animation-fill-mode: forwards to do so, like this:
#my-text {
opacity: 0;
}
.show-me {
animation-name: show-me;
animation-duration: 2s;
animation-fill-mode: forwards
}
#keyframes show-me {
100% {
opacity: 1;
}
}
I then add the show-me class to the element using jQuery:
$('#my-text').addClass('show-me');
Later, after the animation is complete, I try to change the opacity of the element through code, but an unable to do so:
// this won't change the opacity, unfortunately
$('#my-text').css('opacity', 0);
Here's an example that shows the issue: http://jsfiddle.net/x3mbkbwL/2/
How do I override the value set from the animation when using fill-mode forwards? I know I can remove the class (in this case "show-me") when I need to change the element's opacity, but it seems like I should be able to directly override the css in JavaScript and it would override the opacity.
Seems like CSS attributes set by animation-fill-mode: forwards can't be overwritten on the same element.
Either: Add a parent wrapper around
One solution is to put a wrapper around the element that has animation-fill-mode: forwards set. Then, in order to overwrite forwarded attributes, you would only update the parent instead.
<div id="parent">
<div id="my-text">I just faded in!</div>
</div>
Then "overwrite" opacity only on the parent:
$('#parent').css('opacity', 0);
I've implemented the changes to your fiddle here: http://jsfiddle.net/x3mbkbwL/3/
Or: Nest a wrapper inside
If you prefer, you could alternatively add another child element instead:
<div id="my-text">
<span id="wrapper">I just faded in!</span>
</div>
Then "overwrite" opacity only on the nested wrapper:
$('#wrapper').css('opacity', 0);
Both approaches work best if the forwarded opacity is set to 1. If it's forwarded to 0 then it obviously won't work as the element is then already hidden.
I am trying to animate a <div> to slide-in/out from the left on a button click. I am using the angular framework and ng-showto control the <div> display/visibility, and adding transitions to the ng-hide set of styles.
I have successfully managed to have the div slide in from the left, however I can not get it to slide out (it simply dissappears after the specified delay). I have tried modifying several examples online to get the behavior I am after to no avail.
JSFiddle for anyone that wants to have a look
https://jsfiddle.net/mquinlan/0wcrcwxe/5/
You got that almost right except for removing the left:0 in the selectors for .animate-show.ng-hide-add.ng-hide-add-active, .animate-show.ng-hide-remove.ng-hide-remove-active.
.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove.ng-hide-remove-active {
-moz-transition: all ease 0.5s;
transition: all ease 0.5s;
}
Updated Fiddle: https://jsfiddle.net/vsj62g5r/
I have this jsFiddle. When the button is clicked, I want to put the red div behind the black one immediately, then start the animation.
var red = document.getElementById("red");
var button = document.getElementById("button");
button.addEventListener("click",function () {
red.style.zIndex = -1;
red.classList.remove("shifted");
});
However, as you can see, they seem to be occurring as two separate actions. I know I can use setTimeout to wait until the zIndex property is applied, but I do not know how long I am supposed to wait, and the duration perhaps differs from browsers to computers.
Should I create a loop that will check if zindex was applied? But this also sounds like an unintelligent solution. What is the correct way?
EDIT: I do not want to change the zIndex on the black div.
You can bind to the transitioned state of the element, something like this:
("#mySelector").bind("transitionend", function(){ 'yourcodehere' });
Also, here is some info on it:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
https://developer.mozilla.org/en-US/docs/Web/Reference/Events/transitionend
Without jQuery:
el.addEventListener("transitionend", updateTransition, true);
Edit:
There was some confusion as to the usage of:
-webkit-transition-duration: 1s;
This is applied like a styling as well. So anytime you make alterations to the element it is on, you are triggering this. You have TWO transition calls, one for setting the z-index, another for the movement.
Just put a
-webkit-transition-property: -webkit-transform;
into the #red and everything is fine. ;) This applies the transition only to specified property.
JSFIDDLE: http://jsfiddle.net/Qvh7G/.
The problem is with zIndex - the transform time delays the change in the zIndex.
You can simply force the duration for the transform property.
Replace:
-webkit-transition-duration: 1s;
With
-webkit-transition: -webkit-transform 1s; // ease-in;
I would like to write some JS that allows me to recreate the effect this website achieved when you click on the links:
Heydays.no
If you visit this link then click one of the small icons in the upper right corner of the page, you will see the desired effect that I want to achieve with js. I assume this is some kind of hidden or repositioned div that has a js action.
Help would be much appreciated,
Thanks Ryan.
It's not really scrolling from top it is bringing the div into view using animation. There are several JS libraries out there that can help you with this without you writing your own.
Look into JQuery and Scriptaculous. Both have great examples you can look at.
That site uses JQuery.
Basically what you have there is a hidden div which contains some information and has had jQuery method .hide() called on it . When the user mouses over one of those links, the div is then called using the jQuery method .show(). Their version is done with custom scripting.
You could do this with CSS3 transitions:
#sliding_div {
/* must have a set height to work */
-webkit-transition: height 2s ease;
-moz-transition: height 2s ease;
-o-transition: height 2s ease;
transition: height 2s ease;
}
With a div like so:
<div style="height: 0px;" id="sliding_div"><!-- content --></div>
<div onclick="var sliding_div = document.getElementById('sliding_div'); if (sliding_div.style.height == '0px') sliding_div.style.height = '300px'; else sliding_div.style.height = '0px';"><img /></div>
Keep in mind that only IE10 would generate the slide effect here as IE9 and below don't presently support transitions afaik. The button would just cause the div to "snap" open and closed in these browsers.