Animation delay with html/css/js animation

Animation delay with html/css/js animation - javascript

I have an animation which makes text change by sliding vertically (similar to the one on groupebouchersports.com's homepage). The problem is, I want the text to stop longer (delay) before sliding out, but I cant seem to find how to do it. Here is my html / css / javascript code. Thanks in advance.
document.addEventListener('DOMContentLoaded', initTextAnimSlider);
function initTextAnimSlider() {
var textAnimHolder = document.querySelector('[data-words]');
var textAnimItem = document.querySelectorAll('.text-anim-item');
var textAnimItems = document.querySelector('.text-anim-items');
var animIn = 'anim-in';
var animOut = 'anim-out';
var lineActiveClass = 'line-active';
var animNextItem = null;
var animPrevItem = null;
var animFirstLoad = false;
var animDuration = textAnimHolder.getAttribute('data-delay');
var animCounter = 0;
var setTimeAnim;
var setTimeAnimResize;
animFunc();
getHolderWidth();
function animFunc() {
clearTimeout(setTimeAnim);
setTimeAnim = setTimeout(function () {
animFirstLoad = true;
if (animPrevItem !== null) {
animPrevItem.classList.add(animOut);
}
animNextItem = textAnimItems.children[animCounter];
animNextItem.classList.remove(animOut);
animNextItem.classList.add(animIn);
animPrevItem = animNextItem;
if (animCounter === textAnimItem.length - 1) {
animCounter = 0;
} else {
animCounter++;
}
animFunc();
}, animFirstLoad ? animDuration : 100);
}
function getHolderWidth() {
var itemsWidth = [];
for(var i =0; i < textAnimItem.length; i++) {
itemsWidth.push(textAnimItem[i].clientWidth);
console.log(textAnimItem[i].clientWidth);
}
textAnimHolder.style.width = '450px';
}
function resizeHandler() {
clearTimeout(setTimeAnim);
clearTimeout(setTimeAnimResize);
getHolderWidth();
setTimeAnimResize = setTimeout(function() {
animFunc();
}, 50);
}
window.addEventListener('resize', resizeHandler);
window.addEventListener('orientationchange', resizeHandler);
}
.text-anim-item {
white-space: nowrap;
position: absolute;
left: 0;
right:auto;
bottom: 0;
-webkit-transform: translate3d(0, -120%, 0);
transform: translate3d(0, -120%, 0);
}
.text-anim-item.anim-in {
-webkit-transform: translate3d(0, -120%, 0);
transform: translate3d(0, -120%, 0);
-webkit-animation: textAnimIn .6s .3s forwards;
animation: textAnimIn .6s .3s forwards;
}
.text-anim-item.anim-out {
-webkit-transform: translate3d(0, 0%, 0);
transform: translate3d(0, 0%, 0);
-webkit-animation: textAnimOut .6s .3s forwards;
animation: textAnimOut .6s .3s forwards;
}
#-webkit-keyframes textAnimIn {
0% {
-webkit-transform: translate3d(0, -120%, 0);
transform: translate3d(0, -120%, 0);
}
100% {
-webkit-transform: translate3d(0, 0%, 0);
transform: translate3d(0, 0%, 0);
}
}
#keyframes textAnimIn {
0% {
-webkit-transform: translate3d(0, -120%, 0);
transform: translate3d(0, -120%, 0);
}
100% {
-webkit-transform: translate3d(0, 0%, 0);
transform: translate3d(0, 0%, 0);
}
}
#-webkit-keyframes textAnimOut {
0% {
-webkit-transform: translate3d(0, 0%, 0);
transform: translate3d(0, 0%, 0);
}
100% {
-webkit-transform: translate3d(0, 120%, 0);
transform: translate3d(0, 120%, 0);
}
}
#keyframes textAnimOut {
0% {
-webkit-transform: translate3d(0, 0%, 0);
transform: translate3d(0, 0%, 0);
}
100% {
-webkit-transform: translate3d(0, 120%, 0);
transform: translate3d(0, 120%, 0);
}
}
#-webkit-keyframes textAnimInCenter {
0% {
-webkit-transform: translate3d(-50%, -120%, 0);
transform: translate3d(-50%, -120%, 0);
}
100% {
-webkit-transform: translate3d(-50%, 10%, 0);
transform: translate3d(-50%, 10%, 0);
}
}
#keyframes textAnimInCenter {
0% {
-webkit-transform: translate3d(-50%, -120%, 0);
transform: translate3d(-50%, -120%, 0);
}
100% {
-webkit-transform: translate3d(-50%, 10%, 0);
transform: translate3d(-50%, 10%, 0);
}
}
#-webkit-keyframes textAnimOutCenter {
0% {
-webkit-transform: translate3d(-50%, 0%, 0);
transform: translate3d(-50%, 0%, 0);
}
100% {
-webkit-transform: translate3d(-50%, 120%, 0);
transform: translate3d(-50%, 120%, 0);
}
}
#keyframes textAnimOutCenter {
0% {
-webkit-transform: translate3d(-50%, 0%, 0);
transform: translate3d(-50%, 0%, 0);
}
100% {
-webkit-transform: translate3d(-50%, 120%, 0);
transform: translate3d(-50%, 120%, 0);
}
}
<section class="bg-img intro-module">
<div class="block-center">
<div class="block-caption py-4 text-center text-md-left">
<h1 style="text-align:left;" class="display-1 mb-0">
<u class="mb-0" data-delay="1200" data-words>
<span style="text-align:left;" class="text-anim-items">
<span class="text-anim-item"><span>text</span></span>
<span class="text-anim-item"><span>text 2</span></span>
<span class="text-anim-item"><span>text 3</span></span>
</span>
<span class="anim-line"></span>
</u>
<br>
<span>lorem</span>
<br>
<span>ipsum</span>
<br>
<br>
<span><p>caption text</p></span>
</h1>
</div>
</div>
</section>

