Develop Reference

how to use animation with AOS on pseudo element?

Normally in HTML file I use AOS like this
<li data-aos="fade-left" class="fields__box">
I try in different way use AOS with pseudo element in my CSS file but I don't do this in the right.
Do you have some idea how can I do that?
Thanks for your help
&::before {
content: "";
position: absolute;
background-image: url(images/logoBig.png);
z-index: -1;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: 70%;
background-position: center bottom;
// data-aos="fade-up";
}

I haven't used Animate on Scroll (AOS) before, but based on a reading of the docs and CSS Tricks post, I think it can be done.
Here's what AOS is doing, JavaScript-wise:
The idea behind AOS is straightforward: watch all elements and their positions based on settings you provide them. Then add/remove the class aos-animate. Of course, in practice, it’s not always that easy, but the idea behind AOS is as simple as that. Every aspect of animation is handled by CSS.
Based on the source code for the fade-up animation, you could try:
<li data-aos="fade-before-up" class="fields__box">
&::before {
/* ... your properties to style the before element ... */
transition-property: opacity, transform;
opacity: 0
transform: translate3d(0, 100px, 0);
}
&.aos-animate::before {
opacity: 1;
transform: translate3d(0, 0, 0);
}
Key points:
I haven't tested this. Sorry. If you'd like to create a CodePen or a JSFiddle that replicates the current behavior you're seeing, I'll see if I can tweak it.
The data-aos attribute on the HTML element shouldn't match an actual AOS animation. It's just to get the library to put the aos-animate class on the element.
The ::before pseudo-element is initially styled as 0 opacity and 100px below. When AOS adds the aos-animate class to the <li>, then the ::before element can be transitioned.

Transform property does not work in Firefox but does in Chrome and Safari. What to do?

Udate
Appeal for consistency - Mozilla bug
Udate
Adding
transform: rotateY(0deg);
to one side of the card, is a temporary fix that needs to be fixed properly.
The duplicate does not affect this solution and is vague.
Question
Particularly the backface-visibility here:
.card__face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
I tried adding the -moz- prefix despite it supposedly not being needed according to caniuse:
Still it does not work. Chrome worked without any prefix and Safari worked with -webkit- prefix contrary to caniuse.com.
Here is the jsfiddle. Clicking on the icon should make the icon rotate 180 degrees.

Add rotateY(0deg) to your .card__face--front class.
.card__face--front {
transform: rotateY(0deg);
}
http://jsfiddle.net/3h0cgukf/

Large mysterious margin on push in menu

I have implemented a "push-in menu" mobile menu to a very basic site structure.
The menu is based on http://callmenick.com/post/slide-and-push-menus-with-css3-transitions
For some odd reason, when I click on the "Push right" button the menu has a large margin to the right. I am not sure why this is happening or how to fix it. It works fine in IE11 but not in Chrome v52.
An example of the problem can be found here: http://seyoum.net/playground/1/
I have tried to use the DevTools to pinpoint any CSS or markup that may cause the problem without any luck.
What is causing this and how can I fix it?
This is what it should look like and what it looks like in IE 11:
And this is the problem and what it looks like in Chrome:

You've set your main wrapper to move -300px in the CSS, but you only want your menu to move. Remove this...
.overlay-wrapper.has-push-right {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
#media all and (min-width:320px) {
.overlay-wrapper.has-push-right {
-webkit-transform: translateX(-300px);
-ms-transform: translateX(-300px);
transform: translateX(-300px);
}
}
A jsFiddle (free tool) would be nice next time, I used your link to make one here. It does make it very much easier to answer questions. People who click on the question can look, solve, and test the solution quickly to make sure they really made a valid correction.

Turns out, I forgot a closing tag for the #page. I am so embarrassed. I shall check my markup thoroughly next time.

The reason for the blank space is that you have the following CSS rules (prefixed variants omitted for brevity):
.overlay-wrapper.has-push-right
{
transform: translateX(-300px);
}
.push-menu--push-right.is-active
{
transform: translateX(0);
}
.push-menu--push-right
{
transform: translateX(300px);
position: absolute;
width: 300px;
right: 0;
}
The last set of rules places the menu "to the right" of the container. The second rule resets the translate, and puts it back inside the container. The first one moves the whole thing to the left.
Remove the second one and you should be all set.

Creating a javascript notification plugin: How to align absolutely positioned divs on top of each other

