We Keep Coding

Animation not working despite the class is added

I want to add my beating animation only to the text between arrows (arrows shouldn't have beating).
But unfortunately I'm unable to find the reason why the animation is not working (the heart class which contains the animation is added to the container of text but no animation is visible).
How can I fix this?
setTimeout(() => prepareLabelShow("This is the caption"), 2500);
const prepareLabel = document.querySelector(".prepareLabel");
function prepareLabelShow(text, state) {
function startBeating() {
const prepareLabelGroup = document.getElementById("prepare-label-group");
prepareLabelGroup.classList.add("heart");
}
prepareLabel.innerHTML = `<span class="right-arrow arrow">‹</span><div style="display:inline" id="prepare-label-group">${text}</div><span class="left-arrow arrow">›</span>`;
startBeating();
prepareLabel.classList.add("prepareLabelShow");
prepareLabel.classList.remove("prepareLabelHide");
} // end of prepareLabelShow function
.prepare-label-container {
position: absolute;
overflow: hidden;
height: 10vh;
width: 100%;
z-index: 11;
top: 68.5vh;
padding-top: 10px;
margin: 0;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
/*outline: 0.1vw dashed orange;*/
}
.prepareLabel {
position: relative;
font-family: "Vazir";
direction: rtl;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
text-align: center;
width: 100%;
color: #f8f7fa;
opacity: 0;
margin: 0 auto;
}
.prepareLabelShow {
animation: prepareLabelAnimeShow 0.3s ease-in-out;
animation-fill-mode: forwards ;
}
#-webkit-keyframes prepareLabelAnimeShow {
0% { opacity: 0; top: 4vh }
100% { opacity: 1; top: 1.2vh }
}
.heart {
animation: beat .5s infinite alternate;
}
#keyframes beat {
0% { opacity:1; transform: scale(1); }
100% { opacity:1; transform: scale(0.8); }
}
.arrow {
/*color: #e9e1f2;
font-size: 1.2vw;*/
color: #ff9900;
font-size: 1.3vw;
}
.left-arrow {
padding-right: 7vw;
transition: 1s ease-in-out;
}
.right-arrow {
padding-left: 7vw;
}
<div class ="prepare-label-container">
<p class="prepareLabel"></p>
</div>
I did not simplified the code in purpose.
The desired result is to see the beating animation in the text inside two arrows.

Full screen responsive menu still clickable when closed