Adding a snippet to explain what I was referring to in the comments. The block id is only to have something for the text to hide behind as I think your intention is to have them scroll off screen.
span {
position: absolute;
left: 0;
right:auto;
top: 0;
font-size: 15pt;
}
#block {
position:absolute;
top: 100px;
left:0;
width: 300px;
height: 300px;
background: white;
}
#one {
animation: move 6s linear infinite;
color: red;
}
#two {
animation: move 6s linear -2s infinite;
color: blue;
}
#three {
animation: move 6s linear -4s infinite;
color: green;
}
#keyframes move {
0% {transform: translate(0, 0)}
33% {transform: translate(0, 0)}
66% {transform: translate(0, 200px)}
100% {transform: translate(0, 200px)}
}
<span id="one">Hello World</span>
<span id="two">World Hello</span>
<span id="three">No No No</span>
<div id="block"></div>

Related

Fading element in the center of window by scrolling

I use a script in which elements fade in from the left and right as soon as the respective element has been scrolled completely into view. The problem is, the fade-in remains until the element has completely disappeared from the field of view. I try to implement it in such a way that it fades out as soon as it is no longer completely in sight. Otherwise, all elements are shown at the same time when scrolling.
function Utils() {}
Utils.prototype = {
constructor: Utils,
isElementInView: function(element, fullyInView) {
var pageTop = $(window).scrollTop();
var pageBottom = pageTop + $(window).height();
var elementTop = $(element).offset().top;
var elementBottom = elementTop + $(element).height();
if (fullyInView === true) {
return ((pageTop < elementTop) && (pageBottom > elementBottom));
} else {
return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
}
}
};
var Utils = new Utils();
$(window).on('load', addFadeIn());
$(window).scroll(function() {
addFadeIn(true);
});
function addFadeIn(repeat) {
var classToFadeIn = ".will-fadeIn";
$(classToFadeIn).each(function(index) {
var isElementInView = Utils.isElementInView($(this), false);
if (isElementInView) {
if (!($(this).hasClass('fadeInRight')) && !($(this).hasClass('fadeInLeft'))) {
if (index % 2 == 0) $(this).addClass('fadeInRight');
else $(this).addClass('fadeInLeft');
}
} else if (repeat) {
$(this).removeClass('fadeInRight');
$(this).removeClass('fadeInLeft');
}
});
}
#locations-mobile {
height: auto;
display: block;
}
#loc1, #loc2, #loc3, #loc4 {
height: 300px;
background-size: cover;
}
.locimg {
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.loc {
cursor: pointer;
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
overflow: hidden;
text-align: center;
}
.loc .fadedbox, .loc-selected {
background-color: #202020;
position: absolute;
top: 0;
left: 0;
color: #fff;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
width: 100%;
height: 100%;
}
.loc:hover .fadedbox, .loc-selected {
opacity: 0.8;
}
.loc .text, .loc .text a, .will-fadeIn .text, .will-fadeIn .text p, .will-fadeIn .text p a {
top: 0%;
left: 0%;
position: relative;
text-align: center;
color: #fff;
text-decoration: none;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
transform: translateY(50px);
-webkit-transform: translateY(50px);
}
.loc .text, .loc .text a, .will-fadeIn .text, .will-fadeIn .text p, .will-fadeIn .text p a {
transform: translateY(30px);
-webkit-transform: translateY(30px);
}
.loc .title {
font-size: 2.5em;
text-align: center;
text-transform: uppercase;
opacity: 0;
transition-delay: 0.2s;
transition-duration: 0.3s;
}
.will-fadeIn .text .title a {
color: #fff;
font-size: 2.5em;
}
#loc1 {
grid-area: 1 / 1 / 2 / 2;
background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)
}
#loc2 {
grid-area: 1 / 2 / 2 / 3;
background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)
}
#loc3 {
grid-area: 1 / 3 / 2 / 4;
background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)
}
#loc4 {
grid-area: 1 / 4 / 2 / 5;
background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)
}
.doing {
transform: rotate(-35deg);
display: block;
position: absolute;
top: 0;
left: -90px;
margin-top: 25px;
text-align: center;
width: 300px;
color: #fff;
}
.will-fadeIn {
display: block;
width: 100%;
max-width: 640px;
margin: 0px auto;
height: 100%;
background-color: #202020;
}
.fadeInRight {
-webkit-animation: fadeInRight .5s ease .4s both;
-moz-animation: fadeInRight .5s ease .4s both;
-ms-animation: fadeInRight .5s ease .4s both;
-o-animation: fadeInRight .5s ease .4s both;
animation: fadeInRight .5s ease .4s both;
}
#media (prefers-reduced-motion) {
.fadeInRight .animated {
-webkit-animation: unset !important;
animation: unset !important;
-webkit-transition: none !important;
transition: none !important;
}
}
.fadeInLeft {
-webkit-animation: fadeInLeft .5s ease .4s both;
-moz-animation: fadeInLeft .5s ease .4s both;
-ms-animation: fadeInLeft .5s ease .4s both;
-o-animation: fadeInLeft .5s ease .4s both;
animation: fadeInLeft .5s ease .4s both;
}
#media (prefers-reduced-motion) {
.fadeInLeft .animated {
-webkit-animation: unset !important;
animation: unset !important;
-webkit-transition: none !important;
transition: none !important;
}
}
#-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-moz-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-ms-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-o-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-moz-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-ms-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-o-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="locations-mobile">
<div id="loc1">
<div class="fadedbox will-fadeIn">
<div class="text">
<p class="title">#</p>
<p>
<a href="#" target="_blank">
<i class="fas fa-map-marker-alt"></i>#<br /> #
</a>
</p>
<p><i class="fas fa-phone"></i>#</p>
</div>
</div>
</div>
<div id="loc2">
<div class="fadedbox will-fadeIn">
<div class="text">
<p class="title">#</p>
<p>
<a href="#" target="_blank">
<i class="fas fa-map-marker-alt"></i>#<br /> #
</a>
</p>
<p><i class="fas fa-phone"></i>#</p>
</div>
</div>
</div>
<div id="loc3">
<div class="fadedbox will-fadeIn">
<div class="text">
<p class="title">#</p>
<p>
<a href="#" target="_blank">
<i class="fas fa-map-marker-alt"></i>#<br /> #
</a>
</p>
<p><i class="fas fa-phone"></i>#</p>
</div>
</div>
</div>
<div id="loc4">
<div class="fadedbox will-fadeIn">
<div class="text">
<p class="title">#</p>
<p>
<a href="#" target="_blank">
<i class="fas fa-map-marker-alt"></i>#<br /> #
</a>
</p>
<p><i class="fas fa-phone"></i>#</p>
</div>
</div>
</div>
</section>

