This demo uses animations that occur on scroll for convenience. Other options (such as animations that occur on page load, on click or on hover are included in the animation code examples below, but are not part of the demo itself).
The original code for non-scrolling (animations that occur on page load) can be found at (note: I have simplied and change the original code considerably for this demo): animate.css
The original code for scrolling animations can be found at (note: I have simplied and change the original code considerably for this demo): http://jackonthe.net/css3animateit/
I have not included CSS -webkit prefixes for older browsers. If needed, you can get them here: https://autoprefixer.github.io/
Note that all css styles and keyframes are fully customizable if you choose to do so.
This page is meant to ve viewed in a browser
We don't really explain easing fucntions in this demo (although they are used in animations with the "animation-timing-function:" CSS property. To see a great cheat sheet for them go here
AN ISSUE HAS BEEN NOTED FROM WHEN I BUILT VISION GLASS. ANIMATIONS THAT ENTER THE PAGE FROM EITHER THE LEFT OR RIGHT CAN CAUSE VERTICAL SCROLLING PROBLEMS (IF THE TRANLATE LEFT OR RIGHT VALUES ARE VERY HIGH) AND THEY CAUSE CONTENT SCALING PROBLEMS WHEN A USER SWITCHES FROM PORTRAIT MODE TO LANDSCAPE MODE OR VICE VERSA. IF YOU USE EVEN REASONABLE VALUES FOR TRANSLATE LEFT AND RIGHT (EG. 100%) THE ORIENTATION PROBLEM STILL PERSISTS. TRUE, THE USER CAN SIMPLY PINCH THE CONTENT BACK TO NORMAL SIZE, BUT IF THIS IS NOT WANTED THE ONLY SOLUTION IS TO REMOVE ALL USER SCALING (USER NOW CANNOT PINCH TO MAKE SCREEN BIGGER). IF THIS IS WHAT IS DESIRED, REPLACE THE VIEWPORT with:
meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"IMPORTANT!! IMPORTANT! An issue in Safari only was detected in July 2022 on Reword.ca where if the animation keyframes animate opacity AND the "animation-timing-function" is included in those animation keyframes (not in the animation call itself) AND if the animation-timing-fucntion is set to some cubic-bezier value (e.g. animation-timing-function: cubic-bezier(.215, .61, .355, 1) Safari sets the opacity of any animated elments to opacity: 0 after the animation has completed, thus making them disappear. Strange bug (has nothing to do with the animation-fill-direction property in css animations). The only way to fix it is to remove the "animation-timing-function: cubic-bezier(.215, .61, .355, 1)" from a the animation KEYFRAMES and include it the animation CALL (where you name the animation name, animation delay etc.)
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes bounce {
0%, 20%, 53%, 80%, to {
animation-timing-function:cubic-bezier(.215, .61, .355, 1);
transform:translateZ(0);
}
40%, 43% {
transform:translate3d(0, -30px, 0);
}
40%, 43%, 70% {
animation-timing-function:cubic-bezier(.755, .05, .855, .06);
}
70% {
transform:translate3d(0, -15px, 0);
}
90% {
transform:translate3d(0, -4px, 0);
}
}
.bounce, .animatedParent, .animatedClick {
display: block;
/*element must not be inline for animations to work*/
}
.bounce.go{
animation-duration: 1s;
animation-fill-mode: both;
animation-name: bounce;
transform-origin: center bottom;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="bounce go" to the HTML element you wish to animate (a "div" element is used here):
<div class="bounce go">This element will bounce</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".bounceClickTrigger.bounce").click(function(){
//use line above for animate on click.
//comment out "bounceClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".bounceHoverTrigger.bounce").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="bounce bounceClickTrigger">This element will bounce when clicked</div>
OR, FOR HOVER:
<div class="bounce bounceHoverTrigger">This element will bounce when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".bounceClickTrigger.bounce").click(function(){
//use line above for animate on click.
//comment out "bounceClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".bounceHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="bounce bounceClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will bounce when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="bounce bounceHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will bounce when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated bounce" to its CHILD:
<div class="animatedParent">
<div class="animated bounce">This Will Bounce</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated bounce">This Will Bounce Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated bounceInDown">This element will bounce only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated bounce" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated bounce" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated bounce" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated bounce clickExampleOne">This appears with animation effect bounce when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated bounce clickExampleOne">This element is animated with bounce when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "bounce" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes bounce {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.bounce.go{
animation-name: bounce;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "bounce"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes bounceGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.bounceGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "bounce" html element to make the animation fire
animation-name: bounceGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated bounce clickExampleTwo bounceGoAway">This appears with animation effect bounce when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: bounceGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated bounce clickExampleThree bounceGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated bounce clickExampleThree bounceGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated bounce clickExampleThree bounceGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "bounce" in this html example:
<div class="animatedParent">
<div class="animated bounce animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes flash {
0%, 50%, to {
opacity:1;
}
25%, 75% {
opacity:0;
}
}
.flash, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.flash.go{
animation-duration: 1s;
animation-fill-mode: both;
animation-name: flash;
transform-origin: center bottom;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="flash go" to the HTML element you wish to animate (a "div" element is used here):
<div class="flash go">This element will flash</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".flashClickTrigger.flash").click(function(){
//use line above for animate on click.
//comment out "flashClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".flashHoverTrigger.flash").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="flash flashClickTrigger">This element will flash when clicked</div>
OR, FOR HOVER:
<div class="flash flashHoverTrigger">This element will flash when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".flashClickTrigger.flash").click(function(){
//use line above for animate on click.
//comment out "flashClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".flashHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="flash flashClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will flash when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="flash flashHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will flash when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated flash" to its CHILD:
<div class="animatedParent">
<div class="animated flash">This Will flash</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated flash">This Will flash Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated flashInDown">This element will flash only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated flash" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated flash" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated flash" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated flash clickExampleOne">This appears with animation effect flash when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated flash clickExampleOne">This element is animated with flash when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "flash" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes flash {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.flash.go{
animation-name: flash;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "flash"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes flashGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.flashGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "flash" html element to make the animation fire
animation-name: flashGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated flash clickExampleTwo flashGoAway">This appears with animation effect flash when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: flashGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated flash clickExampleThree flashGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated flash clickExampleThree flashGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated flash clickExampleThree flashGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "flash" in this html example:
<div class="animatedParent">
<div class="animated flash animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes pulse {
0% {
transform:scaleX(1);
}
50% {
transform:scale3d(1.05, 1.05, 1.05);
}
to {
transform:scaleX(1);
}
}
.pulse, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.pulse.go{
animation-name: pulse;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="pulse go" to the HTML element you wish to animate (a "div" element is used here):
<div class="pulse go">This element will pulse</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".pulseClickTrigger.pulse").click(function(){
//use line above for animate on click.
//comment out "pulseClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".pulseHoverTrigger.pulse").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="pulse pulseClickTrigger">This element will pulse when clicked</div>
OR, FOR HOVER:
<div class="pulse pulseHoverTrigger">This element will pulse when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".pulseClickTrigger.pulse").click(function(){
//use line above for animate on click.
//comment out "pulseClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".pulseHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="pulse pulseClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will pulse when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="pulse pulseHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will pulse when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated pulse" to its CHILD:
<div class="animatedParent">
<div class="animated pulse">This Will pulse</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated pulse">This Will pulse Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated pulseInDown">This element will pulse only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated pulse" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated pulse" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated pulse" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated pulse clickExampleOne">This appears with animation effect pulse when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated pulse clickExampleOne">This element is animated with pulse when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "pulse" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes pulse {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.pulse.go{
animation-name: pulse;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "pulse"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes pulseGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.pulseGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "pulse" html element to make the animation fire
animation-name: pulseGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated pulse clickExampleTwo pulseGoAway">This appears with animation effect pulse when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: pulseGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated pulse clickExampleThree pulseGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated pulse clickExampleThree pulseGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated pulse clickExampleThree pulseGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "pulse" in this html example:
<div class="animatedParent">
<div class="animated pulse animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes rubberBand {
0% {
transform:scaleX(1);
}
30% {
transform:scale3d(1.25, .75, 1);
}
40% {
transform:scale3d(.75, 1.25, 1);
}
50% {
transform:scale3d(1.15, .85, 1);
}
65% {
transform:scale3d(.95, 1.05, 1);
}
75% {
transform:scale3d(1.05, .95, 1);
}
to {
transform:scaleX(1);
}
}
.rubberband, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.rubberband.go{
animation-name: rubberBand;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="rubberband go" to the HTML element you wish to animate (a "div" element is used here):
<div class="rubberband go">This element will rubberband</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".rubberbandClickTrigger.rubberband").click(function(){
//use line above for animate on click.
//comment out "rubberbandClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".rubberbandHoverTrigger.rubberband").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="rubberband rubberbandClickTrigger">This element will rubberband when clicked</div>
OR, FOR HOVER:
<div class="rubberband rubberbandHoverTrigger">This element will rubberband when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".rubberbandClickTrigger.rubberband").click(function(){
//use line above for animate on click.
//comment out "rubberbandClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".rubberbandHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="rubberband rubberbandClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will rubberband when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="rubberband rubberbandHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will rubberband when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated rubberband" to its CHILD:
<div class="animatedParent">
<div class="animated rubberband">This Will rubberband</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated rubberband">This Will rubberband Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated rubberbandInDown">This element will rubberband only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated rubberband" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated rubberband" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated rubberband" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated rubberband clickExampleOne">This appears with animation effect rubberband when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated rubberband clickExampleOne">This element is animated with rubberband when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "rubberband" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes rubberband {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.rubberband.go{
animation-name: rubberband;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "rubberband"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes rubberbandGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.rubberbandGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "rubberband" html element to make the animation fire
animation-name: rubberbandGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated rubberband clickExampleTwo rubberbandGoAway">This appears with animation effect rubberband when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: rubberbandGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated rubberband clickExampleThree rubberbandGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated rubberband clickExampleThree rubberbandGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated rubberband clickExampleThree rubberbandGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "rubberband" in this html example:
<div class="animatedParent">
<div class="animated rubberband animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes shakeAllOver {
0% {
transform: translate(2px, 1px) rotate(0deg);
}
10% {
transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
transform: translate(-3px, 0px) rotate(1deg);
}
30% {
transform: translate(0px, 2px) rotate(0deg);
}
40% {
transform: translate(1px, -1px) rotate(1deg);
}
50% {
transform: translate(-1px, 2px) rotate(-1deg);
}
60% {
transform: translate(-3px, 1px) rotate(0deg);
}
70% {
transform: translate(2px, 1px) rotate(-1deg);
}
80% {
transform: translate(-1px, -1px) rotate(1deg);
}
90% {
transform: translate(2px, 2px) rotate(0deg);
}
98% {
transform: translate(2px, 2px) rotate(-1deg);
}
100% {
transform: translate(1px, -2px) rotate(0deg);
}
}
.shakeAllOver, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.shakeAllOver.go{
animation-name: shakeAllOver;
animation-duration: 0.8s;
transform-origin: 50% 50%;
animation-timing-function: linear;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="shakeAllOver go" to the HTML element you wish to animate (a "div" element is used here):
<div class="shakeAllOver go">This element will shakeAllOver</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".shakeAllOverClickTrigger.shakeAllOver").click(function(){
//use line above for animate on click.
//comment out "shakeAllOverClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".shakeAllOverHoverTrigger.shakeAllOver").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="shakeAllOver shakeAllOverClickTrigger">This element will shakeAllOver when clicked</div>
OR, FOR HOVER:
<div class="shakeAllOver shakeAllOverHoverTrigger">This element will shakeAllOver when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".shakeAllOverClickTrigger.shakeAllOver").click(function(){
//use line above for animate on click.
//comment out "shakeAllOverClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".shakeAllOverHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="shakeAllOver shakeAllOverClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will shakeAllOver when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="shakeAllOver shakeAllOverHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will shakeAllOver when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated shakeAllOver" to its CHILD:
<div class="animatedParent">
<div class="animated shakeAllOver">This Will shakeAllOver</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated shakeAllOver">This Will shakeAllOver Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated shakeAllOverInDown">This element will shakeAllOver only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated shakeAllOver" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated shakeAllOver" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated shakeAllOver" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated shakeAllOver clickExampleOne">This appears with animation effect shakeAllOver when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated shakeAllOver clickExampleOne">This element is animated with shakeAllOver when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "shakeAllOver" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes shakeAllOver {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.shakeAllOver.go{
animation-name: shakeAllOver;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "shakeAllOver"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes shakeAllOverGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.shakeAllOverGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "shakeAllOver" html element to make the animation fire
animation-name: shakeAllOverGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated shakeAllOver clickExampleTwo shakeAllOverGoAway">This appears with animation effect shakeAllOver when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: shakeAllOverGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated shakeAllOver clickExampleThree shakeAllOverGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated shakeAllOver clickExampleThree shakeAllOverGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated shakeAllOver clickExampleThree shakeAllOverGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "shakeAllOver" in this html example:
<div class="animatedParent">
<div class="animated shakeAllOver animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes shake {
0%, to {
transform:translateZ(0);
}
10%, 30%, 50%, 70%, 90% {
transform:translate3d(-10px, 0, 0);
}
20%, 40%, 60%, 80% {
transform:translate3d(10px, 0, 0);
}
}
.shake, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.shake.go{
animation-name: shake;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="shake go" to the HTML element you wish to animate (a "div" element is used here):
<div class="shake go">This element will shake</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".shakeClickTrigger.shake").click(function(){
//use line above for animate on click.
//comment out "shakeClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".shakeHoverTrigger.shake").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="shake shakeClickTrigger">This element will shake when clicked</div>
OR, FOR HOVER:
<div class="shake shakeHoverTrigger">This element will shake when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".shakeClickTrigger.shake").click(function(){
//use line above for animate on click.
//comment out "shakeClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".shakeHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="shake shakeClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will shake when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="shake shakeHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will shake when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated shake" to its CHILD:
<div class="animatedParent">
<div class="animated shake">This Will shake</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated shake">This Will shake Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated shakeInDown">This element will shake only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated shake" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated shake" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated shake" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated shake clickExampleOne">This appears with animation effect shake when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated shake clickExampleOne">This element is animated with shake when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "shake" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes shake {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.shake.go{
animation-name: shake;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "shake"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes shakeGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.shakeGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "shake" html element to make the animation fire
animation-name: shakeGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated shake clickExampleTwo shakeGoAway">This appears with animation effect shake when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: shakeGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated shake clickExampleThree shakeGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated shake clickExampleThree shakeGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated shake clickExampleThree shakeGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "shake" in this html example:
<div class="animatedParent">
<div class="animated shake animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes shakeUpUp {
0%, 100% {
transform: translateY(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateY(-10px);
}
20%, 40%, 60%, 80% {
transform: translateY(10px);
}
}
.shakeUp, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.shakeUp.go{
animation-name: shakeUpUp;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="shakeUp go" to the HTML element you wish to animate (a "div" element is used here):
<div class="shakeUp go">This element will shakeUp</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".shakeUpClickTrigger.shakeUp").click(function(){
//use line above for animate on click.
//comment out "shakeUpClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".shakeUpHoverTrigger.shakeUp").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="shakeUp shakeUpClickTrigger">This element will shakeUp when clicked</div>
OR, FOR HOVER:
<div class="shakeUp shakeUpHoverTrigger">This element will shakeUp when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".shakeUpClickTrigger.shakeUp").click(function(){
//use line above for animate on click.
//comment out "shakeUpClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".shakeUpHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="shakeUp shakeUpClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will shakeUp when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="shakeUp shakeUpHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will shakeUp when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated shakeUp" to its CHILD:
<div class="animatedParent">
<div class="animated shakeUp">This Will shakeUp</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated shakeUp">This Will shakeUp Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated shakeUpInDown">This element will shakeUp only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated shakeUp" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated shakeUp" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated shakeUp" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated shakeUp clickExampleOne">This appears with animation effect shakeUp when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated shakeUp clickExampleOne">This element is animated with shakeUp when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "shakeUp" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes shakeUp {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.shakeUp.go{
animation-name: shakeUp;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "shakeUp"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes shakeUpGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.shakeUpGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "shakeUp" html element to make the animation fire
animation-name: shakeUpGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated shakeUp clickExampleTwo shakeUpGoAway">This appears with animation effect shakeUp when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: shakeUpGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated shakeUp clickExampleThree shakeUpGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated shakeUp clickExampleThree shakeUpGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated shakeUp clickExampleThree shakeUpGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "shakeUp" in this html example:
<div class="animatedParent">
<div class="animated shakeUp animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes headShake {
0% {
transform:translateX(0);
}
6.5% {
transform:translateX(-6px) rotateY(-9deg);
}
18.5% {
transform:translateX(5px) rotateY(7deg);
}
31.5% {
transform:translateX(-3px) rotateY(-5deg);
}
43.5% {
transform:translateX(2px) rotateY(3deg);
}
50% {
transform:translateX(0);
}
}
.headShake, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.headShake.go{
animation-timing-function: ease-in-out;
animation-name: headShake;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="headShake go" to the HTML element you wish to animate (a "div" element is used here):
<div class="headShake go">This element will headShake</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".headShakeClickTrigger.headShake").click(function(){
//use line above for animate on click.
//comment out "headShakeClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".headShakeHoverTrigger.headShake").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="headShake headShakeClickTrigger">This element will headShake when clicked</div>
OR, FOR HOVER:
<div class="headShake headShakeHoverTrigger">This element will headShake when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".headShakeClickTrigger.headShake").click(function(){
//use line above for animate on click.
//comment out "headShakeClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".headShakeHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="headShake headShakeClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will headShake when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="headShake headShakeHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will headShake when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated headShake" to its CHILD:
<div class="animatedParent">
<div class="animated headShake">This Will headShake</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated headShake">This Will headShake Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated headShakeInDown">This element will headShake only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated headShake" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated headShake" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated headShake" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated headShake clickExampleOne">This appears with animation effect headShake when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated headShake clickExampleOne">This element is animated with headShake when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "headShake" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes headShake {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.headShake.go{
animation-name: headShake;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "headShake"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes headShakeGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.headShakeGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "headShake" html element to make the animation fire
animation-name: headShakeGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated headShake clickExampleTwo headShakeGoAway">This appears with animation effect headShake when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: headShakeGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated headShake clickExampleThree headShakeGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated headShake clickExampleThree headShakeGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated headShake clickExampleThree headShakeGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "headShake" in this html example:
<div class="animatedParent">
<div class="animated headShake animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes swing {
20% {
transform:rotate(15deg);
}
40% {
transform:rotate(-10deg);
}
60% {
transform:rotate(5deg);
}
80% {
transform:rotate(-5deg);
}
to {
transform:rotate(0deg);
}
}
.swing, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.swing.go{
transform-origin: top center;
animation-name: swing;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="swing go" to the HTML element you wish to animate (a "div" element is used here):
<div class="swing go">This element will swing</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".swingClickTrigger.swing").click(function(){
//use line above for animate on click.
//comment out "swingClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".swingHoverTrigger.swing").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="swing swingClickTrigger">This element will swing when clicked</div>
OR, FOR HOVER:
<div class="swing swingHoverTrigger">This element will swing when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".swingClickTrigger.swing").click(function(){
//use line above for animate on click.
//comment out "swingClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".swingHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="swing swingClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will swing when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="swing swingHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will swing when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated swing" to its CHILD:
<div class="animatedParent">
<div class="animated swing">This Will swing</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated swing">This Will swing Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated swingInDown">This element will swing only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated swing" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated swing" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated swing" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated swing clickExampleOne">This appears with animation effect swing when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated swing clickExampleOne">This element is animated with swing when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "swing" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes swing {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.swing.go{
animation-name: swing;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "swing"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes swingGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.swingGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "swing" html element to make the animation fire
animation-name: swingGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated swing clickExampleTwo swingGoAway">This appears with animation effect swing when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: swingGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated swing clickExampleThree swingGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated swing clickExampleThree swingGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated swing clickExampleThree swingGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "swing" in this html example:
<div class="animatedParent">
<div class="animated swing animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes tada {
0% {
transform:scaleX(1);
}
10%, 20% {
transform:scale3d(.9, .9, .9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
transform:scale3d(1.1, 1.1, 1.1) rotate(3deg);
}
40%, 60%, 80% {
transform:scale3d(1.1, 1.1, 1.1) rotate(-3deg);
}
to {
transform:scaleX(1);
}
}
.tada, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.tada.go{
animation-name: tada;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="tada go" to the HTML element you wish to animate (a "div" element is used here):
<div class="tada go">This element will tada</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".tadaClickTrigger.tada").click(function(){
//use line above for animate on click.
//comment out "tadaClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".tadaHoverTrigger.tada").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="tada tadaClickTrigger">This element will tada when clicked</div>
OR, FOR HOVER:
<div class="tada tadaHoverTrigger">This element will tada when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".tadaClickTrigger.tada").click(function(){
//use line above for animate on click.
//comment out "tadaClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".tadaHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="tada tadaClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will tada when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="tada tadaHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will tada when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated tada" to its CHILD:
<div class="animatedParent">
<div class="animated tada">This Will tada</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated tada">This Will tada Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated tadaInDown">This element will tada only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated tada" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated tada" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated tada" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated tada clickExampleOne">This appears with animation effect tada when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated tada clickExampleOne">This element is animated with tada when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "tada" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes tada {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.tada.go{
animation-name: tada;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "tada"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes tadaGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.tadaGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "tada" html element to make the animation fire
animation-name: tadaGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated tada clickExampleTwo tadaGoAway">This appears with animation effect tada when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: tadaGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated tada clickExampleThree tadaGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated tada clickExampleThree tadaGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated tada clickExampleThree tadaGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "tada" in this html example:
<div class="animatedParent">
<div class="animated tada animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes wobble {
0% {
transform:none;
}
15% {
transform:translate3d(-25%, 0, 0) rotate(-5deg);
}
30% {
transform:translate3d(20%, 0, 0) rotate(3deg);
}
45% {
transform:translate3d(-15%, 0, 0) rotate(-3deg);
}
60% {
transform:translate3d(10%, 0, 0) rotate(2deg);
}
75% {
transform:translate3d(-5%, 0, 0) rotate(-1deg);
}
to {
transform:none;
}
}
.wobble, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.wobble.go{
animation-name: wobble;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="wobble go" to the HTML element you wish to animate (a "div" element is used here):
<div class="wobble go">This element will wobble</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".wobbleClickTrigger.wobble").click(function(){
//use line above for animate on click.
//comment out "wobbleClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".wobbleHoverTrigger.wobble").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="wobble wobbleClickTrigger">This element will wobble when clicked</div>
OR, FOR HOVER:
<div class="wobble wobbleHoverTrigger">This element will wobble when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".wobbleClickTrigger.wobble").click(function(){
//use line above for animate on click.
//comment out "wobbleClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".wobbleHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="wobble wobbleClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will wobble when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="wobble wobbleHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will wobble when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated wobble" to its CHILD:
<div class="animatedParent">
<div class="animated wobble">This Will wobble</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated wobble">This Will wobble Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated wobbleInDown">This element will wobble only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated wobble" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated wobble" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated wobble" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated wobble clickExampleOne">This appears with animation effect wobble when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated wobble clickExampleOne">This element is animated with wobble when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "wobble" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes wobble {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.wobble.go{
animation-name: wobble;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "wobble"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes wobbleGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.wobbleGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "wobble" html element to make the animation fire
animation-name: wobbleGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated wobble clickExampleTwo wobbleGoAway">This appears with animation effect wobble when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: wobbleGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated wobble clickExampleThree wobbleGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated wobble clickExampleThree wobbleGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated wobble clickExampleThree wobbleGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "wobble" in this html example:
<div class="animatedParent">
<div class="animated wobble animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes jello {
0%, 11.1%, to {
transform:none;
}
22.2% {
transform:skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
transform:skewX(6.25deg) skewY(6.25deg);
}
44.4% {
transform:skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
transform:skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
transform:skewX(-.78125deg) skewY(-.78125deg);
}
77.7% {
transform:skewX(.390625deg) skewY(.390625deg);
}
88.8% {
transform:skewX(-.1953125deg) skewY(-.1953125deg);
}
}
.jello, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.jello.go{
animation-name: jello;
transform-origin: center;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="jello go" to the HTML element you wish to animate (a "div" element is used here):
<div class="jello go">This element will jello</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".jelloClickTrigger.jello").click(function(){
//use line above for animate on click.
//comment out "jelloClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".jelloHoverTrigger.jello").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="jello jelloClickTrigger">This element will jello when clicked</div>
OR, FOR HOVER:
<div class="jello jelloHoverTrigger">This element will jello when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".jelloClickTrigger.jello").click(function(){
//use line above for animate on click.
//comment out "jelloClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".jelloHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="jello jelloClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will jello when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="jello jelloHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will jello when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated jello" to its CHILD:
<div class="animatedParent">
<div class="animated jello">This Will jello</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated jello">This Will jello Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated jelloInDown">This element will jello only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated jello" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated jello" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated jello" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated jello clickExampleOne">This appears with animation effect jello when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated jello clickExampleOne">This element is animated with jello when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "jello" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes jello {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.jello.go{
animation-name: jello;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "jello"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes jelloGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.jelloGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "jello" html element to make the animation fire
animation-name: jelloGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated jello clickExampleTwo jelloGoAway">This appears with animation effect jello when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: jelloGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated jello clickExampleThree jelloGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated jello clickExampleThree jelloGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated jello clickExampleThree jelloGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "jello" in this html example:
<div class="animatedParent">
<div class="animated jello animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes rubberBall {
0% {transform: translate(0px, 0vh); height: 120px; width: 140px;} /*max-squish non-squish or elong is 130px x 130px*/
12.5% {height: 140px; width: 120px; transform: translate(0px, -25vh);} /*max elong*/
12.6% {transform: translate(0px, -25vh);}
25% {height: 122.5px; width: 137.5px; transform: translate(0px, 0vh);} /*2nd max squish*/
25.1% {transform: translate(0px, 0vh);}
37.5% {height: 137.5px; width: 122.5px; transform: translate(0px, -17.91vh);} /*2nd max elong*/
37.6% {transform: translate(0px, -17.91vh);}
50.1% {height: 125px; width: 135px; transform: translate(0px, 0vh);} /*3rd max squish*/
50.2% {transform: translate(0px, 0vh);}
62.6% {height: 135px; width: 125px; transform: translate(0px, -10.75vh);} /*3rd max elong*/
62.7% {transform: translate(0px, -10.75vh);}
75.1% {height: 127.5px; width: 132.5px; transform: translate(0px, 0vh);} /*4th max squish*/
75.2% {transform: translate(0px, 0vh);}
87.6% {height: 132.5px; width: 127.5px; transform: translate(0px, -3.65vh);} /*4th max elong*/
87.7% {transform: translate(0px, -3.65vh);}
100% {height: 130px; width: 130px; transform: translate(0px, 0vh);}
}
.rubberBall, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
opacity: 0;
}
.rubberBall{
opacity: 0;
}
.rubberBall.go{
animation-name: rubberBall;
animation-duration: 3s;
animation-fill-mode: both;
position: relative;
animation-timing-function: cubic-bezier(.7,0,1,1) 1;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrubberBallg animations below.)
1. To fire the animation on page load (limited usefulness):
add class="rubberBall go" to the HTML element you wish to animate (a "div" element is used here):
<div class="rubberBall go">This element will rubberBall</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".rubberBallClickTrigger.rubberBall").click(function(){
//use line above for animate on click.
//comment out "rubberBallClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".rubberBallHoverTrigger.rubberBall").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="rubberBall rubberBallClickTrigger">This element will rubberBall when clicked</div>
OR, FOR HOVER:
<div class="rubberBall rubberBallHoverTrigger">This element will rubberBall when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".rubberBallClickTrigger.rubberBall").click(function(){
//use line above for animate on click.
//comment out "rubberBallClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".rubberBallHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="rubberBall rubberBallClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will rubberBall when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="rubberBall rubberBallHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will rubberBall when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated rubberBall" to its CHILD:
<div class="animatedParent">
<div class="animated rubberBall">This Will rubberBall</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated rubberBall">This Will rubberBall Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated rubberBallInDown">This element will rubberBall only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated rubberBall" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated rubberBall" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated rubberBall" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated rubberBall clickExampleOne">This appears with animation effect rubberBall when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated rubberBall clickExampleOne">This element is animated with rubberBall when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "rubberBall" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes rubberBall {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.rubberBall.go{
animation-name: rubberBall;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "rubberBall"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes rubberBallGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.rubberBallGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "rubberBall" html element to make the animation fire
animation-name: rubberBallGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated rubberBall clickExampleTwo rubberBallGoAway">This appears with animation effect rubberBall when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: rubberBallGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated rubberBall clickExampleThree rubberBallGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated rubberBall clickExampleThree rubberBallGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated rubberBall clickExampleThree rubberBallGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "rubberBall" in this html example:
<div class="animatedParent">
<div class="animated rubberBall animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes hingeIn {
0% {
transform:translate3d(0, 700px, 0);
opacity:0;
}
40%, 80% {
transform:rotate(60deg);
transform-origin:top left;
animation-timing-function:ease-in-out;
opacity:1;
}
20%, 60% {
transform:rotate(80deg);
transform-origin:top left;
}
0%, 20%, 60% {
animation-timing-function:ease-in-out;
}
to {
transform-origin:top left;
opacity: 1;
}
}
.hingeIn, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.hingeIn{
opacity: 0;
}
.hingeIn.go{
animation-name: hingeIn;
animation-duration: 2s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="hingeIn go" to the HTML element you wish to animate (a "div" element is used here):
<div class="hingeIn go">This element will hingeIn</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".hingeInClickTrigger.hingeIn").click(function(){
//use line above for animate on click.
//comment out "hingeInClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".hingeInHoverTrigger.hingeIn").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="hingeIn hingeInClickTrigger">This element will hingeIn when clicked</div>
OR, FOR HOVER:
<div class="hingeIn hingeInHoverTrigger">This element will hingeIn when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".hingeInClickTrigger.hingeIn").click(function(){
//use line above for animate on click.
//comment out "hingeInClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".hingeInHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="hingeIn hingeInClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will hingeIn when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="hingeIn hingeInHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will hingeIn when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated hingeIn" to its CHILD:
<div class="animatedParent">
<div class="animated hingeIn">This Will hingeIn</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated hingeIn">This Will hingeIn Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated hingeInInDown">This element will hingeIn only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated hingeIn" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated hingeIn" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated hingeIn" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated hingeIn clickExampleOne">This appears with animation effect hingeIn when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated hingeIn clickExampleOne">This element is animated with hingeIn when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "hingeIn" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes hingeIn {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.hingeIn.go{
animation-name: hingeIn;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "hingeIn"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes hingeInGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.hingeInGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "hingeIn" html element to make the animation fire
animation-name: hingeInGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated hingeIn clickExampleTwo hingeInGoAway">This appears with animation effect hingeIn when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: hingeInGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated hingeIn clickExampleThree hingeInGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated hingeIn clickExampleThree hingeInGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated hingeIn clickExampleThree hingeInGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "hingeIn" in this html example:
<div class="animatedParent">
<div class="animated hingeIn animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes bounceIn {
0%, 20%, 40%, 60%, 80%, to {
animation-timing-function:cubic-bezier(.215, .61, .355, 1);
}
0% {
opacity:0;
transform:scale3d(.3, .3, .3);
}
20% {
transform:scale3d(1.1, 1.1, 1.1);
}
40% {
transform:scale3d(.9, .9, .9);
}
60% {
opacity:1;
transform:scale3d(1.03, 1.03, 1.03);
}
80% {
transform:scale3d(.97, .97, .97);
}
to {
opacity:1;
transform:scaleX(1);
}
}
.bounceIn, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.bounceIn{
opacity: 0;
}
.bounceIn.go{
animation-name: bounceIn;
animation-duration: .75s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="bounceIn go" to the HTML element you wish to animate (a "div" element is used here):
<div class="bounceIn go">This element will bounceIn</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".bounceInClickTrigger.bounceIn").click(function(){
//use line above for animate on click.
//comment out "bounceInClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".bounceInHoverTrigger.bounceIn").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="bounceIn bounceInClickTrigger">This element will bounceIn when clicked</div>
OR, FOR HOVER:
<div class="bounceIn bounceInHoverTrigger">This element will bounceIn when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".bounceInClickTrigger.bounceIn").click(function(){
//use line above for animate on click.
//comment out "bounceInClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".bounceInHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="bounceIn bounceInClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will bounceIn when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="bounceIn bounceInHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will bounceIn when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated bounceIn" to its CHILD:
<div class="animatedParent">
<div class="animated bounceIn">This Will bounceIn</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated bounceIn">This Will bounceIn Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated bounceInInDown">This element will bounceIn only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated bounceIn" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated bounceIn" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated bounceIn" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated bounceIn clickExampleOne">This appears with animation effect bounceIn when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated bounceIn clickExampleOne">This element is animated with bounceIn when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "bounceIn" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes bounceIn {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.bounceIn.go{
animation-name: bounceIn;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "bounceIn"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes bounceInGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.bounceInGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "bounceIn" html element to make the animation fire
animation-name: bounceInGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated bounceIn clickExampleTwo bounceInGoAway">This appears with animation effect bounceIn when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: bounceInGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated bounceIn clickExampleThree bounceInGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated bounceIn clickExampleThree bounceInGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated bounceIn clickExampleThree bounceInGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "bounceIn" in this html example:
<div class="animatedParent">
<div class="animated bounceIn animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes bounceInDown {
0%, 60%, 75%, 90%, to {
animation-timing-function:cubic-bezier(.215, .61, .355, 1);
}
0% {
opacity:0; transform:translate3d(0, -3000px, 0);
}
60% {
opacity:1; transform:translate3d(0, 25px, 0);
}
75% {
transform:translate3d(0, -10px, 0);
}
90% {
transform:translate3d(0, 5px, 0);
}
to {
transform:none;
opacity: 1;
}
}
.bounceInDown, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.bounceInDown{
opacity: 0;
}
.bounceInDown.go{
animation-name: bounceInDown;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="bounceInDown go" to the HTML element you wish to animate (a "div" element is used here):
<div class="bounceInDown go">This element will bounceInDown</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".bounceInDownClickTrigger.bounceInDown").click(function(){
//use line above for animate on click.
//comment out "bounceInDownClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".bounceInDownHoverTrigger.bounceInDown").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="bounceInDown bounceInDownClickTrigger">This element will bounceInDown when clicked</div>
OR, FOR HOVER:
<div class="bounceInDown bounceInDownHoverTrigger">This element will bounceInDown when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".bounceInDownClickTrigger.bounceInDown").click(function(){
//use line above for animate on click.
//comment out "bounceInDownClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".bounceInDownHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="bounceInDown bounceInDownClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will bounceInDown when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="bounceInDown bounceInDownHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will bounceInDown when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated bounceInDown" to its CHILD:
<div class="animatedParent">
<div class="animated bounceInDown">This Will bounceInDown</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated bounceInDown">This Will bounceInDown Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated bounceInDownInDown">This element will bounceInDown only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated bounceInDown" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated bounceInDown" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated bounceInDown" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated bounceInDown clickExampleOne">This appears with animation effect bounceInDown when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated bounceInDown clickExampleOne">This element is animated with bounceInDown when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "bounceInDown" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes bounceInDown {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.bounceInDown.go{
animation-name: bounceInDown;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "bounceInDown"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes bounceInDownGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.bounceInDownGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "bounceInDown" html element to make the animation fire
animation-name: bounceInDownGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated bounceInDown clickExampleTwo bounceInDownGoAway">This appears with animation effect bounceInDown when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: bounceInDownGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated bounceInDown clickExampleThree bounceInDownGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated bounceInDown clickExampleThree bounceInDownGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated bounceInDown clickExampleThree bounceInDownGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "bounceInDown" in this html example:
<div class="animatedParent">
<div class="animated bounceInDown animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes bounceInLeft {
0%, 60%, 75%, 90%, to {
animation-timing-function:cubic-bezier(.215, .61, .355, 1);
}
0% {opacity:0; transform:translate3d(-3000px, 0, 0);
}
60% {opacity:1; transform:translate3d(25px, 0, 0);
}
75% {transform:translate3d(-10px, 0, 0);
}
90% {transform:translate3d(5px, 0, 0);
}
to {transform:none;
opacity: 1;
}
}
.bounceInLeft, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.bounceInLeft{
opacity: 0;
}
.bounceInLeft.go{
animation-name: bounceInLeft;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="bounceInLeft go" to the HTML element you wish to animate (a "div" element is used here):
<div class="bounceInLeft go">This element will bounceInLeft</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".bounceInLeftClickTrigger.bounceInLeft").click(function(){
//use line above for animate on click.
//comment out "bounceInLeftClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".bounceInLeftHoverTrigger.bounceInLeft").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="bounceInLeft bounceInLeftClickTrigger">This element will bounceInLeft when clicked</div>
OR, FOR HOVER:
<div class="bounceInLeft bounceInLeftHoverTrigger">This element will bounceInLeft when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".bounceInLeftClickTrigger.bounceInLeft").click(function(){
//use line above for animate on click.
//comment out "bounceInLeftClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".bounceInLeftHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="bounceInLeft bounceInLeftClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will bounceInLeft when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="bounceInLeft bounceInLeftHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will bounceInLeft when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated bounceInLeft" to its CHILD:
<div class="animatedParent">
<div class="animated bounceInLeft">This Will bounceInLeft</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated bounceInLeft">This Will bounceInLeft Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated bounceInLeftInDown">This element will bounceInLeft only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated bounceInLeft" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated bounceInLeft" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated bounceInLeft" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated bounceInLeft clickExampleOne">This appears with animation effect bounceInLeft when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated bounceInLeft clickExampleOne">This element is animated with bounceInLeft when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "bounceInLeft" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes bounceInLeft {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.bounceInLeft.go{
animation-name: bounceInLeft;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "bounceInLeft"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes bounceInLeftGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.bounceInLeftGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "bounceInLeft" html element to make the animation fire
animation-name: bounceInLeftGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated bounceInLeft clickExampleTwo bounceInLeftGoAway">This appears with animation effect bounceInLeft when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: bounceInLeftGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated bounceInLeft clickExampleThree bounceInLeftGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated bounceInLeft clickExampleThree bounceInLeftGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated bounceInLeft clickExampleThree bounceInLeftGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "bounceInLeft" in this html example:
<div class="animatedParent">
<div class="animated bounceInLeft animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes bounceInRight {
0%, 60%, 75%, 90%, to {
animation-timing-function:cubic-bezier(.215, .61, .355, 1);
}
0% {
opacity:0; transform:translate3d(3000px, 0, 0);
}
60% {opacity:1; transform:translate3d(-25px, 0, 0);
}
75% {transform:translate3d(10px, 0, 0);
}
90% {transform:translate3d(-5px, 0, 0);
}
to {transform:none;
opacity: 1;
}
}
.bounceInRight, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.bounceInRight{
opacity: 0;
}
.bounceInRight.go{
animation-name: bounceInRight;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="bounceInRight go" to the HTML element you wish to animate (a "div" element is used here):
<div class="bounceInRight go">This element will bounceInRight</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".bounceInRightClickTrigger.bounceInRight").click(function(){
//use line above for animate on click.
//comment out "bounceInRightClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".bounceInRightHoverTrigger.bounceInRight").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="bounceInRight bounceInRightClickTrigger">This element will bounceInRight when clicked</div>
OR, FOR HOVER:
<div class="bounceInRight bounceInRightHoverTrigger">This element will bounceInRight when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".bounceInRightClickTrigger.bounceInRight").click(function(){
//use line above for animate on click.
//comment out "bounceInRightClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".bounceInRightHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="bounceInRight bounceInRightClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will bounceInRight when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="bounceInRight bounceInRightHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will bounceInRight when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated bounceInRight" to its CHILD:
<div class="animatedParent">
<div class="animated bounceInRight">This Will bounceInRight</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated bounceInRight">This Will bounceInRight Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated bounceInRightInDown">This element will bounceInRight only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated bounceInRight" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated bounceInRight" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated bounceInRight" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated bounceInRight clickExampleOne">This appears with animation effect bounceInRight when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated bounceInRight clickExampleOne">This element is animated with bounceInRight when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "bounceInRight" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes bounceInRight {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.bounceInRight.go{
animation-name: bounceInRight;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "bounceInRight"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes bounceInRightGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.bounceInRightGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "bounceInRight" html element to make the animation fire
animation-name: bounceInRightGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated bounceInRight clickExampleTwo bounceInRightGoAway">This appears with animation effect bounceInRight when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: bounceInRightGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated bounceInRight clickExampleThree bounceInRightGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated bounceInRight clickExampleThree bounceInRightGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated bounceInRight clickExampleThree bounceInRightGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "bounceInRight" in this html example:
<div class="animatedParent">
<div class="animated bounceInRight animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes bounceInUp {
0%, 60%, 75%, 90%, to {
animation-timing-function:cubic-bezier(.215, .61, .355, 1);
}
0% {
opacity:0; transform:translate3d(0, 3000px, 0);
}
60% {
opacity:1; transform:translate3d(0, -20px, 0);
}
75% {
transform:translate3d(0, 10px, 0);
}
90% {
transform:translate3d(0, -5px, 0);
}
to {
transform:translateZ(0);
opacity: 1;
}
}
.bounceInUp, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.bounceInUp{
opacity: 0;
}
.bounceInUp.go{
animation-name: bounceInUp;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="bounceInUp go" to the HTML element you wish to animate (a "div" element is used here):
<div class="bounceInUp go">This element will bounceInUp</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".bounceInUpClickTrigger.bounceInUp").click(function(){
//use line above for animate on click.
//comment out "bounceInUpClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".bounceInUpHoverTrigger.bounceInUp").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="bounceInUp bounceInUpClickTrigger">This element will bounceInUp when clicked</div>
OR, FOR HOVER:
<div class="bounceInUp bounceInUpHoverTrigger">This element will bounceInUp when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".bounceInUpClickTrigger.bounceInUp").click(function(){
//use line above for animate on click.
//comment out "bounceInUpClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".bounceInUpHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="bounceInUp bounceInUpClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will bounceInUp when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="bounceInUp bounceInUpHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will bounceInUp when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated bounceInUp" to its CHILD:
<div class="animatedParent">
<div class="animated bounceInUp">This Will bounceInUp</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated bounceInUp">This Will bounceInUp Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated bounceInUpInDown">This element will bounceInUp only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated bounceInUp" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated bounceInUp" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated bounceInUp" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated bounceInUp clickExampleOne">This appears with animation effect bounceInUp when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated bounceInUp clickExampleOne">This element is animated with bounceInUp when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "bounceInUp" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes bounceInUp {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.bounceInUp.go{
animation-name: bounceInUp;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "bounceInUp"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes bounceInUpGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.bounceInUpGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "bounceInUp" html element to make the animation fire
animation-name: bounceInUpGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated bounceInUp clickExampleTwo bounceInUpGoAway">This appears with animation effect bounceInUp when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: bounceInUpGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated bounceInUp clickExampleThree bounceInUpGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated bounceInUp clickExampleThree bounceInUpGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated bounceInUp clickExampleThree bounceInUpGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "bounceInUp" in this html example:
<div class="animatedParent">
<div class="animated bounceInUp animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes fadeIn {
0% {
opacity:0;
}
to {
opacity:1;
}
}
.fadeIn, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.fadeIn{
opacity: 0;
}
.fadeIn.go{
animation-name: fadeIn;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="fadeIn go" to the HTML element you wish to animate (a "div" element is used here):
<div class="fadeIn go">This element will fadeIn</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".fadeInClickTrigger.fadeIn").click(function(){
//use line above for animate on click.
//comment out "fadeInClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".fadeInHoverTrigger.fadeIn").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="fadeIn fadeInClickTrigger">This element will fadeIn when clicked</div>
OR, FOR HOVER:
<div class="fadeIn fadeInHoverTrigger">This element will fadeIn when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".fadeInClickTrigger.fadeIn").click(function(){
//use line above for animate on click.
//comment out "fadeInClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".fadeInHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="fadeIn fadeInClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will fadeIn when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="fadeIn fadeInHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will fadeIn when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated fadeIn" to its CHILD:
<div class="animatedParent">
<div class="animated fadeIn">This Will fadeIn</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated fadeIn">This Will fadeIn Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated fadeInInDown">This element will fadeIn only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated fadeIn" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated fadeIn" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated fadeIn" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated fadeIn clickExampleOne">This appears with animation effect fadeIn when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated fadeIn clickExampleOne">This element is animated with fadeIn when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "fadeIn" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes fadeIn {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.fadeIn.go{
animation-name: fadeIn;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "fadeIn"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes fadeInGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.fadeInGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "fadeIn" html element to make the animation fire
animation-name: fadeInGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated fadeIn clickExampleTwo fadeInGoAway">This appears with animation effect fadeIn when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: fadeInGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated fadeIn clickExampleThree fadeInGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated fadeIn clickExampleThree fadeInGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated fadeIn clickExampleThree fadeInGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "fadeIn" in this html example:
<div class="animatedParent">
<div class="animated fadeIn animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes fadeInDown {
0% {
opacity:0;
transform:translate3d(0, -200px, 0);
}
to {
opacity:1;
transform:none;
}
}
.fadeInDown, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.fadeInDown{
opacity: 0;
}
.fadeInDown.go{
animation-name: fadeInDown;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="fadeInDown go" to the HTML element you wish to animate (a "div" element is used here):
<div class="fadeInDown go">This element will fadeInDown</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".fadeInDownClickTrigger.fadeInDown").click(function(){
//use line above for animate on click.
//comment out "fadeInDownClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".fadeInDownHoverTrigger.fadeInDown").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="fadeInDown fadeInDownClickTrigger">This element will fadeInDown when clicked</div>
OR, FOR HOVER:
<div class="fadeInDown fadeInDownHoverTrigger">This element will fadeInDown when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".fadeInDownClickTrigger.fadeInDown").click(function(){
//use line above for animate on click.
//comment out "fadeInDownClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".fadeInDownHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="fadeInDown fadeInDownClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will fadeInDown when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="fadeInDown fadeInDownHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will fadeInDown when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated fadeInDown" to its CHILD:
<div class="animatedParent">
<div class="animated fadeInDown">This Will fadeInDown</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated fadeInDown">This Will fadeInDown Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated fadeInDownInDown">This element will fadeInDown only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated fadeInDown" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated fadeInDown" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated fadeInDown" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated fadeInDown clickExampleOne">This appears with animation effect fadeInDown when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated fadeInDown clickExampleOne">This element is animated with fadeInDown when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "fadeInDown" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes fadeInDown {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.fadeInDown.go{
animation-name: fadeInDown;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "fadeInDown"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes fadeInDownGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.fadeInDownGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "fadeInDown" html element to make the animation fire
animation-name: fadeInDownGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated fadeInDown clickExampleTwo fadeInDownGoAway">This appears with animation effect fadeInDown when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: fadeInDownGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated fadeInDown clickExampleThree fadeInDownGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated fadeInDown clickExampleThree fadeInDownGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated fadeInDown clickExampleThree fadeInDownGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "fadeInDown" in this html example:
<div class="animatedParent">
<div class="animated fadeInDown animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes fadeInDownBig {
0% {
opacity:0;
transform:translate3d(0, -2000px, 0);
}
to {
opacity:1;
transform:none;
}
}
.fadeInDownBig, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.fadeInDownBig{
opacity: 0;
}
.fadeInDownBig.go{
animation-name: fadeInDownBig;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="fadeInDownBig go" to the HTML element you wish to animate (a "div" element is used here):
<div class="fadeInDownBig go">This element will fadeInDownBig</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".fadeInDownBigClickTrigger.fadeInDownBig").click(function(){
//use line above for animate on click.
//comment out "fadeInDownBigClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".fadeInDownBigHoverTrigger.fadeInDownBig").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="fadeInDownBig fadeInDownBigClickTrigger">This element will fadeInDownBig when clicked</div>
OR, FOR HOVER:
<div class="fadeInDownBig fadeInDownBigHoverTrigger">This element will fadeInDownBig when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".fadeInDownBigClickTrigger.fadeInDownBig").click(function(){
//use line above for animate on click.
//comment out "fadeInDownBigClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".fadeInDownBigHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="fadeInDownBig fadeInDownBigClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will fadeInDownBig when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="fadeInDownBig fadeInDownBigHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will fadeInDownBig when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated fadeInDownBig" to its CHILD:
<div class="animatedParent">
<div class="animated fadeInDownBig">This Will fadeInDownBig</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated fadeInDownBig">This Will fadeInDownBig Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated fadeInDownBigInDown">This element will fadeInDownBig only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated fadeInDownBig" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated fadeInDownBig" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated fadeInDownBig" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated fadeInDownBig clickExampleOne">This appears with animation effect fadeInDownBig when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated fadeInDownBig clickExampleOne">This element is animated with fadeInDownBig when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "fadeInDownBig" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes fadeInDownBig {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.fadeInDownBig.go{
animation-name: fadeInDownBig;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "fadeInDownBig"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes fadeInDownBigGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.fadeInDownBigGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "fadeInDownBig" html element to make the animation fire
animation-name: fadeInDownBigGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated fadeInDownBig clickExampleTwo fadeInDownBigGoAway">This appears with animation effect fadeInDownBig when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: fadeInDownBigGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated fadeInDownBig clickExampleThree fadeInDownBigGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated fadeInDownBig clickExampleThree fadeInDownBigGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated fadeInDownBig clickExampleThree fadeInDownBigGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "fadeInDownBig" in this html example:
<div class="animatedParent">
<div class="animated fadeInDownBig animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes fadeInLeft {
0% {
opacity:0;
transform:translate3d(-200px, 0, 0);
}
to {
opacity:1;
transform:none;
}
}
.fadeInLeft, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.fadeInLeft{
opacity: 0;
}
.fadeInLeft.go{
animation-name: fadeInLeft;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="fadeInLeft go" to the HTML element you wish to animate (a "div" element is used here):
<div class="fadeInLeft go">This element will fadeInLeft</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".fadeInLeftClickTrigger.fadeInLeft").click(function(){
//use line above for animate on click.
//comment out "fadeInLeftClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".fadeInLeftHoverTrigger.fadeInLeft").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="fadeInLeft fadeInLeftClickTrigger">This element will fadeInLeft when clicked</div>
OR, FOR HOVER:
<div class="fadeInLeft fadeInLeftHoverTrigger">This element will fadeInLeft when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".fadeInLeftClickTrigger.fadeInLeft").click(function(){
//use line above for animate on click.
//comment out "fadeInLeftClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".fadeInLeftHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="fadeInLeft fadeInLeftClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will fadeInLeft when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="fadeInLeft fadeInLeftHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will fadeInLeft when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated fadeInLeft" to its CHILD:
<div class="animatedParent">
<div class="animated fadeInLeft">This Will fadeInLeft</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated fadeInLeft">This Will fadeInLeft Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated fadeInLeftInDown">This element will fadeInLeft only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated fadeInLeft" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated fadeInLeft" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated fadeInLeft" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated fadeInLeft clickExampleOne">This appears with animation effect fadeInLeft when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated fadeInLeft clickExampleOne">This element is animated with fadeInLeft when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "fadeInLeft" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes fadeInLeft {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.fadeInLeft.go{
animation-name: fadeInLeft;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "fadeInLeft"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes fadeInLeftGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.fadeInLeftGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "fadeInLeft" html element to make the animation fire
animation-name: fadeInLeftGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated fadeInLeft clickExampleTwo fadeInLeftGoAway">This appears with animation effect fadeInLeft when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: fadeInLeftGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated fadeInLeft clickExampleThree fadeInLeftGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated fadeInLeft clickExampleThree fadeInLeftGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated fadeInLeft clickExampleThree fadeInLeftGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "fadeInLeft" in this html example:
<div class="animatedParent">
<div class="animated fadeInLeft animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes fadeInLeftBig {
0% {
opacity:0;
transform:translate3d(-2000px, 0, 0);
}
to {
opacity:1;
transform:none;
}
}
.fadeInLeftBig, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.fadeInLeftBig{
opacity: 0;
}
.fadeInLeftBig.go{
animation-name: fadeInLeftBig;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="fadeInLeftBig go" to the HTML element you wish to animate (a "div" element is used here):
<div class="fadeInLeftBig go">This element will fadeInLeftBig</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".fadeInLeftBigClickTrigger.fadeInLeftBig").click(function(){
//use line above for animate on click.
//comment out "fadeInLeftBigClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".fadeInLeftBigHoverTrigger.fadeInLeftBig").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="fadeInLeftBig fadeInLeftBigClickTrigger">This element will fadeInLeftBig when clicked</div>
OR, FOR HOVER:
<div class="fadeInLeftBig fadeInLeftBigHoverTrigger">This element will fadeInLeftBig when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".fadeInLeftBigClickTrigger.fadeInLeftBig").click(function(){
//use line above for animate on click.
//comment out "fadeInLeftBigClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".fadeInLeftBigHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="fadeInLeftBig fadeInLeftBigClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will fadeInLeftBig when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="fadeInLeftBig fadeInLeftBigHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will fadeInLeftBig when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated fadeInLeftBig" to its CHILD:
<div class="animatedParent">
<div class="animated fadeInLeftBig">This Will fadeInLeftBig</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated fadeInLeftBig">This Will fadeInLeftBig Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated fadeInLeftBigInDown">This element will fadeInLeftBig only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated fadeInLeftBig" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated fadeInLeftBig" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated fadeInLeftBig" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated fadeInLeftBig clickExampleOne">This appears with animation effect fadeInLeftBig when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated fadeInLeftBig clickExampleOne">This element is animated with fadeInLeftBig when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "fadeInLeftBig" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes fadeInLeftBig {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.fadeInLeftBig.go{
animation-name: fadeInLeftBig;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "fadeInLeftBig"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes fadeInLeftBigGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.fadeInLeftBigGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "fadeInLeftBig" html element to make the animation fire
animation-name: fadeInLeftBigGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated fadeInLeftBig clickExampleTwo fadeInLeftBigGoAway">This appears with animation effect fadeInLeftBig when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: fadeInLeftBigGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated fadeInLeftBig clickExampleThree fadeInLeftBigGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated fadeInLeftBig clickExampleThree fadeInLeftBigGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated fadeInLeftBig clickExampleThree fadeInLeftBigGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "fadeInLeftBig" in this html example:
<div class="animatedParent">
<div class="animated fadeInLeftBig animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes fadeInRight {
0% {
opacity:0;
transform:translate3d(200px, 0, 0);
}
to {
opacity:1;
transform:none;
}
}
.fadeInRight, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.fadeInRight{
opacity: 0;
}
.fadeInRight.go{
animation-name: fadeInRight;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="fadeInRight go" to the HTML element you wish to animate (a "div" element is used here):
<div class="fadeInRight go">This element will fadeInRight</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".fadeInRightClickTrigger.fadeInRight").click(function(){
//use line above for animate on click.
//comment out "fadeInRightClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".fadeInRightHoverTrigger.fadeInRight").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="fadeInRight fadeInRightClickTrigger">This element will fadeInRight when clicked</div>
OR, FOR HOVER:
<div class="fadeInRight fadeInRightHoverTrigger">This element will fadeInRight when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".fadeInRightClickTrigger.fadeInRight").click(function(){
//use line above for animate on click.
//comment out "fadeInRightClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".fadeInRightHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="fadeInRight fadeInRightClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will fadeInRight when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="fadeInRight fadeInRightHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will fadeInRight when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated fadeInRight" to its CHILD:
<div class="animatedParent">
<div class="animated fadeInRight">This Will fadeInRight</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated fadeInRight">This Will fadeInRight Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated fadeInRightInDown">This element will fadeInRight only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated fadeInRight" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated fadeInRight" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated fadeInRight" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated fadeInRight clickExampleOne">This appears with animation effect fadeInRight when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated fadeInRight clickExampleOne">This element is animated with fadeInRight when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "fadeInRight" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes fadeInRight {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.fadeInRight.go{
animation-name: fadeInRight;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "fadeInRight"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes fadeInRightGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.fadeInRightGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "fadeInRight" html element to make the animation fire
animation-name: fadeInRightGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated fadeInRight clickExampleTwo fadeInRightGoAway">This appears with animation effect fadeInRight when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: fadeInRightGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated fadeInRight clickExampleThree fadeInRightGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated fadeInRight clickExampleThree fadeInRightGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated fadeInRight clickExampleThree fadeInRightGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "fadeInRight" in this html example:
<div class="animatedParent">
<div class="animated fadeInRight animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes fadeInRightBig {
0% {
opacity:0;
transform:translate3d(2000px, 0, 0);
}
to {
opacity:1;
transform:none;
}
}
.fadeInRightBig, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.fadeInRightBig{
opacity: 0;
}
.fadeInRightBig.go{
animation-name: fadeInRightBig;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="fadeInRightBig go" to the HTML element you wish to animate (a "div" element is used here):
<div class="fadeInRightBig go">This element will fadeInRightBig</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".fadeInRightBigClickTrigger.fadeInRightBig").click(function(){
//use line above for animate on click.
//comment out "fadeInRightBigClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".fadeInRightBigHoverTrigger.fadeInRightBig").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="fadeInRightBig fadeInRightBigClickTrigger">This element will fadeInRightBig when clicked</div>
OR, FOR HOVER:
<div class="fadeInRightBig fadeInRightBigHoverTrigger">This element will fadeInRightBig when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".fadeInRightBigClickTrigger.fadeInRightBig").click(function(){
//use line above for animate on click.
//comment out "fadeInRightBigClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".fadeInRightBigHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="fadeInRightBig fadeInRightBigClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will fadeInRightBig when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="fadeInRightBig fadeInRightBigHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will fadeInRightBig when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated fadeInRightBig" to its CHILD:
<div class="animatedParent">
<div class="animated fadeInRightBig">This Will fadeInRightBig</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated fadeInRightBig">This Will fadeInRightBig Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated fadeInRightBigInDown">This element will fadeInRightBig only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated fadeInRightBig" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated fadeInRightBig" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated fadeInRightBig" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated fadeInRightBig clickExampleOne">This appears with animation effect fadeInRightBig when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated fadeInRightBig clickExampleOne">This element is animated with fadeInRightBig when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "fadeInRightBig" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes fadeInRightBig {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.fadeInRightBig.go{
animation-name: fadeInRightBig;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "fadeInRightBig"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes fadeInRightBigGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.fadeInRightBigGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "fadeInRightBig" html element to make the animation fire
animation-name: fadeInRightBigGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated fadeInRightBig clickExampleTwo fadeInRightBigGoAway">This appears with animation effect fadeInRightBig when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: fadeInRightBigGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated fadeInRightBig clickExampleThree fadeInRightBigGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated fadeInRightBig clickExampleThree fadeInRightBigGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated fadeInRightBig clickExampleThree fadeInRightBigGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "fadeInRightBig" in this html example:
<div class="animatedParent">
<div class="animated fadeInRightBig animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes fadeInUp {
0% {
opacity:0;
transform:translate3d(0, 200px, 0);
}
to {
opacity:1;
transform:none;
}
}
.fadeInUp, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.fadeInUp{
opacity: 0;
}
.fadeInUp.go{
animation-name: fadeInUp;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="fadeInUp go" to the HTML element you wish to animate (a "div" element is used here):
<div class="fadeInUp go">This element will fadeInUp</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".fadeInUpClickTrigger.fadeInUp").click(function(){
//use line above for animate on click.
//comment out "fadeInUpClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".fadeInUpHoverTrigger.fadeInUp").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="fadeInUp fadeInUpClickTrigger">This element will fadeInUp when clicked</div>
OR, FOR HOVER:
<div class="fadeInUp fadeInUpHoverTrigger">This element will fadeInUp when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".fadeInUpClickTrigger.fadeInUp").click(function(){
//use line above for animate on click.
//comment out "fadeInUpClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".fadeInUpHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="fadeInUp fadeInUpClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will fadeInUp when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="fadeInUp fadeInUpHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will fadeInUp when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated fadeInUp" to its CHILD:
<div class="animatedParent">
<div class="animated fadeInUp">This Will fadeInUp</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated fadeInUp">This Will fadeInUp Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated fadeInUpInDown">This element will fadeInUp only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated fadeInUp" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated fadeInUp" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated fadeInUp" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated fadeInUp clickExampleOne">This appears with animation effect fadeInUp when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated fadeInUp clickExampleOne">This element is animated with fadeInUp when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "fadeInUp" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes fadeInUp {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.fadeInUp.go{
animation-name: fadeInUp;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "fadeInUp"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes fadeInUpGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.fadeInUpGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "fadeInUp" html element to make the animation fire
animation-name: fadeInUpGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated fadeInUp clickExampleTwo fadeInUpGoAway">This appears with animation effect fadeInUp when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: fadeInUpGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated fadeInUp clickExampleThree fadeInUpGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated fadeInUp clickExampleThree fadeInUpGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated fadeInUp clickExampleThree fadeInUpGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "fadeInUp" in this html example:
<div class="animatedParent">
<div class="animated fadeInUp animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes fadeInUpBig {
0% {
opacity:0;
transform:translate3d(0, 2000px, 0);
}
to {
opacity:1;
transform:none;
}
}
.fadeInUpBig, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.fadeInUpBig{
opacity: 0;
}
.fadeInUpBig.go{
animation-name: fadeInUpBig;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="fadeInUpBig go" to the HTML element you wish to animate (a "div" element is used here):
<div class="fadeInUpBig go">This element will fadeInUpBig</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".fadeInUpBigClickTrigger.fadeInUpBig").click(function(){
//use line above for animate on click.
//comment out "fadeInUpBigClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".fadeInUpBigHoverTrigger.fadeInUpBig").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="fadeInUpBig fadeInUpBigClickTrigger">This element will fadeInUpBig when clicked</div>
OR, FOR HOVER:
<div class="fadeInUpBig fadeInUpBigHoverTrigger">This element will fadeInUpBig when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".fadeInUpBigClickTrigger.fadeInUpBig").click(function(){
//use line above for animate on click.
//comment out "fadeInUpBigClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".fadeInUpBigHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="fadeInUpBig fadeInUpBigClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will fadeInUpBig when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="fadeInUpBig fadeInUpBigHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will fadeInUpBig when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated fadeInUpBig" to its CHILD:
<div class="animatedParent">
<div class="animated fadeInUpBig">This Will fadeInUpBig</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated fadeInUpBig">This Will fadeInUpBig Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated fadeInUpBigInDown">This element will fadeInUpBig only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated fadeInUpBig" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated fadeInUpBig" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated fadeInUpBig" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated fadeInUpBig clickExampleOne">This appears with animation effect fadeInUpBig when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated fadeInUpBig clickExampleOne">This element is animated with fadeInUpBig when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "fadeInUpBig" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes fadeInUpBig {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.fadeInUpBig.go{
animation-name: fadeInUpBig;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "fadeInUpBig"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes fadeInUpBigGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.fadeInUpBigGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "fadeInUpBig" html element to make the animation fire
animation-name: fadeInUpBigGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated fadeInUpBig clickExampleTwo fadeInUpBigGoAway">This appears with animation effect fadeInUpBig when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: fadeInUpBigGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated fadeInUpBig clickExampleThree fadeInUpBigGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated fadeInUpBig clickExampleThree fadeInUpBigGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated fadeInUpBig clickExampleThree fadeInUpBigGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "fadeInUpBig" in this html example:
<div class="animatedParent">
<div class="animated fadeInUpBig animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes flip {
0% {
transform:perspective(400px) rotateY(-1turn);
opacity:0;
}
0%, 40% {
animation-timing-function:ease-out;
}
40% {
transform:perspective(400px) translateZ(150px) rotateY(-190deg);
}
50% {
transform:perspective(400px) translateZ(150px) rotateY(-170deg);
opacity: 1;
}
50%, 80% {
animation-timing-function:ease-in;
}
80% {
transform:perspective(400px) scale3d(.95, .95, .95);
}
to {
transform:perspective(400px);
animation-timing-function:ease-in;
opacity: 1;
}
}
.flip, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.flip{
opacity: 0;
}
.flip.go{
backface-visibility: visible;
animation-name: flip;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="flip go" to the HTML element you wish to animate (a "div" element is used here):
<div class="flip go">This element will flip</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".flipClickTrigger.flip").click(function(){
//use line above for animate on click.
//comment out "flipClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".flipHoverTrigger.flip").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="flip flipClickTrigger">This element will flip when clicked</div>
OR, FOR HOVER:
<div class="flip flipHoverTrigger">This element will flip when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".flipClickTrigger.flip").click(function(){
//use line above for animate on click.
//comment out "flipClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".flipHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="flip flipClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will flip when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="flip flipHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will flip when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated flip" to its CHILD:
<div class="animatedParent">
<div class="animated flip">This Will flip</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated flip">This Will flip Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated flipInDown">This element will flip only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated flip" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated flip" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated flip" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated flip clickExampleOne">This appears with animation effect flip when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated flip clickExampleOne">This element is animated with flip when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "flip" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes flip {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.flip.go{
animation-name: flip;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "flip"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes flipGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.flipGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "flip" html element to make the animation fire
animation-name: flipGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated flip clickExampleTwo flipGoAway">This appears with animation effect flip when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: flipGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated flip clickExampleThree flipGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated flip clickExampleThree flipGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated flip clickExampleThree flipGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "flip" in this html example:
<div class="animatedParent">
<div class="animated flip animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes flipInX {
0% {
transform:perspective(400px) rotateX(90deg);
opacity:0;
}
0%, 40% {
animation-timing-function:ease-in;
}
40% {
transform:perspective(400px) rotateX(-20deg);
}
60% {
transform:perspective(400px) rotateX(10deg);
opacity:1
}
80% {
transform:perspective(400px) rotateX(-5deg);
}
to {
transform:perspective(400px);
opacity: 1;
}
}
.flipInX, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.flipInX{
opacity: 0;
}
.flipInX.go{
backface-visibility: visible!important;
animation-name: flipInX;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="flipInX go" to the HTML element you wish to animate (a "div" element is used here):
<div class="flipInX go">This element will flipInX</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".flipInXClickTrigger.flipInX").click(function(){
//use line above for animate on click.
//comment out "flipInXClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".flipInXHoverTrigger.flipInX").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="flipInX flipInXClickTrigger">This element will flipInX when clicked</div>
OR, FOR HOVER:
<div class="flipInX flipInXHoverTrigger">This element will flipInX when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".flipInXClickTrigger.flipInX").click(function(){
//use line above for animate on click.
//comment out "flipInXClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".flipInXHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="flipInX flipInXClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will flipInX when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="flipInX flipInXHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will flipInX when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated flipInX" to its CHILD:
<div class="animatedParent">
<div class="animated flipInX">This Will flipInX</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated flipInX">This Will flipInX Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated flipInXInDown">This element will flipInX only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated flipInX" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated flipInX" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated flipInX" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated flipInX clickExampleOne">This appears with animation effect flipInX when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated flipInX clickExampleOne">This element is animated with flipInX when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "flipInX" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes flipInX {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.flipInX.go{
animation-name: flipInX;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "flipInX"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes flipInXGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.flipInXGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "flipInX" html element to make the animation fire
animation-name: flipInXGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated flipInX clickExampleTwo flipInXGoAway">This appears with animation effect flipInX when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: flipInXGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated flipInX clickExampleThree flipInXGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated flipInX clickExampleThree flipInXGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated flipInX clickExampleThree flipInXGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "flipInX" in this html example:
<div class="animatedParent">
<div class="animated flipInX animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes flipInY {
0% {
transform:perspective(400px) rotateY(90deg);
opacity:0;
}
0%, 40% {
animation-timing-function:ease-in;
}
40% {
transform:perspective(400px) rotateY(-20deg);
}
60% {
transform:perspective(400px) rotateY(10deg);
opacity:1
}
80% {
transform:perspective(400px) rotateY(-5deg);
}
to {
transform:perspective(400px);
opacity: 1;
}
}
.flipInY, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.flipInY{
opacity: 0;
}
.flipInY.go{
-webkit-backface-visibility: visible!important;
backface-visibility: visible!important;
animation-name: flipInY;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="flipInY go" to the HTML element you wish to animate (a "div" element is used here):
<div class="flipInY go">This element will flipInY</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".flipInYClickTrigger.flipInY").click(function(){
//use line above for animate on click.
//comment out "flipInYClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".flipInYHoverTrigger.flipInY").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="flipInY flipInYClickTrigger">This element will flipInY when clicked</div>
OR, FOR HOVER:
<div class="flipInY flipInYHoverTrigger">This element will flipInY when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".flipInYClickTrigger.flipInY").click(function(){
//use line above for animate on click.
//comment out "flipInYClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".flipInYHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="flipInY flipInYClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will flipInY when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="flipInY flipInYHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will flipInY when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated flipInY" to its CHILD:
<div class="animatedParent">
<div class="animated flipInY">This Will flipInY</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated flipInY">This Will flipInY Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated flipInYInDown">This element will flipInY only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated flipInY" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated flipInY" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated flipInY" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated flipInY clickExampleOne">This appears with animation effect flipInY when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated flipInY clickExampleOne">This element is animated with flipInY when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "flipInY" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes flipInY {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.flipInY.go{
animation-name: flipInY;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "flipInY"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes flipInYGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.flipInYGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "flipInY" html element to make the animation fire
animation-name: flipInYGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated flipInY clickExampleTwo flipInYGoAway">This appears with animation effect flipInY when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: flipInYGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated flipInY clickExampleThree flipInYGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated flipInY clickExampleThree flipInYGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated flipInY clickExampleThree flipInYGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "flipInY" in this html example:
<div class="animatedParent">
<div class="animated flipInY animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes lightSpeedInLeft {
0% {
transform: translateX(-100%) skewX(30deg);
opacity: 0;
}
60% {
transform: translateX(20%) skewX(-30deg);
opacity: 1;
}
80% {
transform: translateX(0%) skewX(15deg);
}
100% {
transform: translateX(0%) skewX(0deg);
opacity: 1;
}
}
.lightSpeedInLeft, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.lightSpeedInLeft{
opacity: 0;
}
.lightSpeedInLeft.go{
animation-name: lightSpeedInLeft;
animation-timing-function: ease-out;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="lightSpeedInLeft go" to the HTML element you wish to animate (a "div" element is used here):
<div class="lightSpeedInLeft go">This element will lightSpeedInLeft</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".lightSpeedInLeftClickTrigger.lightSpeedInLeft").click(function(){
//use line above for animate on click.
//comment out "lightSpeedInLeftClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".lightSpeedInLeftHoverTrigger.lightSpeedInLeft").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="lightSpeedInLeft lightSpeedInLeftClickTrigger">This element will lightSpeedInLeft when clicked</div>
OR, FOR HOVER:
<div class="lightSpeedInLeft lightSpeedInLeftHoverTrigger">This element will lightSpeedInLeft when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".lightSpeedInLeftClickTrigger.lightSpeedInLeft").click(function(){
//use line above for animate on click.
//comment out "lightSpeedInLeftClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".lightSpeedInLeftHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="lightSpeedInLeft lightSpeedInLeftClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will lightSpeedInLeft when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="lightSpeedInLeft lightSpeedInLeftHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will lightSpeedInLeft when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated lightSpeedInLeft" to its CHILD:
<div class="animatedParent">
<div class="animated lightSpeedInLeft">This Will lightSpeedInLeft</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated lightSpeedInLeft">This Will lightSpeedInLeft Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated lightSpeedInLeftInDown">This element will lightSpeedInLeft only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated lightSpeedInLeft" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated lightSpeedInLeft" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated lightSpeedInLeft" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated lightSpeedInLeft clickExampleOne">This appears with animation effect lightSpeedInLeft when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated lightSpeedInLeft clickExampleOne">This element is animated with lightSpeedInLeft when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "lightSpeedInLeft" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes lightSpeedInLeft {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.lightSpeedInLeft.go{
animation-name: lightSpeedInLeft;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "lightSpeedInLeft"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes lightSpeedInLeftGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.lightSpeedInLeftGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "lightSpeedInLeft" html element to make the animation fire
animation-name: lightSpeedInLeftGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated lightSpeedInLeft clickExampleTwo lightSpeedInLeftGoAway">This appears with animation effect lightSpeedInLeft when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: lightSpeedInLeftGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated lightSpeedInLeft clickExampleThree lightSpeedInLeftGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated lightSpeedInLeft clickExampleThree lightSpeedInLeftGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated lightSpeedInLeft clickExampleThree lightSpeedInLeftGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "lightSpeedInLeft" in this html example:
<div class="animatedParent">
<div class="animated lightSpeedInLeft animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes lightSpeedInRight {
0% {
transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
60% {
transform: translateX(-20%) skewX(30deg);
opacity: 1;
}
80% {
transform: translateX(0%) skewX(-15deg);
}
100% {
transform: translateX(0%) skewX(0deg);
opacity: 1;
}
}
.lightSpeedInRight, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.lightSpeedInRight{
opacity: 0;
}
.lightSpeedInRight.go{
animation-name: lightSpeedInRight;
animation-timing-function: ease-out;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="lightSpeedInRight go" to the HTML element you wish to animate (a "div" element is used here):
<div class="lightSpeedInRight go">This element will lightSpeedInRight</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".lightSpeedInRightClickTrigger.lightSpeedInRight").click(function(){
//use line above for animate on click.
//comment out "lightSpeedInRightClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".lightSpeedInRightHoverTrigger.lightSpeedInRight").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="lightSpeedInRight lightSpeedInRightClickTrigger">This element will lightSpeedInRight when clicked</div>
OR, FOR HOVER:
<div class="lightSpeedInRight lightSpeedInRightHoverTrigger">This element will lightSpeedInRight when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".lightSpeedInRightClickTrigger.lightSpeedInRight").click(function(){
//use line above for animate on click.
//comment out "lightSpeedInRightClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".lightSpeedInRightHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="lightSpeedInRight lightSpeedInRightClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will lightSpeedInRight when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="lightSpeedInRight lightSpeedInRightHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will lightSpeedInRight when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated lightSpeedInRight" to its CHILD:
<div class="animatedParent">
<div class="animated lightSpeedInRight">This Will lightSpeedInRight</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated lightSpeedInRight">This Will lightSpeedInRight Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated lightSpeedInRightInDown">This element will lightSpeedInRight only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated lightSpeedInRight" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated lightSpeedInRight" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated lightSpeedInRight" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated lightSpeedInRight clickExampleOne">This appears with animation effect lightSpeedInRight when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated lightSpeedInRight clickExampleOne">This element is animated with lightSpeedInRight when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "lightSpeedInRight" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes lightSpeedInRight {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.lightSpeedInRight.go{
animation-name: lightSpeedInRight;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "lightSpeedInRight"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes lightSpeedInRightGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.lightSpeedInRightGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "lightSpeedInRight" html element to make the animation fire
animation-name: lightSpeedInRightGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated lightSpeedInRight clickExampleTwo lightSpeedInRightGoAway">This appears with animation effect lightSpeedInRight when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: lightSpeedInRightGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated lightSpeedInRight clickExampleThree lightSpeedInRightGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated lightSpeedInRight clickExampleThree lightSpeedInRightGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated lightSpeedInRight clickExampleThree lightSpeedInRightGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "lightSpeedInRight" in this html example:
<div class="animatedParent">
<div class="animated lightSpeedInRight animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes rotateIn {
0% {
transform-origin:center;
transform:rotate(-200deg);
opacity:0;
}
to {
transform-origin:center;
transform:none;
opacity:1;
}
}
.rotateIn, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.rotateIn{
opacity: 0;
}
.rotateIn.go{
animation-name: rotateIn;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="rotateIn go" to the HTML element you wish to animate (a "div" element is used here):
<div class="rotateIn go">This element will rotateIn</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".rotateInClickTrigger.rotateIn").click(function(){
//use line above for animate on click.
//comment out "rotateInClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".rotateInHoverTrigger.rotateIn").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="rotateIn rotateInClickTrigger">This element will rotateIn when clicked</div>
OR, FOR HOVER:
<div class="rotateIn rotateInHoverTrigger">This element will rotateIn when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".rotateInClickTrigger.rotateIn").click(function(){
//use line above for animate on click.
//comment out "rotateInClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".rotateInHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="rotateIn rotateInClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will rotateIn when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="rotateIn rotateInHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will rotateIn when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated rotateIn" to its CHILD:
<div class="animatedParent">
<div class="animated rotateIn">This Will rotateIn</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated rotateIn">This Will rotateIn Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated rotateInInDown">This element will rotateIn only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated rotateIn" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated rotateIn" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated rotateIn" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated rotateIn clickExampleOne">This appears with animation effect rotateIn when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated rotateIn clickExampleOne">This element is animated with rotateIn when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "rotateIn" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes rotateIn {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.rotateIn.go{
animation-name: rotateIn;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "rotateIn"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes rotateInGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.rotateInGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "rotateIn" html element to make the animation fire
animation-name: rotateInGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated rotateIn clickExampleTwo rotateInGoAway">This appears with animation effect rotateIn when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: rotateInGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated rotateIn clickExampleThree rotateInGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated rotateIn clickExampleThree rotateInGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated rotateIn clickExampleThree rotateInGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "rotateIn" in this html example:
<div class="animatedParent">
<div class="animated rotateIn animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes rotateInDownLeftDownLeft {
0% {
transform-origin:left bottom;
transform:rotate(-45deg);
opacity:0;
}
to {
transform-origin:left bottom;
transform:none;
opacity:1;
}
}
.rotateInDownLeft, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.rotateInDownLeft{
opacity: 0;
}
.rotateInDownLeft.go{
animation-name: rotateInDownLeftDownLeft;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="rotateInDownLeft go" to the HTML element you wish to animate (a "div" element is used here):
<div class="rotateInDownLeft go">This element will rotateInDownLeft</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".rotateInDownLeftClickTrigger.rotateInDownLeft").click(function(){
//use line above for animate on click.
//comment out "rotateInDownLeftClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".rotateInDownLeftHoverTrigger.rotateInDownLeft").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="rotateInDownLeft rotateInDownLeftClickTrigger">This element will rotateInDownLeft when clicked</div>
OR, FOR HOVER:
<div class="rotateInDownLeft rotateInDownLeftHoverTrigger">This element will rotateInDownLeft when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".rotateInDownLeftClickTrigger.rotateInDownLeft").click(function(){
//use line above for animate on click.
//comment out "rotateInDownLeftClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".rotateInDownLeftHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="rotateInDownLeft rotateInDownLeftClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will rotateInDownLeft when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="rotateInDownLeft rotateInDownLeftHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will rotateInDownLeft when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated rotateInDownLeft" to its CHILD:
<div class="animatedParent">
<div class="animated rotateInDownLeft">This Will rotateInDownLeft</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated rotateInDownLeft">This Will rotateInDownLeft Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated rotateInDownLeftInDown">This element will rotateInDownLeft only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated rotateInDownLeft" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated rotateInDownLeft" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated rotateInDownLeft" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated rotateInDownLeft clickExampleOne">This appears with animation effect rotateInDownLeft when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated rotateInDownLeft clickExampleOne">This element is animated with rotateInDownLeft when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "rotateInDownLeft" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes rotateInDownLeft {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.rotateInDownLeft.go{
animation-name: rotateInDownLeft;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "rotateInDownLeft"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes rotateInDownLeftGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.rotateInDownLeftGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "rotateInDownLeft" html element to make the animation fire
animation-name: rotateInDownLeftGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated rotateInDownLeft clickExampleTwo rotateInDownLeftGoAway">This appears with animation effect rotateInDownLeft when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: rotateInDownLeftGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated rotateInDownLeft clickExampleThree rotateInDownLeftGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated rotateInDownLeft clickExampleThree rotateInDownLeftGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated rotateInDownLeft clickExampleThree rotateInDownLeftGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "rotateInDownLeft" in this html example:
<div class="animatedParent">
<div class="animated rotateInDownLeft animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes rotateInDownRight {
0% {
transform-origin:right bottom;
transform:rotate(45deg);
opacity:0;
}
to {
transform-origin:right bottom;
transform:none;
opacity:1;
}
}
.rotateInDownRight, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.rotateInDownRight{
opacity: 0;
}
.rotateInDownRight.go{
animation-name: rotateInDownRight;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="rotateInDownRight go" to the HTML element you wish to animate (a "div" element is used here):
<div class="rotateInDownRight go">This element will rotateInDownRight</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".rotateInDownRightClickTrigger.rotateInDownRight").click(function(){
//use line above for animate on click.
//comment out "rotateInDownRightClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".rotateInDownRightHoverTrigger.rotateInDownRight").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="rotateInDownRight rotateInDownRightClickTrigger">This element will rotateInDownRight when clicked</div>
OR, FOR HOVER:
<div class="rotateInDownRight rotateInDownRightHoverTrigger">This element will rotateInDownRight when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".rotateInDownRightClickTrigger.rotateInDownRight").click(function(){
//use line above for animate on click.
//comment out "rotateInDownRightClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".rotateInDownRightHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="rotateInDownRight rotateInDownRightClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will rotateInDownRight when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="rotateInDownRight rotateInDownRightHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will rotateInDownRight when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated rotateInDownRight" to its CHILD:
<div class="animatedParent">
<div class="animated rotateInDownRight">This Will rotateInDownRight</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated rotateInDownRight">This Will rotateInDownRight Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated rotateInDownRightInDown">This element will rotateInDownRight only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated rotateInDownRight" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated rotateInDownRight" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated rotateInDownRight" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated rotateInDownRight clickExampleOne">This appears with animation effect rotateInDownRight when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated rotateInDownRight clickExampleOne">This element is animated with rotateInDownRight when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "rotateInDownRight" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes rotateInDownRight {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.rotateInDownRight.go{
animation-name: rotateInDownRight;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "rotateInDownRight"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes rotateInDownRightGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.rotateInDownRightGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "rotateInDownRight" html element to make the animation fire
animation-name: rotateInDownRightGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated rotateInDownRight clickExampleTwo rotateInDownRightGoAway">This appears with animation effect rotateInDownRight when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: rotateInDownRightGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated rotateInDownRight clickExampleThree rotateInDownRightGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated rotateInDownRight clickExampleThree rotateInDownRightGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated rotateInDownRight clickExampleThree rotateInDownRightGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "rotateInDownRight" in this html example:
<div class="animatedParent">
<div class="animated rotateInDownRight animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes rotateInUpLeft {
0% {
transform-origin:left bottom;
transform:rotate(45deg);
opacity:0;
}
to {
transform-origin:left bottom;
transform:none;
opacity:1;
}
}
.rotateInUpLeft, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.rotateInUpLeft{
opacity: 0;
}
.rotateInUpLeft.go{
animation-name: rotateInUpLeft;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="rotateInUpLeft go" to the HTML element you wish to animate (a "div" element is used here):
<div class="rotateInUpLeft go">This element will rotateInUpLeft</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".rotateInUpLeftClickTrigger.rotateInUpLeft").click(function(){
//use line above for animate on click.
//comment out "rotateInUpLeftClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".rotateInUpLeftHoverTrigger.rotateInUpLeft").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="rotateInUpLeft rotateInUpLeftClickTrigger">This element will rotateInUpLeft when clicked</div>
OR, FOR HOVER:
<div class="rotateInUpLeft rotateInUpLeftHoverTrigger">This element will rotateInUpLeft when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".rotateInUpLeftClickTrigger.rotateInUpLeft").click(function(){
//use line above for animate on click.
//comment out "rotateInUpLeftClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".rotateInUpLeftHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="rotateInUpLeft rotateInUpLeftClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will rotateInUpLeft when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="rotateInUpLeft rotateInUpLeftHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will rotateInUpLeft when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated rotateInUpLeft" to its CHILD:
<div class="animatedParent">
<div class="animated rotateInUpLeft">This Will rotateInUpLeft</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated rotateInUpLeft">This Will rotateInUpLeft Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated rotateInUpLeftInDown">This element will rotateInUpLeft only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated rotateInUpLeft" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated rotateInUpLeft" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated rotateInUpLeft" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated rotateInUpLeft clickExampleOne">This appears with animation effect rotateInUpLeft when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated rotateInUpLeft clickExampleOne">This element is animated with rotateInUpLeft when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "rotateInUpLeft" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes rotateInUpLeft {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.rotateInUpLeft.go{
animation-name: rotateInUpLeft;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "rotateInUpLeft"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes rotateInUpLeftGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.rotateInUpLeftGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "rotateInUpLeft" html element to make the animation fire
animation-name: rotateInUpLeftGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated rotateInUpLeft clickExampleTwo rotateInUpLeftGoAway">This appears with animation effect rotateInUpLeft when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: rotateInUpLeftGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated rotateInUpLeft clickExampleThree rotateInUpLeftGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated rotateInUpLeft clickExampleThree rotateInUpLeftGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated rotateInUpLeft clickExampleThree rotateInUpLeftGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "rotateInUpLeft" in this html example:
<div class="animatedParent">
<div class="animated rotateInUpLeft animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes rotateInUpRight {
0% {
transform-origin:right bottom;
transform:rotate(-90deg);
opacity:0;
}
to {
transform-origin:right bottom;
transform:none;
opacity:1;
}
}
.rotateInUpRight, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.rotateInUpRight{
opacity: 0;
}
.rotateInUpRight.go{
animation-name: rotateInUpRight;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="rotateInUpRight go" to the HTML element you wish to animate (a "div" element is used here):
<div class="rotateInUpRight go">This element will rotateInUpRight</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".rotateInUpRightClickTrigger.rotateInUpRight").click(function(){
//use line above for animate on click.
//comment out "rotateInUpRightClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".rotateInUpRightHoverTrigger.rotateInUpRight").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="rotateInUpRight rotateInUpRightClickTrigger">This element will rotateInUpRight when clicked</div>
OR, FOR HOVER:
<div class="rotateInUpRight rotateInUpRightHoverTrigger">This element will rotateInUpRight when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".rotateInUpRightClickTrigger.rotateInUpRight").click(function(){
//use line above for animate on click.
//comment out "rotateInUpRightClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".rotateInUpRightHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="rotateInUpRight rotateInUpRightClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will rotateInUpRight when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="rotateInUpRight rotateInUpRightHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will rotateInUpRight when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated rotateInUpRight" to its CHILD:
<div class="animatedParent">
<div class="animated rotateInUpRight">This Will rotateInUpRight</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated rotateInUpRight">This Will rotateInUpRight Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated rotateInUpRightInDown">This element will rotateInUpRight only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated rotateInUpRight" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated rotateInUpRight" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated rotateInUpRight" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated rotateInUpRight clickExampleOne">This appears with animation effect rotateInUpRight when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated rotateInUpRight clickExampleOne">This element is animated with rotateInUpRight when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "rotateInUpRight" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes rotateInUpRight {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.rotateInUpRight.go{
animation-name: rotateInUpRight;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "rotateInUpRight"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes rotateInUpRightGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.rotateInUpRightGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "rotateInUpRight" html element to make the animation fire
animation-name: rotateInUpRightGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated rotateInUpRight clickExampleTwo rotateInUpRightGoAway">This appears with animation effect rotateInUpRight when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: rotateInUpRightGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated rotateInUpRight clickExampleThree rotateInUpRightGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated rotateInUpRight clickExampleThree rotateInUpRightGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated rotateInUpRight clickExampleThree rotateInUpRightGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "rotateInUpRight" in this html example:
<div class="animatedParent">
<div class="animated rotateInUpRight animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes slideInDown {
0% {
transform:translate3d(0, -100%, 0);
opacity: 0;
}
to {
transform:translateZ(0);
opacity: 1;
}
}
.slideInDown, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.slideInDown{
opacity: 0;
}
.slideInDown.go{
animation-name: slideInDown;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="slideInDown go" to the HTML element you wish to animate (a "div" element is used here):
<div class="slideInDown go">This element will slideInDown</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".slideInDownClickTrigger.slideInDown").click(function(){
//use line above for animate on click.
//comment out "slideInDownClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".slideInDownHoverTrigger.slideInDown").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="slideInDown slideInDownClickTrigger">This element will slideInDown when clicked</div>
OR, FOR HOVER:
<div class="slideInDown slideInDownHoverTrigger">This element will slideInDown when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".slideInDownClickTrigger.slideInDown").click(function(){
//use line above for animate on click.
//comment out "slideInDownClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".slideInDownHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="slideInDown slideInDownClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will slideInDown when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="slideInDown slideInDownHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will slideInDown when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated slideInDown" to its CHILD:
<div class="animatedParent">
<div class="animated slideInDown">This Will slideInDown</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated slideInDown">This Will slideInDown Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated slideInDownInDown">This element will slideInDown only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated slideInDown" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated slideInDown" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated slideInDown" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated slideInDown clickExampleOne">This appears with animation effect slideInDown when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated slideInDown clickExampleOne">This element is animated with slideInDown when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "slideInDown" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes slideInDown {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.slideInDown.go{
animation-name: slideInDown;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "slideInDown"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes slideInDownGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.slideInDownGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "slideInDown" html element to make the animation fire
animation-name: slideInDownGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated slideInDown clickExampleTwo slideInDownGoAway">This appears with animation effect slideInDown when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: slideInDownGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated slideInDown clickExampleThree slideInDownGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated slideInDown clickExampleThree slideInDownGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated slideInDown clickExampleThree slideInDownGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "slideInDown" in this html example:
<div class="animatedParent">
<div class="animated slideInDown animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes slideInUp {
0% {
transform:translate3d(0, 100%, 0);
opacity: 0;
}
to {
transform:translateZ(0);
opacity: 1;
}
}
.slideInUp, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.slideInUp{
opacity: 0;
}
.slideInUp.go{
animation-name: slideInUp;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="slideInUp go" to the HTML element you wish to animate (a "div" element is used here):
<div class="slideInUp go">This element will slideInUp</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".slideInUpClickTrigger.slideInUp").click(function(){
//use line above for animate on click.
//comment out "slideInUpClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".slideInUpHoverTrigger.slideInUp").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="slideInUp slideInUpClickTrigger">This element will slideInUp when clicked</div>
OR, FOR HOVER:
<div class="slideInUp slideInUpHoverTrigger">This element will slideInUp when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".slideInUpClickTrigger.slideInUp").click(function(){
//use line above for animate on click.
//comment out "slideInUpClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".slideInUpHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="slideInUp slideInUpClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will slideInUp when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="slideInUp slideInUpHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will slideInUp when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated slideInUp" to its CHILD:
<div class="animatedParent">
<div class="animated slideInUp">This Will slideInUp</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated slideInUp">This Will slideInUp Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated slideInUpInDown">This element will slideInUp only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated slideInUp" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated slideInUp" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated slideInUp" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated slideInUp clickExampleOne">This appears with animation effect slideInUp when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated slideInUp clickExampleOne">This element is animated with slideInUp when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "slideInUp" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes slideInUp {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.slideInUp.go{
animation-name: slideInUp;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "slideInUp"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes slideInUpGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.slideInUpGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "slideInUp" html element to make the animation fire
animation-name: slideInUpGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated slideInUp clickExampleTwo slideInUpGoAway">This appears with animation effect slideInUp when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: slideInUpGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated slideInUp clickExampleThree slideInUpGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated slideInUp clickExampleThree slideInUpGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated slideInUp clickExampleThree slideInUpGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "slideInUp" in this html example:
<div class="animatedParent">
<div class="animated slideInUp animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes slideInLeft {
0% {
transform:translate3d(-100%, 0, 0);
opacity: 0;
}
to {
transform:translateZ(0);
opacity: 1;
}
}
.slideInLeft, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.slideInLeft{
opacity: 0;
}
.slideInLeft.go{
animation-name: slideInLeft;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="slideInLeft go" to the HTML element you wish to animate (a "div" element is used here):
<div class="slideInLeft go">This element will slideInLeft</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".slideInLeftClickTrigger.slideInLeft").click(function(){
//use line above for animate on click.
//comment out "slideInLeftClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".slideInLeftHoverTrigger.slideInLeft").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="slideInLeft slideInLeftClickTrigger">This element will slideInLeft when clicked</div>
OR, FOR HOVER:
<div class="slideInLeft slideInLeftHoverTrigger">This element will slideInLeft when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".slideInLeftClickTrigger.slideInLeft").click(function(){
//use line above for animate on click.
//comment out "slideInLeftClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".slideInLeftHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="slideInLeft slideInLeftClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will slideInLeft when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="slideInLeft slideInLeftHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will slideInLeft when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated slideInLeft" to its CHILD:
<div class="animatedParent">
<div class="animated slideInLeft">This Will slideInLeft</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated slideInLeft">This Will slideInLeft Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated slideInLeftInDown">This element will slideInLeft only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated slideInLeft" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated slideInLeft" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated slideInLeft" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated slideInLeft clickExampleOne">This appears with animation effect slideInLeft when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated slideInLeft clickExampleOne">This element is animated with slideInLeft when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "slideInLeft" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes slideInLeft {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.slideInLeft.go{
animation-name: slideInLeft;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "slideInLeft"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes slideInLeftGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.slideInLeftGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "slideInLeft" html element to make the animation fire
animation-name: slideInLeftGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated slideInLeft clickExampleTwo slideInLeftGoAway">This appears with animation effect slideInLeft when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: slideInLeftGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated slideInLeft clickExampleThree slideInLeftGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated slideInLeft clickExampleThree slideInLeftGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated slideInLeft clickExampleThree slideInLeftGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "slideInLeft" in this html example:
<div class="animatedParent">
<div class="animated slideInLeft animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes slideInRight {
0% {
transform:translate3d(100%, 0, 0);
opacity: 0;
}
to {
transform:translateZ(0);
opacity: 1;
}
}
.slideInRight, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.slideInRight{
opacity: 0;
}
.slideInRight.go{
animation-name: slideInRight;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="slideInRight go" to the HTML element you wish to animate (a "div" element is used here):
<div class="slideInRight go">This element will slideInRight</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".slideInRightClickTrigger.slideInRight").click(function(){
//use line above for animate on click.
//comment out "slideInRightClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".slideInRightHoverTrigger.slideInRight").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="slideInRight slideInRightClickTrigger">This element will slideInRight when clicked</div>
OR, FOR HOVER:
<div class="slideInRight slideInRightHoverTrigger">This element will slideInRight when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".slideInRightClickTrigger.slideInRight").click(function(){
//use line above for animate on click.
//comment out "slideInRightClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".slideInRightHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="slideInRight slideInRightClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will slideInRight when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="slideInRight slideInRightHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will slideInRight when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated slideInRight" to its CHILD:
<div class="animatedParent">
<div class="animated slideInRight">This Will slideInRight</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated slideInRight">This Will slideInRight Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated slideInRightInDown">This element will slideInRight only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated slideInRight" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated slideInRight" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated slideInRight" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated slideInRight clickExampleOne">This appears with animation effect slideInRight when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated slideInRight clickExampleOne">This element is animated with slideInRight when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "slideInRight" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes slideInRight {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.slideInRight.go{
animation-name: slideInRight;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "slideInRight"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes slideInRightGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.slideInRightGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "slideInRight" html element to make the animation fire
animation-name: slideInRightGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated slideInRight clickExampleTwo slideInRightGoAway">This appears with animation effect slideInRight when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: slideInRightGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated slideInRight clickExampleThree slideInRightGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated slideInRight clickExampleThree slideInRightGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated slideInRight clickExampleThree slideInRightGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "slideInRight" in this html example:
<div class="animatedParent">
<div class="animated slideInRight animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes zoomIn {
0% {
opacity:0;
transform:scale3d(.3, .3, .3);
}
50% {
opacity:1;
}
to{
opacity: 1;
}
}
.zoomIn, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.zoomIn{
opacity: 0;
}
.zoomIn.go{
animation-name: zoomIn;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="zoomIn go" to the HTML element you wish to animate (a "div" element is used here):
<div class="zoomIn go">This element will zoomIn</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".zoomInClickTrigger.zoomIn").click(function(){
//use line above for animate on click.
//comment out "zoomInClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".zoomInHoverTrigger.zoomIn").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="zoomIn zoomInClickTrigger">This element will zoomIn when clicked</div>
OR, FOR HOVER:
<div class="zoomIn zoomInHoverTrigger">This element will zoomIn when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".zoomInClickTrigger.zoomIn").click(function(){
//use line above for animate on click.
//comment out "zoomInClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".zoomInHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="zoomIn zoomInClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will zoomIn when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="zoomIn zoomInHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will zoomIn when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated zoomIn" to its CHILD:
<div class="animatedParent">
<div class="animated zoomIn">This Will zoomIn</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated zoomIn">This Will zoomIn Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated zoomInInDown">This element will zoomIn only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated zoomIn" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated zoomIn" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated zoomIn" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated zoomIn clickExampleOne">This appears with animation effect zoomIn when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated zoomIn clickExampleOne">This element is animated with zoomIn when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "zoomIn" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes zoomIn {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.zoomIn.go{
animation-name: zoomIn;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "zoomIn"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes zoomInGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.zoomInGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "zoomIn" html element to make the animation fire
animation-name: zoomInGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated zoomIn clickExampleTwo zoomInGoAway">This appears with animation effect zoomIn when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: zoomInGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated zoomIn clickExampleThree zoomInGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated zoomIn clickExampleThree zoomInGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated zoomIn clickExampleThree zoomInGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "zoomIn" in this html example:
<div class="animatedParent">
<div class="animated zoomIn animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes zoomInDown {
0% {
opacity:0;
transform:scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
animation-timing-function:cubic-bezier(.55, .055, .675, .19);
}
60% {
opacity:1;
transform:scale3d(.475, .475, .475) translate3d(0, 60px, 0);
animation-timing-function:cubic-bezier(.175, .885, .32, 1);
}
to{
opacity: 1;
}
}
.zoomInDown, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.zoomInDown{
opacity: 0;
}
.zoomInDown.go{
animation-name: zoomInDown;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="zoomInDown go" to the HTML element you wish to animate (a "div" element is used here):
<div class="zoomInDown go">This element will zoomInDown</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".zoomInDownClickTrigger.zoomInDown").click(function(){
//use line above for animate on click.
//comment out "zoomInDownClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".zoomInDownHoverTrigger.zoomInDown").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="zoomInDown zoomInDownClickTrigger">This element will zoomInDown when clicked</div>
OR, FOR HOVER:
<div class="zoomInDown zoomInDownHoverTrigger">This element will zoomInDown when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".zoomInDownClickTrigger.zoomInDown").click(function(){
//use line above for animate on click.
//comment out "zoomInDownClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".zoomInDownHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="zoomInDown zoomInDownClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will zoomInDown when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="zoomInDown zoomInDownHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will zoomInDown when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated zoomInDown" to its CHILD:
<div class="animatedParent">
<div class="animated zoomInDown">This Will zoomInDown</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated zoomInDown">This Will zoomInDown Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated zoomInDownInDown">This element will zoomInDown only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated zoomInDown" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated zoomInDown" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated zoomInDown" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated zoomInDown clickExampleOne">This appears with animation effect zoomInDown when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated zoomInDown clickExampleOne">This element is animated with zoomInDown when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "zoomInDown" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes zoomInDown {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.zoomInDown.go{
animation-name: zoomInDown;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "zoomInDown"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes zoomInDownGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.zoomInDownGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "zoomInDown" html element to make the animation fire
animation-name: zoomInDownGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated zoomInDown clickExampleTwo zoomInDownGoAway">This appears with animation effect zoomInDown when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: zoomInDownGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated zoomInDown clickExampleThree zoomInDownGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated zoomInDown clickExampleThree zoomInDownGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated zoomInDown clickExampleThree zoomInDownGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "zoomInDown" in this html example:
<div class="animatedParent">
<div class="animated zoomInDown animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes zoomInLeft {
0% {
opacity:0;
transform:scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
animation-timing-function:cubic-bezier(.55, .055, .675, .19);
}
60% {
opacity:1;
transform:scale3d(.475, .475, .475) translate3d(10px, 0, 0);
animation-timing-function:cubic-bezier(.175, .885, .32, 1);
}
to{
opacity: 1;
}
}
.zoomInLeft, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.zoomInLeft{
opacity: 0;
}
.zoomInLeft.go{
animation-name: zoomInLeft;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="zoomInLeft go" to the HTML element you wish to animate (a "div" element is used here):
<div class="zoomInLeft go">This element will zoomInLeft</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".zoomInLeftClickTrigger.zoomInLeft").click(function(){
//use line above for animate on click.
//comment out "zoomInLeftClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".zoomInLeftHoverTrigger.zoomInLeft").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="zoomInLeft zoomInLeftClickTrigger">This element will zoomInLeft when clicked</div>
OR, FOR HOVER:
<div class="zoomInLeft zoomInLeftHoverTrigger">This element will zoomInLeft when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".zoomInLeftClickTrigger.zoomInLeft").click(function(){
//use line above for animate on click.
//comment out "zoomInLeftClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".zoomInLeftHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="zoomInLeft zoomInLeftClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will zoomInLeft when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="zoomInLeft zoomInLeftHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will zoomInLeft when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated zoomInLeft" to its CHILD:
<div class="animatedParent">
<div class="animated zoomInLeft">This Will zoomInLeft</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated zoomInLeft">This Will zoomInLeft Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated zoomInLeftInDown">This element will zoomInLeft only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated zoomInLeft" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated zoomInLeft" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated zoomInLeft" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated zoomInLeft clickExampleOne">This appears with animation effect zoomInLeft when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated zoomInLeft clickExampleOne">This element is animated with zoomInLeft when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "zoomInLeft" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes zoomInLeft {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.zoomInLeft.go{
animation-name: zoomInLeft;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "zoomInLeft"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes zoomInLeftGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.zoomInLeftGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "zoomInLeft" html element to make the animation fire
animation-name: zoomInLeftGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated zoomInLeft clickExampleTwo zoomInLeftGoAway">This appears with animation effect zoomInLeft when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: zoomInLeftGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated zoomInLeft clickExampleThree zoomInLeftGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated zoomInLeft clickExampleThree zoomInLeftGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated zoomInLeft clickExampleThree zoomInLeftGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "zoomInLeft" in this html example:
<div class="animatedParent">
<div class="animated zoomInLeft animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes zoomInRight {
0% {
opacity:0;
transform:scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
animation-timing-function:cubic-bezier(.55, .055, .675, .19);
}
60% {
opacity:1;
transform:scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
animation-timing-function:cubic-bezier(.175, .885, .32, 1);
}
to{
opacity: 1;
}
}
.zoomInRight, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.zoomInRight{
opacity: 0;
}
.zoomInRight.go{
animation-name: zoomInRight;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="zoomInRight go" to the HTML element you wish to animate (a "div" element is used here):
<div class="zoomInRight go">This element will zoomInRight</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".zoomInRightClickTrigger.zoomInRight").click(function(){
//use line above for animate on click.
//comment out "zoomInRightClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".zoomInRightHoverTrigger.zoomInRight").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="zoomInRight zoomInRightClickTrigger">This element will zoomInRight when clicked</div>
OR, FOR HOVER:
<div class="zoomInRight zoomInRightHoverTrigger">This element will zoomInRight when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".zoomInRightClickTrigger.zoomInRight").click(function(){
//use line above for animate on click.
//comment out "zoomInRightClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".zoomInRightHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="zoomInRight zoomInRightClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will zoomInRight when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="zoomInRight zoomInRightHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will zoomInRight when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated zoomInRight" to its CHILD:
<div class="animatedParent">
<div class="animated zoomInRight">This Will zoomInRight</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated zoomInRight">This Will zoomInRight Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated zoomInRightInDown">This element will zoomInRight only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated zoomInRight" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated zoomInRight" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated zoomInRight" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated zoomInRight clickExampleOne">This appears with animation effect zoomInRight when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated zoomInRight clickExampleOne">This element is animated with zoomInRight when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "zoomInRight" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes zoomInRight {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.zoomInRight.go{
animation-name: zoomInRight;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "zoomInRight"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes zoomInRightGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.zoomInRightGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "zoomInRight" html element to make the animation fire
animation-name: zoomInRightGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated zoomInRight clickExampleTwo zoomInRightGoAway">This appears with animation effect zoomInRight when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: zoomInRightGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated zoomInRight clickExampleThree zoomInRightGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated zoomInRight clickExampleThree zoomInRightGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated zoomInRight clickExampleThree zoomInRightGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "zoomInRight" in this html example:
<div class="animatedParent">
<div class="animated zoomInRight animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes zoomInUp {
0% {
opacity:0;
transform:scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
animation-timing-function:cubic-bezier(.55, .055, .675, .19);
}
60% {
opacity:1;
transform:scale3d(.475, .475, .475) translate3d(0, -60px, 0);
animation-timing-function:cubic-bezier(.175, .885, .32, 1);
}
to{
opacity: 1;
}
}
.zoomInUp, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.zoomInUp{
opacity: 0;
}
.zoomInUp.go{
animation-name: zoomInUp;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="zoomInUp go" to the HTML element you wish to animate (a "div" element is used here):
<div class="zoomInUp go">This element will zoomInUp</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".zoomInUpClickTrigger.zoomInUp").click(function(){
//use line above for animate on click.
//comment out "zoomInUpClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".zoomInUpHoverTrigger.zoomInUp").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="zoomInUp zoomInUpClickTrigger">This element will zoomInUp when clicked</div>
OR, FOR HOVER:
<div class="zoomInUp zoomInUpHoverTrigger">This element will zoomInUp when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".zoomInUpClickTrigger.zoomInUp").click(function(){
//use line above for animate on click.
//comment out "zoomInUpClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".zoomInUpHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="zoomInUp zoomInUpClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will zoomInUp when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="zoomInUp zoomInUpHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will zoomInUp when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated zoomInUp" to its CHILD:
<div class="animatedParent">
<div class="animated zoomInUp">This Will zoomInUp</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated zoomInUp">This Will zoomInUp Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated zoomInUpInDown">This element will zoomInUp only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated zoomInUp" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated zoomInUp" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated zoomInUp" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated zoomInUp clickExampleOne">This appears with animation effect zoomInUp when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated zoomInUp clickExampleOne">This element is animated with zoomInUp when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "zoomInUp" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes zoomInUp {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.zoomInUp.go{
animation-name: zoomInUp;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "zoomInUp"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes zoomInUpGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.zoomInUpGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "zoomInUp" html element to make the animation fire
animation-name: zoomInUpGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated zoomInUp clickExampleTwo zoomInUpGoAway">This appears with animation effect zoomInUp when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: zoomInUpGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated zoomInUp clickExampleThree zoomInUpGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated zoomInUp clickExampleThree zoomInUpGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated zoomInUp clickExampleThree zoomInUpGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "zoomInUp" in this html example:
<div class="animatedParent">
<div class="animated zoomInUp animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes jackInTheBox {
from {
opacity: 0;
transform: scale(0.1) rotate(30deg);
transform-origin: center bottom;
}
50% {
transform: rotate(-10deg);
}
70% {
transform: rotate(3deg);
}
to {
opacity: 1;
transform: scale(1);
}
}
.jackInTheBox, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.jackInTheBox{
opacity: 0;
}
.jackInTheBox.go{
animation-name: jackInTheBox;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="jackInTheBox go" to the HTML element you wish to animate (a "div" element is used here):
<div class="jackInTheBox go">This element will jackInTheBox</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".jackInTheBoxClickTrigger.jackInTheBox").click(function(){
//use line above for animate on click.
//comment out "jackInTheBoxClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".jackInTheBoxHoverTrigger.jackInTheBox").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="jackInTheBox jackInTheBoxClickTrigger">This element will jackInTheBox when clicked</div>
OR, FOR HOVER:
<div class="jackInTheBox jackInTheBoxHoverTrigger">This element will jackInTheBox when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".jackInTheBoxClickTrigger.jackInTheBox").click(function(){
//use line above for animate on click.
//comment out "jackInTheBoxClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".jackInTheBoxHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="jackInTheBox jackInTheBoxClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will jackInTheBox when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="jackInTheBox jackInTheBoxHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will jackInTheBox when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated jackInTheBox" to its CHILD:
<div class="animatedParent">
<div class="animated jackInTheBox">This Will jackInTheBox</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated jackInTheBox">This Will jackInTheBox Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated jackInTheBoxInDown">This element will jackInTheBox only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated jackInTheBox" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated jackInTheBox" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated jackInTheBox" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated jackInTheBox clickExampleOne">This appears with animation effect jackInTheBox when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated jackInTheBox clickExampleOne">This element is animated with jackInTheBox when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "jackInTheBox" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes jackInTheBox {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.jackInTheBox.go{
animation-name: jackInTheBox;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "jackInTheBox"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes jackInTheBoxGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.jackInTheBoxGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "jackInTheBox" html element to make the animation fire
animation-name: jackInTheBoxGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated jackInTheBox clickExampleTwo jackInTheBoxGoAway">This appears with animation effect jackInTheBox when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: jackInTheBoxGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated jackInTheBox clickExampleThree jackInTheBoxGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated jackInTheBox clickExampleThree jackInTheBoxGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated jackInTheBox clickExampleThree jackInTheBoxGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "jackInTheBox" in this html example:
<div class="animatedParent">
<div class="animated jackInTheBox animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
Add this code to your CSS. It is required for ALL variations of this animation to work:
@keyframes rollIn {
0% {
opacity:0;
transform:translate3d(-100%, 0, 0) rotate(-120deg);
}
to {
opacity:1;
transform:none;
}
}
.rollIn, .animatedParent, .animatedClick{
display: block;/*element must not be inline for animations to work*/
}
.rollIn{
opacity: 0;
}
.rollIn.go{
animation-name: rollIn;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
Note: the "animation-duration:" css property above will take any positive number + "ms" (milli-seconds) or +"s" (seconds) to change the speed at which the animation completes.
Note: you may also add "animation-delay: 1s;" property to the animation call above where "1s" can be replaced with any positive number + "ms" (milli-seconds) or +"s" (seconds). This will delay the animation from beginning (whatever the trigger is e.g. page load, scroll or click) by the number you specify.
Note: you may also add the "animation-iteration: infinite;" property to the animation call above. It defines how many time the animation repeats and takes any positive integer (representing how many times the animation repeats) or "infinite" (for a never ending loop). "alternate infinte" means the animation goes backwards and forwards forever.
Note: the "animation-fill-mode: both;" css property above means that the values of the last css line of the keyframe/animation will be retained on the HTML element being animated even after the animation completes (when the animation goes in the forward direction, with"animation-direction: forward;", which is default). AND the values of the first line of css of the keyframe/animation will be retained on the HTML element being animated if the animation is run in reverse (with "animation-direction: reverse;").
Click here to get the simple html/javascript for Animate on Page Load (limited usefulness) and Animate on Click/Hover (simple version, shorter jQuery than the animate on click found in scrolling animations below.)
1. To fire the animation on page load (limited usefulness):
add class="rollIn go" to the HTML element you wish to animate (a "div" element is used here):
<div class="rollIn go">This element will rollIn</div>
2. To fire the animation on click or hover:
a) When the trigger element and the element you wish to animate on click/hover are the SAME:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".rollInClickTrigger.rollIn").click(function(){
//use line above for animate on click.
//comment out "rollInClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".rollInHoverTrigger.rollIn").hover(function(){
jQuery(this).toggleClass("go");
});
});
For the HTML element you wish to animate on click/hover (a "div" element is used here):
FOR CLICK:
<div class="rollIn rollInClickTrigger">This element will rollIn when clicked</div>
OR, FOR HOVER:
<div class="rollIn rollInHoverTrigger">This element will rollIn when hovered on</div>
b) When the trigger element and the element you wish to animate on click/hover are NOT the same AND the element to be animated directly follows the trigger element in the DOM and is NOT A CHILD OF THE TRIGGER ELEMENT:
Add the following Jquery either in script tags on the page or in a .js file: (Use the "document ready function" only if you don't already have one you can put the code into. Also make sure a link to the Jquery library is included on your site or page.)
jQuery( document ).ready(function() {
jQuery(".rollInClickTrigger.rollIn").click(function(){
//use line above for animate on click.
//comment out "rollInClickTrigger" and then uncomment and use line below for animate on hover
// jQuery(".rollInHoverTrigger").hover(function(){
jQuery(this).next().toggleClass("go");
});
});
For the HTML ("div" elements are used here):
FOR CLICK:
<div class="rollIn rollInClickTrigger">A click on this element will trigger the animation on the element below.</div>
<div>This element will rollIn when the element directly above it is clicked</div>
OR FOR HOVER:
<div class="rollIn rollInHoverTrigger">Hovering on this element will trigger the animation on the
element below.</div>
<div >This element will rollIn when the element directly above it is hovered on</div>
Click here to get Animate On Scroll (Plus Animate on Click) HTML and Jquery. It's Awesome
1) FOR BASIC ON SCROLL ANIMATIONS: For the HTML element you wish to animate on scroll (a "div" element is used here) add class="amimatedParent" to a PARENT HTML element, then add class="animated rollIn" to its CHILD:
<div class="animatedParent">
<div class="animated rollIn">This Will rollIn</div>
</div>
2) ANIMATE AN ELEMENT ONLY ONCE (per page load) Right now, all of our animations animate every time they are scrolled over which can be annoying for the user. To make an element animate only once on the first scroll over just add class="animateOnce" to THE PARENT of HTML element that actually animates (no modifications to the CSS is needed as Jquery handles this):
<div class="animatedParent animateOnce">
<div class="animated rollIn">This Will rollIn Once Per Page Load</div>
</div>
3) CHANGING THE ANIMATION OFFSET (Offset means changing where the element to be animated is in relation to the window before it will fire): Default behaviour is for all animations to fire when the animation reaches the bottom of the window. We can change this by adding a new data-appear-top-offset="-300" attribute on the parent element . You can replace "-300" with any numeral (representing pixels).
<div class="animatedParent" data-appear-top-offset="-300">
<div class="animated rollInInDown">This element will rollIn only when it is 300 pixels above bottom of the window </div>
</div>
Note: using negative numerals in the "data-appear-top-offset" will move the animation firing point up the page (the user has to scroll more to make the animation fire.) Making this number very small e.g. "-3000" can cause the animation never to work at all or work at a place that is off-screen.
Note: using positive numbers in the "data-appear-top-offset" will move the animation firing point down the page (the user has to scroll less to make the animation fire.). This will make the animation fire BEFORE the animation element is within the window, causing (at least the first part of) the animation to not be seen. It could be useful, but better to use a delay instead maybe.
4) SEQUENCING A GROUP OF ANIMATIONS TO FIRE ONE AFTER ANOTHER: This is a great feature!
4a) Just add data-sequence="500" into the PARENT of the child elements to be animated. (Note: the "500" can be replaced with any positive number, representing milliseconds, and will set the animation delay between all of this element's animated children. In this example, the delay value starts at 0 times 500 for the first child, 1 times 500 for the second child, 2 x 500 for the third child, and so on.
4b) Then, add data-id="X" to each CHILD element you wish to animate (replace "X" in each child element with any positive integer IN ASCENDING ORDER to generate the firing sequence). Animation names for each child need not be the same, and there is no limit to the number of children (but each child must have a unique id number in ascending sequence). See A Default Animation Demo of the Sequencing on scroll animation. A copyable code example:
<div class="animatedParent" data-sequence="500">
<div class="animated rollIn" data-id="1">I am the first chlld and am not delayed</div>
<div class="animated rollIn" data-id="2">I am the second chlld and I am delayed by 500ms </div>
<div class="animated rollIn" data-id="3">I am the third chlld and I am delayed 1000ms</div>
</div>
5) ANIMATE ON CLICK (not on scroll): Animate on click elements differ slightly from the animate on scroll elements above. Also note that the Animate On Click Animations only have the greatest usefulness when applied to animations that enter and exit the page. Note: you may wish to ensure styles similar to these are put on the "animatedClick" element (below) so that the button shows up properly:
.animatedClick{
cursor: pointer;
background: goldenrod;
padding: 10px;
text-align: center;
color: white;
}
5a) Basic Animate on Click. See A Default Animation Demo of the Basic Animate on Click. This is the HTML code you need:
<div class="animatedClick" data-target="clickExampleOne">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated rollIn clickExampleOne">This appears with animation effect rollIn when the element "Show/Hide" is clicked for the first time, and disappears without animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5b) Basic Animate on Click With Changing Trigger Text. See A Default Animation Demo of the Basic Animate on Click With Changing Trigger Text.
If you are using on click animations, you'll probably want the trigger text to change from, say "SHOW" to "HIDE" depending on whether the button is clicked/clicked for the second time. This code can be added to any of the on click animation variations.
i) For the HTML, simply add textBeforeClick to the animatedClick class below. Remove any text you have inside the click trigger because we add that content using CSS (see below), so you have:
<div class="animatedClick textBeforeClick" data-target="clickExampleOne"></div>
<div class="animated rollIn clickExampleOne">This element is animated with rollIn when its Trigger parent is clicked for the first time, and disappears without animation effects when the parent Trigger element is clicked for a second time.</div>
Note: the "data-target" value of clickExampleOne on the first element and the class value of clickExampleOne on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
ii) Add this to your css:
@keyframes buttonTriggerTextIn {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
@keyframes buttonTriggerTextOut {
0% {
opacity: 0;;
}
to {
opacity: 1;
}
}
.animatedClick.textBeforeClick:after{
content: 'SHOW';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER BEFORE IT'S CLICKED AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextOut;
animation-duration: 2s;
animation-fill-mode: both;
}
.animatedClick.textAfterClick:after{
content: 'HIDE';
*/ ABOVE LINE PROVIDES THE TEXT CONTENT FOR THE TRIGGER ON THE SECOND CLICK AND MAY BE CHANGED TO ANYTHING*/
animation-name: buttonTriggerTextIn;
animation-duration: 2s;
animation-fill-mode: both;
}
iii) Add this Jquery either to the bottom of the page in script tags or to your included .js file. It does not need to be in a "document ready" wrapper. (be sure to have linked to the JQuery library in the head):
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT BEGINS
jQuery(".animatedClick.textBeforeClick").click(function(){
jQuery(this).toggleClass("textBeforeClick textAfterClick");
//on first click, remove class "textBeforeClick" (which is already on the element and gives content "SHOW" via css.) and add class "textAFterClick", which CSS gives "HIDE" content to. The next click adds "textBeforeClick" back in again and loops.
});
//SCRIPT FOR TOGGLE ANIMATE ON CLICK TRIGGER TEXT ENDS
Note: If your page or site uses multiple on click animations whose Triggers each need unique text, you'll need to change the names of the "textBefore" and "textAfterClick" classes in the CSS (and adjust that CSS's different content: values), JQuery and HTML.
5c) Basic Animate on Click and Animate Out on Second Click. See A Default Animation Demo of the Basic Animate on Click and Animate Out on Second Click.
NOTE: Unfortunately, getting an animation to toggle forward/reverse on click/second click is annoyingly complex. This is because CSS standards do NOT allow us to run the SAME animation first in a forward direction on the first click and then in a reverse direction on a second click (at least not without crazy javascript). The simplest way around this is to use a COMPLETELY NEW SET OF KEYFRAMES & CALLING CLASSES FOR THE ANIMATE OUT ON SECOND CLICK. So, for the css:
i) Copy the CSS required for all animations a the top of this demo as normal. (This is used for the first click or "forward" animation).
ii) From this demo's copyable code, copy ANY animation's keyframe CSS code AND its calling code and paste it into your CSS (we use the same animation as the forward one, that is "rollIn" in this example). This will be used for the animate out animation on second click (for e.g.:
@keyframes rollIn {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.rollIn.go{
animation-name: rollIn;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iii) Modify the code you just copied from step ii) above. First append "GoAway" to the key frame name. Then append "GoAway" to the first calling class (in this case "rollIn"). Then append "Away" to the ".go" second calling class. Finally, append "GoAway" to the "animation-name" CSS property. (Basically, we're creating a new animation name and calling it). Paste the modified code into your CSS file. It should now look like this:
@keyframes rollInGoAway {
/*some keyframe code here from whichever animation you chose.*/
/*note: you don't need to reverse the animation here, we'll do that when we call the animation*/
}
.rollInGoAway.goAway{
note that Jquery automatically appends the class .goAway to the "rollIn" html element to make the animation fire
animation-name: rollInGoAway;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}
iv) Add in this HTML code:
<div class="animatedClick" data-target="clickExampleTwo">Show/Hide (Toggles the animation put on the class below whose class matches the "data-target" atttribute name of this element)</div>
<div class="animated rollIn clickExampleTwo rollInGoAway">This appears with animation effect rollIn when the element "Show/Hide" is clicked for the first time, and ALSO DISAPPEARS WITH animation effects when the "Show/Hide" element is clicked for a second time.</div>
Note: rollInGoAwayIs the class name used for the animate out on second click animation and so may need to be replaced by the "animation-name:" you used in the modified css code (for the animate out) above.
Note: the "data-target" value of clickExampleTwo on the first element and the class value of clickExampleTwo on the second element can be any name you like but both iternations must match. Also, if you are doing more than one instance of an Animate on Click on a given page, EACH ANIMATION MUST HAVE A UNIQUE MATCHING VALUE FOR "data-target" and the class definition, otherwise all the click animations on the page will fire on a single click.
5c) Sequential Animations on Click and Sequential Animations Out on Second Click. See A Default Animation Demo of Sequential Animations on Click and Sequential Animations Out on Second Click.
Note:
i) We add an element with a class of animatedClick and a data-target= attribute as in 5a) above (see 5a) above for more instructions)
ii) The SEQUENCED ANIMATED HTML ELEMENTS ARE NOT PARENTS OF ANY ANY OTHER HTML ELEMENT, unlike "Sequencing on Scroll" in 4 above. Otherwise, we add a data-sequence= attribute to an element and various classes to other elements with sequential data-id= attributes. See 4 above for more detailed instructions.
iii) I have not included instructions for making the element animate out on the second click because the instructions are too long to repeat. Please see 5b) above.
Here is the HTML you'll need:
<div class="animatedClick" data-target="clickExampleThree" data-sequence='500'>Show/Hide (I don't animate myself, but click me and...)</div>
<div class="animated rollIn clickExampleThree rollInGoAway" data-id='1'>I'm 1st on click above </div>
<div class="animated rollIn clickExampleThree rollInGoAway" data-id='2'>I'm 2nd on click above</div>
<div class="animated rollIn clickExampleThree rollInGoAway" data-id='3'>I'm 3rd on click above</div>
5e) On-Scroll Animating the TRIGGER element for any On Click AnimationSee A Default Animation Demo of On-Scroll Animating the TRIGGER element for any On Click Animation.
Just wrap the animatedClickelement in another HTML element with the class animatedParent on it. Don't forget to add animated class to child along with the name of the animation you want to put on it. We use "rollIn" in this html example:
<div class="animatedParent">
<div class="animated rollIn animatedClick" data-target="clickExampleFour" data-sequence='500'>This trigger animates too</div>
</div>
//more code for various on click animations would be here
@keyframes rollIn {
0% {
opacity:0;
transform:translate3d(-100%, 0, 0) rotate(-120deg);
}
to {
opacity:1;
transform:none;
}
}
.rollIn.go{
animation-name: rollIn;
transform-origin: center bottom;
animation-duration: 1s;
animation-fill-mode: both;
position: relative;
}