I am trying to develop a notification plugin. I have following code
javascript
function notification () {
var wrapper = document.createElement('div'),
docFrag = document.createDocumentFragment();
wrapper.textContent = 'Default text';
wrapper.classList.add('notif');
docFrag.appendChild(wrapper);
document.body.appendChild(docFrag);
var a = window.getComputedStyle(wrapper).height;
wrapper.classList.add('animated');
}
CSS
body {
background: #e2e2e2;
}
.notif {
position: absolute;
padding: 20px;
background: #fff;
display: block;
width: 160px;
margin-bottom: 10px;
opacity: 0;
-webkit-transform: translate3d(0%, -50%);
-ms-transform: translate(0%, -50%);
transform: translate(0%, -50%);
-webkit-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
.animated {
opacity: 1;
-webkit-transform: translate(0%, 0%);
-ms-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
When the notification () is called a new notification should be added. When a new notification is being added if already a notification is existing, the existing notification should be animated and pushed down and the new notification should position on top of it. And the notification should be absolutely positioned. But with my code the divs stack upon each other and those do not flow from top to bottom. How can i achieve this.
Here is the working with code: DEMO Please run notification() to see the issue.
here is what i want to develop: Required look
EDIT
It has to be absolutely , or fixed positioned because the notification should not affect the other content of the webpage.

The notifications seem to stack on top of one another because you assigned their position as absolute. If you set their display attribute to block and do not set their position attribute to absolute, you won't have to worry about this. You can still set the position attribute of the container of these notifications to absolute if you wish to free it from positioning relative to the rest of the DOM.
The appendChild() method inserts the element inside the container-element at the end. Try using docFrag.insertBefore(wrapper, docFrag.firstChild);.

It will not work because absolutley positioned elements stay in the specified place. What you could do instead is absolutley position the container and append your divs inside that. Divs as block elements will naturally push themselves down.
Hope this helps

You can do it in a crazy way:
add a wrapper for notification block (notif-wrapper);
each new block (also wrapped with notif-wrapper) insert before all blocks into deepest notification wrapper $newNotifWrapper.insertBefore(jQuery('.nofit-wrapper .notif').last()) and add css .notif .notif {top: 0; left: 0;}
each new notif-wrapper after displaying should animate its height
But obviously, simplier and better way is create a single wrapper for all your notifications, add it once on first notification coming and insert all those new notifications before first child of this wrapper, animating their height, ofcourse.

The reason why they're stack on top of eachother is because they're absolutely positioned. You can use the method here to fix your issue.
Summary of the article:
When positioning elements absolutely their bounding box is by default the body.
However, when you add the absolutely positioned element to a relatively positioned element, the bounding box of the absolutely positioned element will change to the relatively positioned elements space.
The HTML would look something like:
<relative-element>
<absolute-element>
<!-- Content -->
</absolute-element>
</relative-element>
With CSS that would look something like:
relative-element {
position: relative;
}
absolute-element {
position: absolute;
}
Applying the article to your problem
Create a container and position it relatively.
Add another container to it and position it absolutely. (This will hold your notifications)
Add children to the last container and they will stack like you want them to.

how to Rotate image one side using jquery

I am trying to rotate a image only one corner.image is like a pole .bottom side should not be changed the position only top of the image should be animate either clockwise or anti clockwise.i have tried like this.i should work in IE8 also.i made left:53px because bottom should not be change the position.
<style>
.big-pole{
background-image: url("images/pole.png");
width: 55px;
height: 100px;
position: absolute;
top: 78px;
left: 53px;
}
</style>
<script>
TweenMax.to(".big-pole",3,{
top:'100px',
left:'53px',
});
</script>

You could apply CSS class to image without any need of external libraries.
.rotated {
transform: rotate(90deg);
-ms-transform: rotate(90deg); /* IE 9 */
-moz-transform: rotate(90deg); /* Firefox */
-webkit-transform: rotate(90deg); /* Safari and Chrome */
-o-transform: rotate(90deg); /* Opera */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* IE 8*/
}

I'm not really sure if I understand correctly what kind of rotation you are looking for? Is it like a clock as other users pointed out? Anyway your TweenMax call was missing some parameters in order for the rotation to work.
TweenMax.to($(".big-pole"), 3, {rotation:-90, transformOrigin:"top center"});
You will have test a few things and change a few value to find the correct animation, cause I might be wrong a bit, all depending on what you want to do in the end.