Use the deltaY attribute in the wheel event to detect scrolling up vs down.
window.onwheel = function(event) {
let div = document.querySelector('div');
let opacity = getComputedStyle(div).opacity;
(event.deltaY <= 0) ? (div.style.opacity = +opacity-0.1) : (div.style.opacity = +opacity+0.1);
document.querySelector('p').innerHTML = 'deltaY: ' + event.deltaY;
};
div {
position: absolute;
top: 50%;
left: 50%;
height: 10em;
width: 10em;
transform: translate(-50%,-50%);
border-radius: 50%;
background: black;
transition: opacity 0.2s;
}
<div></div>
<p>deltaY: 0</p>
To try the example above, enter the full page mode for the snippet. Otherwise it will work, but still scroll on the page causing a not ideal effect. Scroll up for a higher opacity and scroll down for a lower opacity.

You can use Animate On Scroll Library
Its easy to use and its more efficient, hope this helped you

I've updated your code, will need some major cleanup but it demonstrates the solution: (i've changed the #loc containers height to 150px to make my solution reproducable in the small 'run code' preview here)
function Utils() {}
Utils.prototype = {
constructor: Utils,
isElementInView: function(element, fullyInView) {
var pageTop = $(window).scrollTop();
var pageBottom = pageTop + $(window).height();
var elementTop = $(element).offset().top;
var elementBottom = elementTop + $(element).height();
if (fullyInView === true) {
return ((pageTop < elementTop) && (pageBottom > elementBottom));
} else {
return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
}
}
};
var Utils = new Utils();
$(window).on('load', addFadeIn());
$(window).scroll(function() {
addFadeIn(true);
});
function addFadeIn(repeat) {
var classToFadeIn = ".will-fadeIn";
$(classToFadeIn).each(function(index) {
var isElementInView = Utils.isElementInView($(this), true);
if (isElementInView) {
if (!($(this).hasClass('fadeInRight')) && !($(this).hasClass('fadeInLeft'))) {
if (index % 2 == 0) $(this).addClass('fadeInRight');
else $(this).addClass('fadeInLeft');
}
} else if (repeat) {
$(this).removeClass('fadeInRight');
$(this).removeClass('fadeInLeft');
}
});
}
#locations-mobile {
height: auto;
display: block;
}
#loc1, #loc2, #loc3, #loc4 {
height: 150px;
background-size: cover;
}
.locimg {
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.loc {
cursor: pointer;
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
overflow: hidden;
text-align: center;
}
.fadedbox{
transition:all 1s;
transform:translateX(-100%);
}
#locations-mobile>div:nth-child(even)>.fadedbox{
transform:translateX(100%);
}
.loc .fadedbox, .loc-selected {
background-color: #202020;
position: absolute;
top: 0;
left: 0;
color: #fff;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
width: 100%;
height: 100%;
}
.loc:hover .fadedbox, .loc-selected {
opacity: 0.8;
}
.loc .text, .loc .text a, .will-fadeIn .text, .will-fadeIn .text p, .will-fadeIn .text p a {
top: 0%;
left: 0%;
position: relative;
text-align: center;
color: #fff;
text-decoration: none;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
transform: translateY(50px);
-webkit-transform: translateY(50px);
}
.loc .text, .loc .text a, .will-fadeIn .text, .will-fadeIn .text p, .will-fadeIn .text p a {
transform: translateY(30px);
-webkit-transform: translateY(30px);
}
.loc .title {
font-size: 2.5em;
text-align: center;
text-transform: uppercase;
opacity: 0;
transition-delay: 0.2s;
transition-duration: 0.3s;
}
.will-fadeIn .text .title a {
color: #fff;
font-size: 2.5em;
}
#loc1 {
grid-area: 1 / 1 / 2 / 2;
background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)
}
#loc2 {
grid-area: 1 / 2 / 2 / 3;
background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)
}
#loc3 {
grid-area: 1 / 3 / 2 / 4;
background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)
}
#loc4 {
grid-area: 1 / 4 / 2 / 5;
background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260)
}
.doing {
transform: rotate(-35deg);
display: block;
position: absolute;
top: 0;
left: -90px;
margin-top: 25px;
text-align: center;
width: 300px;
color: #fff;
}
.will-fadeIn {
display: block;
width: 100%;
max-width: 640px;
margin: 0px auto;
height: 100%;
background-color: #202020;
}
.old_fadeInRight {
-webkit-animation: fadeInRight .5s ease .4s both;
-moz-animation: fadeInRight .5s ease .4s both;
-ms-animation: fadeInRight .5s ease .4s both;
-o-animation: fadeInRight .5s ease .4s both;
animation: fadeInRight .5s ease .4s both;
}
.fadeInRight{
transform:translateX(0) !important;
}
#media (prefers-reduced-motion) {
.fadeInRight .animated {
-webkit-animation: unset !important;
animation: unset !important;
-webkit-transition: none !important;
transition: none !important;
}
}
.old_fadeInLeft {
-webkit-animation: fadeInLeft .5s ease .4s both;
-moz-animation: fadeInLeft .5s ease .4s both;
-ms-animation: fadeInLeft .5s ease .4s both;
-o-animation: fadeInLeft .5s ease .4s both;
animation: fadeInLeft .5s ease .4s both;
}
.fadeInLeft{
transform:translateX(0) !important;
}
#media (prefers-reduced-motion) {
.fadeInLeft .animated {
-webkit-animation: unset !important;
animation: unset !important;
-webkit-transition: none !important;
transition: none !important;
}
}
#-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-moz-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-ms-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-o-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-moz-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-ms-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-o-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: .8;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="locations-mobile">
<div id="loc1">
<div class="fadedbox will-fadeIn">
<div class="text">
<p class="title">#</p>
<p>
<a href="#" target="_blank">
<i class="fas fa-map-marker-alt"></i>#<br /> #
</a>
</p>
<p><i class="fas fa-phone"></i>#</p>
</div>
</div>
</div>
<div id="loc2">
<div class="fadedbox will-fadeIn">
<div class="text">
<p class="title">#</p>
<p>
<a href="#" target="_blank">
<i class="fas fa-map-marker-alt"></i>#<br /> #
</a>
</p>
<p><i class="fas fa-phone"></i>#</p>
</div>
</div>
</div>
<div id="loc3">
<div class="fadedbox will-fadeIn">
<div class="text">
<p class="title">#</p>
<p>
<a href="#" target="_blank">
<i class="fas fa-map-marker-alt"></i>#<br /> #
</a>
</p>
<p><i class="fas fa-phone"></i>#</p>
</div>
</div>
</div>
<div id="loc4">
<div class="fadedbox will-fadeIn">
<div class="text">
<p class="title">#</p>
<p>
<a href="#" target="_blank">
<i class="fas fa-map-marker-alt"></i>#<br /> #
</a>
</p>
<p><i class="fas fa-phone"></i>#</p>
</div>
</div>
</div>
</section>
Most relevant change is switching from css animations to css transitions, making it easier to fade elements in once the are fully in view, and out once they leave.
Come back to me in case you need further explanation here.