I am working on a website and I have included a full-screen menu that drops in when the menu icon is clicked. However, I am running into an issue where the menu items (buttons) are still clickable when the menu is closed.
I am using React.js + Scss.
const MyNav = () => {
const toggleClass = (element, stringClass) => {
if(element.classList.contains(stringClass))
element.classList.remove(stringClass);
else
element.classList.add(stringClass);
}
useEffect(() => {
const body = document.querySelector('body');
const menu = document.querySelector('.menu-icon');
menu.addEventListener('click', () => toggleClass(body, 'nav-active'));
},[]);
console.log("this is being loaded");
return (
<>
<div class="menu-icon">
<span class="menu-icon__line menu-icon__line-left"></span>
<span class="menu-icon__line"></span>
<span class="menu-icon__line menu-icon__line-right"></span>
</div>
<div class="nav">
<div class="nav__content">
<ul class="nav__list">
<li class="nav__list-item">Home</li>
<li class="nav__list-item">About</li>
<li class="nav__list-item">Portfolio</li>
<li class="nav__list-item">Journal</li>
<li class="nav__list-item">Contact</li>
</ul>
</div>
</div>
</>
)
}
export default MyNav;
$font--color:var(--primary);
$font--color--active:var(--primary);
$transition--length: .8;
//default state
.menu-icon{
$size: 30px;
height: $size;
width: $size;
position: fixed;
z-index:2;
left: 50px;
top: 30px;
cursor: pointer;
&__line{
height: 2px;
width: $size;
display: block;
background-color: $font--color;
margin-bottom: 4px;
transition: transform .2s ease, background-color .5s ease;
}
&__line-left{
width: $size / 2;
}
&__line-right{
width: $size / 2;
float: right;
}
}
.nav{
$width: 100vw;
$height: 100vh;
$font--size--calc: calc(2vw + 10px);
$transition--easing: cubic-bezier(.77,0,.175,1);
position: fixed;
z-index:1;
&:before,&:after{
content: "";
position: fixed;
width:$width;
height:$height;
background: rgba(#eaeaea, .2);
z-index: -1;
transition: transform $transition--easing $transition--length + s;
transform: translateX(0%) translateY(-100%);
}
&:after{
background: var(--highlight);
transition-delay: 0s;
}
&:before{
transition-delay: .1s;
}
&__content{
position: fixed;
top:50%;
transform: translate(0%,-50%);
width: 100%;
text-align: center;
font-size: $font--size--calc;
font-weight: 200;
cursor: pointer;
}
&__list-item{
position: relative;
display: inline-block;
transition-delay: $transition--length + s;
opacity: 0;
transform: translate(0%, 100%);
transition: opacity .2s ease, transform .3s ease;
margin-right: 25px;
&:before{
content: "";
position: absolute;
background: $font--color--active;
width: 20px;
height: 1px;
top: 100%;
transform: translate(0%, 0%);
transition: all .3s ease;
z-index: -1;
}
&:hover{
&:before{
width: 100%;
}
}
}
}
//active state
body.nav-active{
$menu--items--count: 5;
.menu-icon{
&__line{
background-color: var(--primary);
transform: translateX(0px) rotate(-45deg);
}
&__line-left{
transform: translateX(1px) rotate(45deg);
}
&__line-right{
transform: translateX(-2px) rotate(45deg);
}
}
.nav{
visibility:visible;
&:before,&:after{
transform: translateX(0%) translateY(0%);
}
&:after{
transition-delay: .1s;
}
&:before{
transition-delay: 0s;
}
&__list-item{
pointer-events: all;
opacity: 1;
transform: translateX(0%);
transition: opacity .3s ease, transform .3s ease, color .3s ease;
#for $i from 0 through $menu--items--count {
&:nth-child(#{$i}){
transition-delay: $transition--length * $i / 8 + .5 + s;
}
}
}
}
}
Bonus points if you can tell me how to not have the site scrollable when the menu is open.
Thanks!

You need to have the visibility property set to hidden on the nav when it is not visible like this
.nav{
$width: 100vw;
$height: 100vh;
//add this when nav is not active by default
visibility: hidden;
transition:visibility .3s cubic-bezier(.77,0,.175,1);
$font--size--calc: calc(2vw + 10px);
$transition--easing: cubic-bezier(.77,0,.175,1);
position: fixed;
z-index:1;
.
.
.
}
To remove the scrollbar when menu is open you can set the overflow hidden on body using .nav-active class only
body.nav-active{
overflow:hidden;
$menu--items--count: 5;
.menu-icon{
.
.
.
}
Hope this helps !

The responsive menu does not work on website

I code the responsive menu, but it does not work. My expectation: when you click on the hamburger menu, the menu will transform to the close icon, and the full-screen menu is open (background->opacity .5).
I am not sure where is the mistake. CSS? or js?
Do you have any suggestions?
Any help is appreciated. Thank you so much.
$(document).ready(function() {
let hamburgerClicked = false;
$('#toggle').on("click", function() {
if (hamburgerClicked == false) {
$(".top").css('transform', 'translate (11px) translateX(0) rotate(45deg)');
$(".bottom").css('transform', 'translateY(-11px) translateX(0) rotate(-45deg)');
hamburgerClicked = true;
} else {
$(".top").css('transform', 'translate (0px) translateX(0) rotate(0deg)');
$(".bottom").css('transform', 'translateY (0px) translateX(0) rotate(0deg)');
hamburgerClicked = false;
}
$("#overlay").toggleClass('active');
$('#overlay').toggleClass('open');
});
});
.button-container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
opacity: 1;
content: "";
}
.button-container:hover {
opacity: .7;
}
.top:active {
transform: translate(11px) translateX(0) rotate(45deg);
}
.middle:active {
opacity: 0;
}
.bottom:active {
transform: translateY(-11px) translateX(0) rotate(-45deg);
}
span {
background: #fff;
border: none;
height: 4px;
width: 32px;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
border-radius: 3px;
}
.middle {
top: 10px;
}
.bottom {
top: 20px;
}
.overlay {
z-index: 500;
position: fixed;
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
width: 5%;
height: 0%;
opacity: .6;
visibility: hidden;
transition: opacity .35s, visibility .35s, height .35s;
}
li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
li:nth-of-type(2) {
animation-delay: .4s;
}
li:nth-of-type(3) {
animation-delay: .45s;
}
li:nth-of-type(4) {
animation-delay: .50s;
}
nav {
position: relative;
height: 70%;
top: 20%;
transform: translateY(-50%);
font-size: 0.8em;
}
ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
li {
display: block;
height: 25%;
min-height: 50px;
position: relative;
opacity: 0;
}
a {
display: block;
position: relative;
text-decoration: none;
overflow: hidden;
}
a:hover {
transform: scale(1);
}
a:hover:after,
a:focus:after,
a:active:after {
width: 30%;
}
a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: rgba(0, 0, 0, 0.6);
transition: .35s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
.active {
visibility: visible;
}
<div class="button-container" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>Home</li>
<li>About</li>
<li>12 Constellations</li>
<li>Stargazing</li>
</ul>
</nav>
</div>
</header>