Why does the last frame show up before first in animation?

I was trying to make a "bounce-in" effect where the circle isn't there before the animation, then the animation is executed on scroll, and the circle remains there after the animation is over. But for some reason it's there even before the animation, then disappears (since first frame opacity is 0) then appears again. I'm not sure what I'm doing wrong.
if (browser.canUse('transition')) {
var on = function() {
// Circles
$('.circle')
.scrollex({
mode: 'bottom',
delay: 50,
initialize: function() {
$(this).addClass('bounceIn');
},
terminate: function() {
$(this).removeClass('bounceIn');
},
enter: function() {
$(this).removeClass('bounceIn');
},
leave: function() {
$(this).addClass('bounceIn');
}
});
.circle {
position: absolute;
border-radius: 50%;
}
.circle.circle1 {
top: 80px;
left: 120px;
width: 100px;
height: 100px;
background: white;
opacity: 0;
}
/* ----------- BOUNCE IN ------------*/
#-webkit-keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.315, 0.71, 0.455, 1);
animation-timing-function: cubic-bezier(0.315, 0.71, 0.455, 1);
}
0% {
opacity: 0;
-webkit-transform: scale(0.3);
transform: scale(0.3);
}
20% {
-webkit-transform: scale(1.03);
transform: scale(1.03);
}
40% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
60% {
opacity: 1;
-webkit-transform: scale(1.03);
transform: scale(1.03);
}
80% {
-webkit-transform: scale(0.97);
transform: scale(0.97);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.315, 0.71, 0.455, 1);
animation-timing-function: cubic-bezier(0.315, 0.71, 0.455, 1);
}
0% {
opacity: 0;
-webkit-transform: scale(0.3);
transform: scale(0.3);
}
20% {
-webkit-transform: scale(1.03);
transform: scale(1.03);
}
40% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
60% {
opacity: 1;
-webkit-transform: scale(1.03);
transform: scale(1.03);
}
80% {
-webkit-transform: scale(0.97);
transform: scale(0.97);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.bounceIn {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
<div class="circle circle1"></div>

Keyframe on modal interfering with full screen video

So I'm using a modal that has a video player inside it. Everything works fine, except when I go full screen, the video seems to show up behind every other element.
Here's the video within the modal:
And here's the page after making the video full screen:
I went through and changed everything in the modal's css file until I found a version that works. Turns out it's the entering keyframe animation:
#keyframes rodal-fade-enter {
0% {
opacity: 0;
}
}
.rodal-fade-enter {
animation: rodal-fade-enter both ease-in;
}
When I remove this animation, full screen works fine. However, the entering animation looks super choppy. Is there an alternate animation I can use that does the same thing as fading in, but doesn't mess with the full screen video?
I'm not even sure why this animation messes with full screen in the first place, so any explanations are incredibly welcome.
The modal I'm using is https://github.com/chenjiahan/rodal.
Here's a snippet to replicate the issue:
/* =============================== Rodal v1.6.1 https://chenjiahan.github.com/rodal =============================== */
// env
const inBrowser = typeof window !== 'undefined';
const UA = inBrowser && window.navigator.userAgent.toLowerCase();
const isIE9 = UA && UA.indexOf('msie 9.0') > 0;
const Dialog = props => {
const animation = (
props.animationType === 'enter'
? props.enterAnimation
: props.leaveAnimation) || props.animation;
const className = `rodal-dialog rodal-${animation}-${props.animationType}`;
const CloseButton = props.showCloseButton
? <span className="rodal-close" onClick={props.onClose}/>
: null;
const {width, height, measure, duration, customStyles} = props;
const style = {
width: width + measure,
height: height + measure,
animationDuration: duration + 'ms',
WebkitAnimationDuration: duration + 'ms'
};
const mergedStyles = {
...style,
...customStyles
};
return (<div style={mergedStyles} className={className}>
{props.children}
{CloseButton}
</div>)
};
class Rodal extends React.Component {
static defaultProps = {
width: 400,
height: 240,
measure: 'px',
visible: false,
showMask: true,
closeOnEsc: false,
closeMaskOnClick: true,
showCloseButton: true,
animation: 'zoom',
enterAnimation: '',
leaveAnimation: '',
duration: 300,
className: '',
customStyles: {},
customMaskStyles: {}
};
state = {
isShow: false,
animationType: 'leave'
};
componentDidMount() {
if (this.props.visible) {
this.enter();
}
}
componentWillReceiveProps(nextProps) {
if (!this.props.visible && nextProps.visible) {
this.enter();
} else if (this.props.visible && !nextProps.visible) {
this.leave();
}
}
enter() {
this.setState({isShow: true, animationType: 'enter'});
}
leave() {
this.setState(
isIE9
? {
isShow: false
}
: {
animationType: 'leave'
});
}
onKeyUp = event => {
if (this.props.closeOnEsc && event.keyCode === 27) {
this.props.onClose();
}
}
animationEnd = event => {
if (this.state.animationType === 'leave') {
this.setState({isShow: false});
} else if (this.props.closeOnEsc) {
this.el.focus();
}
if (event.target === this.el) {
const {onAnimationEnd} = this.props;
onAnimationEnd && onAnimationEnd();
}
}
render() {
const {props, state} = this;
const onClick = props.closeMaskOnClick
? props.onClose
: null;
const mask = props.showMask
? <div className="rodal-mask" style={props.customMaskStyles} onClick={onClick}/>
: null;
const style = {
display: state.isShow
? ''
: 'none',
animationDuration: props.duration + 'ms',
WebkitAnimationDuration: props.duration + 'ms'
};
return (<div style={style} className={"rodal rodal-fade-" + state.animationType + ' ' + props.className} onAnimationEnd={this.animationEnd} tabIndex="-1" ref={el => {
this.el = el;
}} onKeyUp={this.onKeyUp}>
{mask}
<Dialog {...props} animationType={state.animationType}>
{props.children}
</Dialog>
</div>)
}
}
class Example extends React.Component {
constructor() {
super();
this.state = {
modalIsOpen: false
}
}
openModal = () => {
this.setState({modalIsOpen: true})
}
closeModal = () => {
this.setState({modalIsOpen: false})
}
render() {
return (<div>
<button onClick={this.openModal}>Open modal</button>
<Rodal visible={this.state.modalIsOpen} onClose={this.closeModal} closeOnEsc={true} animation='door'>
<video id='my-video' src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" controls></video>
</Rodal>
</div>);
}
}
ReactDOM.render(<Example/>, document.getElementById('app'));
.rodal,
.rodal-mask {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
.rodal {
position: fixed;
}
/* -- mask -- */
.rodal-mask {
position: absolute;
background: rgba(0, 0, 0, .3);
}
/* -- dialog -- */
.rodal-dialog {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 101;
padding: 15px;
background: #fff;
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.rodal-dialog:focus {
outline: none;
}
/* -- close button -- */
.rodal-close {
position: absolute;
cursor: pointer;
top: 16px;
right: 16px;
width: 16px;
height: 16px;
}
.rodal-close:before,
.rodal-close:after {
position: absolute;
content: '';
height: 2px;
width: 100%;
top: 50%;
left: 0;
margin-top: -1px;
background: #999;
border-radius: 100%;
-webkit-transition: background .2s;
transition: background .2s;
}
.rodal-close:before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.rodal-close:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.rodal-close:hover:before,
.rodal-close:hover:after {
background: #333;
}
/* -- fade -- */
#-webkit-keyframes rodal-fade-enter {
from {
opacity: 0;
}
}
#keyframes rodal-fade-enter {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.rodal-fade-enter {
-webkit-animation: rodal-fade-enter both ease-in;
animation: rodal-fade-enter both ease-in;
}
#-webkit-keyframes rodal-fade-leave {
to {
opacity: 0
}
}
#keyframes rodal-fade-leave {
to {
opacity: 0
}
}
.rodal-fade-leave {
-webkit-animation: rodal-fade-leave both ease-out;
animation: rodal-fade-leave both ease-out;
}
/* -- zoom -- */
#-webkit-keyframes rodal-zoom-enter {
from {
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
}
#keyframes rodal-zoom-enter {
from {
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
}
.rodal-zoom-enter {
-webkit-animation: rodal-zoom-enter both cubic-bezier(0.4, 0, 0, 1.5);
animation: rodal-zoom-enter both cubic-bezier(0.4, 0, 0, 1.5);
}
#-webkit-keyframes rodal-zoom-leave {
to {
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
}
#keyframes rodal-zoom-leave {
to {
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
}
.rodal-zoom-leave {
-webkit-animation: rodal-zoom-leave both;
animation: rodal-zoom-leave both;
}
/* -- slideDown -- */
#-webkit-keyframes rodal-slideDown-enter {
from {
-webkit-transform: translate3d(0, -100px, 0);
transform: translate3d(0, -100px, 0);
}
}
#keyframes rodal-slideDown-enter {
from {
-webkit-transform: translate3d(0, -100px, 0);
transform: translate3d(0, -100px, 0);
}
}
.rodal-slideDown-enter {
-webkit-animation: rodal-slideDown-enter both cubic-bezier(0.4, 0, 0, 1.5);
animation: rodal-slideDown-enter both cubic-bezier(0.4, 0, 0, 1.5);
}
#-webkit-keyframes rodal-slideDown-leave {
to {
-webkit-transform: translate3d(0, -100px, 0);
transform: translate3d(0, -100px, 0);
}
}
#keyframes rodal-slideDown-leave {
to {
-webkit-transform: translate3d(0, -100px, 0);
transform: translate3d(0, -100px, 0);
}
}
.rodal-slideDown-leave {
-webkit-animation: rodal-slideDown-leave both;
animation: rodal-slideDown-leave both;
}
/* -- slideLeft -- */
#-webkit-keyframes rodal-slideLeft-enter {
from {
-webkit-transform: translate3d(-150px, 0, 0);
transform: translate3d(-150px, 0, 0);
}
}
#keyframes rodal-slideLeft-enter {
from {
-webkit-transform: translate3d(-150px, 0, 0);
transform: translate3d(-150px, 0, 0);
}
}
.rodal-slideLeft-enter {
-webkit-animation: rodal-slideLeft-enter both cubic-bezier(0.4, 0, 0, 1.5);
animation: rodal-slideLeft-enter both cubic-bezier(0.4, 0, 0, 1.5);
}
#-webkit-keyframes rodal-slideLeft-leave {
to {
-webkit-transform: translate3d(-150px, 0, 0);
transform: translate3d(-150px, 0, 0);
}
}
#keyframes rodal-slideLeft-leave {
to {
-webkit-transform: translate3d(-150px, 0, 0);
transform: translate3d(-150px, 0, 0);
}
}
.rodal-slideLeft-leave {
-webkit-animation: rodal-slideLeft-leave both;
animation: rodal-slideLeft-leave both;
}
/* -- slideRight -- */
#-webkit-keyframes rodal-slideRight-enter {
from {
-webkit-transform: translate3d(150px, 0, 0);
transform: translate3d(150px, 0, 0);
}
}
#keyframes rodal-slideRight-enter {
from {
-webkit-transform: translate3d(150px, 0, 0);
transform: translate3d(150px, 0, 0);
}
}
.rodal-slideRight-enter {
-webkit-animation: rodal-slideRight-enter both cubic-bezier(0.4, 0, 0, 1.5);
animation: rodal-slideRight-enter both cubic-bezier(0.4, 0, 0, 1.5);
}
#-webkit-keyframes rodal-slideRight-leave {
to {
-webkit-transform: translate3d(150px, 0, 0);
transform: translate3d(150px, 0, 0);
}
}
#keyframes rodal-slideRight-leave {
to {
-webkit-transform: translate3d(150px, 0, 0);
transform: translate3d(150px, 0, 0);
}
}
.rodal-slideRight-leave {
-webkit-animation: rodal-slideRight-leave both;
animation: rodal-slideRight-leave both;
}
/* -- slideUp -- */
#-webkit-keyframes rodal-slideUp-enter {
from {
-webkit-transform: translate3d(0, 100px, 0);
transform: translate3d(0, 100px, 0);
}
}
#keyframes rodal-slideUp-enter {
from {
-webkit-transform: translate3d(0, 100px, 0);
transform: translate3d(0, 100px, 0);
}
}
.rodal-slideUp-enter {
-webkit-animation: rodal-slideUp-enter both cubic-bezier(0.4, 0, 0, 1.5);
animation: rodal-slideUp-enter both cubic-bezier(0.4, 0, 0, 1.5);
}
#-webkit-keyframes rodal-slideUp-leave {
to {
-webkit-transform: translate3d(0, 100px, 0);
transform: translate3d(0, 100px, 0);
}
}
#keyframes rodal-slideUp-leave {
to {
-webkit-transform: translate3d(0, 100px, 0);
transform: translate3d(0, 100px, 0);
}
}
.rodal-slideUp-leave {
-webkit-animation: rodal-slideUp-leave both;
animation: rodal-slideUp-leave both;
}
/* -- flip -- */
#-webkit-keyframes rodal-flip-enter {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 60deg);
transform: perspective(400px) rotate3d(1, 0, 0, 60deg);
}
70% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
#keyframes rodal-flip-enter {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 60deg);
transform: perspective(400px) rotate3d(1, 0, 0, 60deg);
}
70% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
.rodal-flip-enter {
-webkit-animation: rodal-flip-enter both ease-in;
animation: rodal-flip-enter both ease-in;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
}
#-webkit-keyframes rodal-flip-leave {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
}
to {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 45deg);
transform: perspective(400px) rotate3d(1, 0, 0, 45deg);
}
}
#keyframes rodal-flip-leave {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
}
to {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 45deg);
transform: perspective(400px) rotate3d(1, 0, 0, 45deg);
}
}
.rodal-flip-leave {
-webkit-animation: rodal-flip-leave both;
animation: rodal-flip-leave both;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
}
/* -- rotate -- */
#-webkit-keyframes rodal-rotate-enter {
from {
-webkit-transform: rotate3d(0, 0, 1, -180deg) scale3d(.3, .3, .3);
transform: rotate3d(0, 0, 1, -180deg) scale3d(.3, .3, .3);
}
}
#keyframes rodal-rotate-enter {
from {
-webkit-transform: rotate3d(0, 0, 1, -180deg) scale3d(.3, .3, .3);
transform: rotate3d(0, 0, 1, -180deg) scale3d(.3, .3, .3);
}
}
.rodal-rotate-enter {
-webkit-animation: rodal-rotate-enter both;
animation: rodal-rotate-enter both;
-webkit-transform-origin: center;
transform-origin: center;
}
#-webkit-keyframes rodal-rotate-leave {
to {
-webkit-transform: rotate3d(0, 0, 1, 180deg) scale3d(.3, .3, .3);
transform: rotate3d(0, 0, 1, 180deg) scale3d(.3, .3, .3);
}
}
#keyframes rodal-rotate-leave {
to {
-webkit-transform: rotate3d(0, 0, 1, 180deg) scale3d(.3, .3, .3);
transform: rotate3d(0, 0, 1, 180deg) scale3d(.3, .3, .3);
}
}
.rodal-rotate-leave {
-webkit-animation: rodal-rotate-leave both;
animation: rodal-rotate-leave both;
-webkit-transform-origin: center;
transform-origin: center;
}
/* -- door -- */
#-webkit-keyframes rodal-door-enter {
from {
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
}
}
#keyframes rodal-door-enter {
from {
-webkit-transform: scale3d(0, 1, 1);
transform: scale3d(0, 1, 1);
}
}
.rodal-door-enter {
-webkit-animation: rodal-door-enter both cubic-bezier(0.4, 0, 0, 1.5);
animation: rodal-door-enter both cubic-bezier(0.4, 0, 0, 1.5);
}
#-webkit-keyframes rodal-door-leave {
60% {
-webkit-transform: scale3d(.01, 1, 1);
transform: scale3d(.01, 1, 1);
}
to {
-webkit-transform: scale3d(0, 1, .1);
transform: scale3d(0, 1, .1);
}
}
#keyframes rodal-door-leave {
60% {
-webkit-transform: scale3d(.01, 1, 1);
transform: scale3d(.01, 1, 1);
}
to {
-webkit-transform: scale3d(0, 1, .1);
transform: scale3d(0, 1, .1);
}
}
.rodal-door-leave {
-webkit-animation: rodal-door-leave both;
animation: rodal-door-leave both;
}
#my-video {
width: 100%;
height: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'></div>