There are mistakes in your Javascript code.
When you are changing the css of .top span, you are using 'translate' instead of 'translateY'.
$(".top").css('transform', 'translate (11px) translateX(0) rotate(45deg)'); // In if condition
$(".top").css ('transform', 'translate (0px) translateX(0) rotate(0deg)'); // In else condition
This should be:
$(".top").css('transform', 'translateY(11px) translateX(0) rotate(45deg)'); // In if condition
$(".top").css ('transform', 'translateY(0px) translateX(0) rotate(0deg)'); // In else condition
Also when clicking on the button you should toggle the visibility of the middle span so that the button looks like a cross.
$(".middle").css("display", "none"); // In if condition
$(".middle").css("display", ""); // In else condition
Here is a working demo on JSFiddle : https://jsfiddle.net/0p9faz7m/

How to get a series of elements to loop through showing only one at a time

I am attempting to get my span elements agencyText to appear one at a time. Then at the end of the interval for the curr and next classes to be applied to properly position the current and next bit of text to appear.
As of now, I am getting them all shown at once. I created them with data attribute index values. However, I am unsure how to loop through them to get this to work correctly.
If you click this link there is an example of the left side of exactly what I am trying to do. It is the text rotated 90 degrees. Every four seconds the wording is updated.
Does anyone know how I can modify my code to replicate this?
UPDATE - showing DOM code of example.
var arr = $('.textContainer');
var arrLen = arr.length;
var i = 0;
var attr = $('agencyText').data('index');
var loop = function() {
var item = arr.eq(i);
var description = item.find('.agencyText');
description.addClass('curr');
i = (i + 1) % arrLen;
};
loop();
setInterval(loop, 3000);
.digitalAgency {
height: 20px;
position: fixed;
top: 50%;
left: -45%;
width: 100%;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
-webkit-transition:opacity .5s;
-o-transition:opacity .5s;
transition:opacity .5s;
}
.digitalAgency .textContainer::before {
content: "";
position: absolute;
width: 40px;
height: 1px;
background: #000;
display: inline-block;
top: 50%;
margin-right: 20px;
left: 33%;
}
.digitalAgency .textContainer {
position: relative;
width: 650px;
height: 100%;
left: 50%;
-webkit-transform: translateX(-50%) rotate(-90deg);
-ms-transform: translateX(-50%) rotate(-90deg);
transform: translateX(-50%) rotate(-90deg);
display: inline-block;
}
.digitalAgency, .agencyText {
-webkit-animation-duration: .45s;
animation-duration: .45s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.digitalAgency .textContainer .agencyText {
padding-left: 60px;
position: absolute;
visibility: hidden;
width: 100%;
height: 100%;
left: 33%;
}
.digitalAgency .textContainer .agencyText.curr {
visibility: visible;
}
.digitalAgency .agencyText.curr{visibility:visible;-webkit-animation-name:dgAgnCurr;animation-name:dgAgnCurr}
.digitalAgency .agencyText.next{visibility:visible;-webkit-animation-name:dgAgnNext;animation-name:dgAgnNext}
#-webkit-keyframes dgAgnCurr{from{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}
#keyframes dgAgnCurr{from{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}
#-webkit-keyframes dgAgnNext{from{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}
#keyframes dgAgnNext{from{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="digitalAgency">
<span class="textContainer">
<span data-index="0" class="agencyText">The first one</span>
<span data-index="1" class="agencyText">The second one</span>
<span data-index="2" class="agencyText">The third one</span>
<span data-index="3" class="agencyText">The fourth one</span>
</span>
</div>

I have updated your javascript code. try like this
var arr = $('.textContainer > span');
var arrLen = arr.length;
var i = 0;
var loop = function() {
$('.textContainer > span').removeClass('curr');
$('span[data-index = '+i+']').addClass('curr');
i = (i + 1) % arrLen;
};
loop();
setInterval(loop, 3000);
.digitalAgency {
height: 20px;
position: fixed;
top: 50%;
left: -45%;
width: 100%;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
-webkit-transition:opacity .5s;
-o-transition:opacity .5s;
transition:opacity .5s;
}
.digitalAgency .textContainer::before {
content: "";
position: absolute;
width: 40px;
height: 1px;
background: #000;
display: inline-block;
top: 50%;
margin-right: 20px;
left: 33%;
}
.digitalAgency .textContainer {
position: relative;
width: 650px;
height: 100%;
left: 50%;
-webkit-transform: translateX(-50%) rotate(-90deg);
-ms-transform: translateX(-50%) rotate(-90deg);
transform: translateX(-50%) rotate(-90deg);
display: inline-block;
}
.digitalAgency, .agencyText {
-webkit-animation-duration: .45s;
animation-duration: .45s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
.digitalAgency .textContainer .agencyText {
padding-left: 60px;
position: absolute;
visibility: hidden;
width: 100%;
height: 100%;
left: 33%;
}
.digitalAgency .textContainer .agencyText.curr {
visibility: visible;
}
.digitalAgency .agencyText.curr{visibility:visible;-webkit-animation-name:dgAgnCurr;animation-name:dgAgnCurr}
.digitalAgency .agencyText.next{visibility:visible;-webkit-animation-name:dgAgnNext;animation-name:dgAgnNext}
#-webkit-keyframes dgAgnCurr{from{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}
#keyframes dgAgnCurr{from{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(-100%);transform:translateY(-100%)}}
#-webkit-keyframes dgAgnNext{from{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}
#keyframes dgAgnNext{from{-webkit-transform:translateY(100%);transform:translateY(100%)}to{-webkit-transform:translateY(0);transform:translateY(0)}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="digitalAgency">
<span class="textContainer">
<span data-index="0" class="agencyText">The first one</span>
<span data-index="1" class="agencyText">The second one</span>
<span data-index="2" class="agencyText">The third one</span>
<span data-index="3" class="agencyText">The fourth one</span>
</span>
</div>

FadeOut element to FadeIn another in the same place with CSS animations

So I got a little circle shape with an icon that when I click, it will make the icon disappear and show a few elements in another div. The circle shape transforms into a 260x260 px square with CSS animation.
Until that I was fine, but I can't make the fadeIn/fadeOut work. Is there a way to handle this by toggling a CSS class over the parent element?
I can't just use opacity 0 to opacity 1 because I need the icon to really disappear with display none. Same for the other when going back to circle+icon state. But I just can't even make the opacity animation work. I also tried with those keyframes of fadeIn and fadeOut but didn't work either.
I found this fiddle but it looks so ugly having to use a setTimeout.
Is there a way to solve this with only CSS?
$('.toggle-btn').click(function() {
$('.parent').toggleClass('expanded');
});
.parent {
width: 40px;
height: 40px;
background-color: lightgray;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
position: fixed;
left: 11px;
bottom: 18px;
text-align: center;
transition: all 500ms;
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
}
.parent.expanded {
width: 200px;
height: 200px;
border-radius: 0 14px 0 0;
left: 0;
bottom: 0;
}
.children-1 {
display: block;
animation: opacity-up 500ms linear 700ms 1;
animation-fill-mode: forwards;
}
.help {
width: 21px;
height: 21px;
position: relative;
top: 9px;
}
.children-2 {
display: none;
animation: opacity-down 500ms linear 700ms 1;
animation-fill-mode: forwards;
}
.parent.expanded .children-1 {
animation: opacity-down 500ms linear 700ms 1;
animation-fill-mode: forwards;
display: none;
}
.parent.expanded .children-2 {
animation: opacity-up 500ms linear 700ms 1;
animation-fill-mode: forwards;
display: block;
}
#keyframes opacity-down {
0% {
visibility: visible;
opacity: 1;
}
100% {
opacity: 0;
visibility: hidden;
}
}
#keyframes opacity-up {
0% {
opacity: 0;
visibility: hidden;
}
100% {
opacity: 1;
visibility: visible;
}
}
/*
#-webkit-keyframes fadeIn {
0% { opacity: 0;
visibility: hidden;
display: none; }
100% { opacity: 1;
visibility: visible;
display: block; }
}
#keyframes fadeIn {
0% { opacity: 0;
visibility: hidden;
display: none; }
100% { opacity: 1;
visibility: visible;
display: block; }
}
#-webkit-keyframes fadeOut {
0% { opacity: 1;
visibility: visible;
display: block; }
100% { opacity: 0;
visibility: hidden;
display: none; }
}
#keyframes fadeOut {
0% { opacity: 1;
visibility: visible;
display: block; }
100% { opacity: 0;
visibility: hidden;
display: none; }
}*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="children-1">
<img class="help" src="http://media1.calvinklein.com/images/static/e-comm/icons/questionMark.png"/>
</div>
<div class="children-2">
<p class="paragraph">
Here is some content+inputs+other stuff, Here is some content+inputs+other stuff
</p>
</div>
</div>
<button class="toggle-btn">TOGGLE!</button>

Until that I was fine, but I can't make the fadeIn/fadeOut work. Is
there a way to handle this by toggling a CSS class over the parent
element?
You can do this without animation with toggle classes
$('.toggle-btn').click(function() {
$('.parent').toggleClass('expanded');
$('.children-2').toggleClass('show1');
$('.children-1').toggleClass('show2');
});
.parent {
width: 40px;
height: 40px;
background-color: lightgray;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
position: fixed;
left: 11px;
bottom: 18px;
text-align: center;
transition: all 500ms;
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
}
.parent.expanded {
width: 200px;
height: 200px;
border-radius: 0 14px 0 0;
left: 0;
bottom: 0;
}
.children-1 {
display: block;
animation: opacity-up 500ms lineal 0s 1;
animation-fill-mode: forwards;
}
.help {
width: 21px;
height: 21px;
position: relative;
top: 9px;
}
.children-2 {
opacity: 0;
transition: opacity 1s;
}
.children-1 {
opacity: 1;
transition: opacity 1s;
}
.show1 {
opacity: 1;
}
.show2 {
opacity: 1;
}
.parent.expanded .children-1 {
animation: opacity-down 500ms lineal 0s 1;
animation-fill-mode: forwards;
display: none;
}
.parent.expanded .children-2 {
animation: opacity-up 500ms lineal 0s 1;
animation-fill-mode: forwards;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="children-1">
<img class="help" src="http://media1.calvinklein.com/images/static/e-comm/icons/questionMark.png" />
</div>
<div class="children-2">
<p class="paragraph">
Here is some content+inputs+other stuff, Here is some content+inputs+other stuff
</p>
</div>
</div>
<button class="toggle-btn">TOGGLE!</button>