Slide element in when opening page, and slide it out when closing page

I went through dozens of questions here, but nothing answers my problem.
Basically I want to have the same feature as on this website: http://madebyheart.co.uk/work/thrively/ - when you load the page the [X] and MENU buttons slide from top, and when you click [X] to close the page they slide back up...
I tried looking at their code but it gives me headache.
I assume that's done with CSS + JS, but I have no clue where to start.

Check this out.
#-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, -200%, 0);
transform: translate3d(0, -200%, 0);
}
}
#keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, -200%, 0);
transform: translate3d(0, -200%, 0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.site__title.mega {
text-align: center;
font-size: 60px;
}
.ji:hover {
cursor: pointer;
}
.ji {
padding: 2px 14px;
border: 1px solid black;
}
<html>
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="setest_style.css">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".ji").click(function(){
$("#animationSandbox").removeClass("fadeInDown");
$("#animationSandbox").addClass("fadeInUp");
});
});
</script>
</head>
<body>
<span id="animationSandbox" style="display: block;" class="fadeInDown animated">
<h1 class="site__title mega"><span class="ji">X</span></h1>
</span>
</body>
</html>
EDIT:
For achieving fadein animation with display:inline-block; , you have to use fadein classes in inner divs as shown below.
#-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(200%, 0, 0);
transform: translate3d(200%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(200%, 0, 0);
transform: translate3d(200%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(200%, 0, 0);
transform: translate3d(200%, 0, 0);
}
}
#keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(-200%, 0, 0);
transform: translate3d(-200%, 0, 0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
body {
background: #f9f9f9;
margin: 0;
}
a {
text-decoration:underline;
color:#000;
position: relative;
}
/* ABOUT + CONTACT */
.hlinks {
writing-mode: vertical-rl;
position: fixed;
right: 10%;
top: 15px;
display: inline;
color: #000;
font-size: 13px;
}
.hlinks2 {
writing-mode: vertical-rl;
position: fixed;
right: 10%;
top: 100px;
display: inline;
color: #000;
font-size: 13px;
}
<span style="display: inline-block;" >
<div id="animationSandbox" class="hlinks fadeInLeft animated">
<span>
ABOUT —
CONTACT
</span>
</div>
</span>

animate.css is good library , Should meet your needs
DEMO:
https://daneden.github.io/animate.css/

slider jquery class not being applied until too late

so simply put ... the simple slider you use the right arrow to go to the next slide and it should immediately apply a class called bounceInUp .... it does this but not until about 1 second after so you have static text , then the effect and I just want to have the text effect from slide start, ...nothing seems to rectify the problem...
I think it may pertain to the transitionend not actually ending until the next slide so was thinking maybe an onclick event for the button itself but i am not sure how to do that...
anyway here is a jsfiddle enter link description here
and here is the jquery , (all is included in the fiddle)
the main jquery code
$(document).ready(function() {
//Store a ref to slides
var $slides = $(".slides");
//Bind event to the contianed that gets animated
$(".slide-container")
.on("transitionend webkitTransitionEnd oTransitionEnd msTransitionEnd", function(e){
// Remove classes from all the elements within the active container that starts with the class 'add-anim'
$slides.find(".slide-container [class^='add-anin']").removeClass("animated bounceInUp");
//Add appropriate classes to the matched elements within the active container
var $radio = $slides.find(":radio[name='radio-btn']:checked");
$radio.next(".slide-container").find(".add-anim-up").addClass("animated bounceInUp");
$radio.next(".slide-container").find(".add-anim-up-late").addClass("animated bounceInUp");
$radio.next(".slide-container").find(".add-anim-left").addClass("animated bounceInLeft");
});
});

The button click event is where its at.
You will need to style it the way you want it but I think it does what you want.
Fiddle:http://jsfiddle.net/3hr4ua79/
$(document).ready(function() {
$('.sp').first().addClass('active');
$('.sp').hide();
$('.active').show();
$('#button-next').click(function() {
$('.active').removeClass('active animated bounceInUp').addClass('oldActive');
if ($('.oldActive').is(':last-child')) {
$('.sp').first().addClass('active animated bounceInUp');
} else {
$('.oldActive').next().addClass('active animated bounceInUp');
}
$('.oldActive').removeClass('oldActive');
$('.sp').fadeOut();
$('.active').fadeIn();
});
$('#button-previous').click(function() {
$('.active').removeClass('active animated bounceInUp').addClass('oldActive');
if ($('.oldActive').is(':first-child')) {
$('.sp').last().addClass('active animated bounceInUp');
} else {
$('.oldActive').prev().addClass('active animated bounceInUp');
}
$('.oldActive').removeClass('oldActive');
$('.sp').fadeOut();
$('.active').fadeIn();
});
});
#slider-wrapper {
width: 100%;
height: 200px;
}
#slider {
width: 100%;
height: 200px;
position: relative;
}
.sp {
width: 100%;
height: 200px;
position: absolute;
}
#nav {
margin-top: 20px;
width: 100%;
}
#button-previous {
position: relative;
top: -100px;
}
#button-next {
position: relative;
top: -100px;
float: right;
}
body {
overflow: hidden;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes bounceInUp {
0%, 60%, 75%, 90%, 100% {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
#keyframes bounceInUp {
0%, 60%, 75%, 90%, 100% {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0);
transform: translate3d(0, 3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0);
transform: translate3d(0, -20px, 0);
}
75% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
90% {
-webkit-transform: translate3d(0, -5px, 0);
transform: translate3d(0, -5px, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider-wrapper">
<div id="slider">
<div class="sp" style="background: blue;">akjdfalfkdj</div>
<div class="sp" style="background: yellow;">akjdfautlfkdkjkhkj</div>
<div class="sp" style="background: green;">akjdfalfkdiyukjkhkj</div>
<div class="sp" style="background: red;">akjdfalfkdkkljjkhkj</div>
</div>
</div>
<div id="nav"></div>
<input type="button" id="button-previous" value="Previous">
<input type="button" id="button-next" value="Next">

We Keep Coding

JavaScript is the programming language of the Web.

Animation delay with html/css/js animation - javascript

Related

Fading element in the center of window by scrolling

Why does the last frame show up before first in animation?

Keyframe on modal interfering with full screen video

Slide element in when opening page, and slide it out when closing page

slider jquery class not being applied until too late

Categories

Resources