We Keep Coding

Why the onAnimationEnd does not trigger when switching the focus to other tab of the browser?

I am trying to build a split-flap.
Here is my code:
let baseDiv, lowerDiv, middleDiv, upperDiv;
let intervalId;
document.addEventListener("DOMContentLoaded", () => {
baseDiv = document.getElementById("base");
lowerDiv = document.getElementById("lower");
middleDiv = document.getElementById("middle");
upperDiv = document.getElementById("upper");
});
let backward = () => {
middleDiv.innerHTML = baseDiv.innerHTML;
lowerDiv.classList.add("rotate0to90");
middleDiv.className = "upperHalfCard-after transform0to_90 zIndex4";
}
let forward = () => {
middleDiv.innerHTML = baseDiv.innerHTML;
upperDiv.classList.add("rotate0to_90");
middleDiv.className = "lowerHalfCard-after transform0to90 zIndex4";
}
let handler = obj => {
console.log(obj.id);
switch (obj.id) {
case "lower":
lowerDiv.classList.replace("zIndex4", "zIndex2");
middleDiv.classList.add("rotate_90to0");
break;
case "middle":
upperDiv.innerHTML = baseDiv.innerHTML;
lowerDiv.innerHTML = baseDiv.innerHTML;
middleDiv.className = "hide";
upperDiv.className = "upperHalfCard-after zIndex4";
lowerDiv.className = "lowerHalfCard-after zIndex2";
break;
case "upper":
middleDiv.classList.add("rotate90to0");
upperDiv.classList.replace("zIndex4", "zIndex2");
break;
default:
break;
}
}
let start = () => {
intervalId = setInterval(() => {
console.log("Kicked by interval");
forward();
}, 3000);
}
let stop = () => {
clearInterval(intervalId);
}
.fullCard,
.lowerHalfCard,
.upperHalfCard,
.fullCard-after,
.lowerHalfCard-after,
.upperHalfCard-after {
background-color: inherit;
border-radius: 10px;
height: 100%;
width: 100%;
position: absolute;
align-items: inherit;
display: inherit;
justify-content: inherit;
}
.fullCard-after::after,
.upperHalfCard-after::after {
content: "";
display: block;
position: absolute;
height: 4px;
background-color: inherit;
width: 100%;
top: calc(50% - 2px);
}
.lowerHalfCard-after::after {
content: "";
display: block;
position: absolute;
height: 4px;
background-color: inherit;
width: 100%;
top: calc(50% - 2px);
}
.lowerHalfCard,
.lowerHalfCard-after {
clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
}
.upperHalfCard,
.upperHalfCard-after {
clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
}
.splitFlap {
background-color: black;
box-sizing: border-box;
border-radius: 10px;
color: white;
font-weight: bold;
font-family: arial;
font-size: 5.5em;
width: 100px;
height: 150px;
position: relative;
align-items: center;
display: flex;
justify-content: center;
transform-style: preserve-3d;
}
.rotate0to90 {
animation-name: r0to90;
}
.rotate90to0 {
animation-name: r90to0;
}
.rotate0to_90 {
animation-name: r0to_90;
}
.rotate_90to0 {
animation-name: r_90to0;
}
.rotate0to90,
.rotate90to0,
.rotate0to_90,
.rotate_90to0 {
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
#keyframes r0to90 {
from {
transform: rotateX(0deg);
}
to {
transform: rotateX(90deg);
}
}
#keyframes r90to0 {
from {
transform: rotateX(90deg);
}
to {
transform: rotateX(0deg);
}
}
#keyframes r0to_90 {
from {
transform: rotateX(0deg);
}
to {
transform: rotateX(-90deg);
}
}
#keyframes r_90to0 {
from {
transform: rotateX(-90deg);
}
to {
transform: rotateX(0deg);
}
}
.transform0to_90 {
transform: rotateX(-90deg);
}
.transform0to90 {
transform: rotateX(90deg);
}
.hide {
display: none
}
.zIndex2 {
z-index: 2;
}
.zIndex4 {
z-index: 4;
}
<div class="splitFlap">
<div id="base" class="fullCard-after zIndex2">
2
</div>
<div class="upperHalfCard-after zIndex4" id="upper" onAnimationEnd="handler(this)">
1
</div>
<div id="middle" class="hide" onAnimationEnd="handler(this)">
</div>
<div class="lowerHalfCard-after zIndex2" id="lower" onAnimationEnd="handler(this)">
1
</div>
</div>
<p>
<button onClick="start()">
Start
</button>
<button onClick="stop()">
Stop
</button>
</p>
The code works fine where the tab is on focus.
And you can see the onAnimationEnd event handler and interval handler work properly(i.e. 1 interval event trigger 2 onAnimationEnd event.).
Unfortunately, when switching the browser focus to another tab for about 1 min, the onAnimationEnd event handler seems to be not stable(i.e. sometimes only an interval event is triggered, and no onAnimationEnd event is triggered, sometimes the onAnimationEnd event handler can be resume).
What's going on? how can I fix it?

stacked cards carousel: looping z-index with jquery

I'm trying to create a carousel of stacked cards using CSS animations and Jquery.
The DOM elements are the following:
<div class="container">
<div class="card active" style="background:orange;z-index:4">
1
</div>
<div class="card" style="background:tan;z-index:3">
2
</div>
<div class="card" style="background:pink;z-index:2">
3
</div>
<div class="card" style="background:blue;z-index:1">
4
</div>
</div>
what i need to to is having
the z-index:4 card to become z-index:1
the z-index:3 card to become z-index: 4
the z-index:2 card to become z-index: 3
the z-index:1 card to become z-index: 2
you get the point: the first card needs to be pushed back in the stack, the others should move "up" one level.
Here's a semi-working fiddle: https://jsfiddle.net/p34yzmhv/
I'm no JS expert, i really don't know how to loop the zindex value. I've been reading similar questions here on stackoverflow but couldn't find something exactly similar to my problem.
thanks any hint or help is greatly appreciated.

You can put the z-index within a class and then change the class.
This also allows you to update the positions currently set with .card+.card+.card(etc) without which, your card1 would go to the back, but be position to be unseeable.
The alternative would be to move the elements in the DOM, which may or may not be simpler depending on what else you do with the cards.
Keeping with z4 = z-index=4 => positioned at the front (rather than more logical 1=at the front), add classes:
.z4 {
z-index: 4;
}
.z3 {
transform: rotate(2deg) translate3d(-50%, -50%, 0);
z-index: 3;
}
etc
Then, each iteration, remove all classes and add them back starting with the now current .active. .nextAll gives the following siblings while .prevAll gives the preceding siblings. Only .prevAll gives them in the reverse order so you also need to reverse that.
$(".card").removeClass("z1 z2 z3 z4");
let z=4;
$(".card.active").addClass("z"+z);
$(".card.active").nextAll(".card").each((i, e) => { z--; $(e).addClass("z"+z); });
$($(".card.active").prevAll(".card").get().reverse()).each((i, e) => { z--; $(e).addClass("z"+z); });
// console.log to confirm they're in the correct order
$(".card").each((i, e) => console.log(i, $(e).text(), e.className));
Updated snippet:
$(".btn2").click(function () {
setTimeout(function () {
var $next = $(".card.active").removeClass("active").next(".card");
if ($next.length) {
$next.addClass("active");
} else {
$(".card:first").addClass("active");
}
$(".card").removeClass("z1 z2 z3 z4");
var z=4;
$(".card.active").addClass("z"+z);
$(".card.active").nextAll(".card").each((i, e) => { z--; $(e).addClass("z"+z); });
$($(".card.active").prevAll(".card").get().reverse()).each((i, e) => { z--; $(e).addClass("z"+z); });
$(".card").each((i, e) => console.log(i, $(e).text(), e.className));
}, 1);
$(".card.active")
.addClass("animation")
.one(
"animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
function () {
$(".card").removeClass("animation");
}
);
});
#keyframes animation {
0% {
transform: rotate(0) translate3d(-50%, -50%, 0) scale(1);
opacity: 1;
z-index: 10;
}
15% {
opacity: 1;
z-index: 10;
transform: rotate(2deg) translate3d(-50%, -50%, 0) scale(1.1);
}
50% {
transform: rotate(-40deg) translate3d(-320%, -50%, 0) scale(0.1);
opacity: 0;
z-index: 0;
}
75% {
opacity: 1;
}
100% {
transform: rotate(0) translate3d(-50%, -50%, 0) scale(1);
opacity: 1;
z-index: 0;
}
}
.animation {
animation: animation 1s forwards cubic-bezier(0.83, 0, 0.17, 1);
}
.card {
transform-origin: center;
transform: rotate(0) translate3d(-50%, -50%, 0);
transition: all 1s cubic-bezier(0.22, 1, 0.36, 1);
&.active {
transform: rotate(0) translate3d(-50%, -50%, 0)!important;
}
}
// --------------------------------------------
// --------------- DEMO STYLES ----------------
// --------------------------------------------
html {
height: 100%;
}
body {
box-sizing: border-box;
margin: 0;
padding: 0;
* {
box-sizing: inherit;
}
}
.btn2 {
position: fixed;
left: 50%;
bottom: 10%;
transform: translateX(-50%) translateY(-50%);
background: coral;
cursor: pointer;
color: white;
padding: 24px;
text-transform: uppercase;
z-index: 50;
zoom: 1.2;
}
.container {
width: 420px;
height: 480px;
background: #eee;
overflow: hidden;
margin: 0 auto;
position: relative;
padding: 20px;
}
.card {
border-radius: 24px;
display: flex;
align-items: center;
justify-content: center;
min-height: 400px;
max-width: 320px;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
&.active {
box-shadow: 0 0 20px rgba(black, 0.25);
border: 1px solid black;
}
}
.z4 {
z-index: 4;
}
.z3 {
transform: rotate(2deg) translate3d(-50%, -50%, 0);
z-index: 3;
}
.z2 {
transform: rotate(4deg) translate3d(-50%, -50%, 0);
z-index: 2;
}
.z1 {
transform: rotate(6deg) translate3d(-50%, -50%, 0);
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="card active z4" style="background:orange">1</div>
<div class="card z3" style="background:tan">2</div>
<div class="card z2" style="background:pink">3</div>
<div class="card z1" style="background:blue">4</div>
</div>
<div class="btn2">
animate
</div>
Updated fiddle: https://jsfiddle.net/7z39mqdt/

JavaScript Code not running on a Live Sever nor Local Host

I have looked for this solution for days on end and I could not find the answer to why Javascript is not running correctly on the live server extension or local file host. I use Visual Studio Code and I am currently creating a webpage and trying to add JavaScript animations on it. However, its gotten to a point where I decided to copy other people's JS animations to see if it work for me and it still has not. For this code, I've made sure there are no errors whatsoever in the console and that the JS works properly on visual studio code. Both work but animations do not. Heres my code for a simple JS animation taken from https://webdesign.tutsplus.com/tutorials/animate-on-scroll-with-javascript--cms-36671.
Note: while even inputting this into the code snippet, it seems to run but it never works on live server or local hosts
const scrollElements = document.querySelectorAll(".js-scroll");
const elementInView = (el, dividend = 1) => {
const elementTop = el.getBoundingClientRect().top;
return (
elementTop <=
(window.innerHeight || document.documentElement.clientHeight) / dividend
);
};
const elementOutofView = (el) => {
const elementTop = el.getBoundingClientRect().top;
return (
elementTop > (window.innerHeight || document.documentElement.clientHeight)
);
};
const displayScrollElement = (element) => {
element.classList.add("scrolled");
};
const hideScrollElement = (element) => {
element.classList.remove("scrolled");
};
const handleScrollAnimation = () => {
scrollElements.forEach((el) => {
if (elementInView(el, 1.25)) {
displayScrollElement(el);
} else if (elementOutofView(el)) {
hideScrollElement(el)
}
})
}
window.addEventListener("scroll", () => {
handleScrollAnimation();
});
<style>
#import url("https://fonts.googleapis.com/css2?family=Merriweather&family=Merriweather+Sans:wght#300&display=swap");
/*General styling for structure*/
body {
margin: 0;
font-family: "Merriweather Sans", sans-serif;
}
.container {
max-width: 1280px;
width: 95%;
margin: 0 auto;
}
header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
font-family: "Merriweather", serif;
height: 100vh;
}
header h2 {
font-weight: 400;
}
.scroll-container {
height: 100vh;
min-height: 450px;
padding: 2rem 1rem;
display: flex;
align-items: center;
box-sizing: border-box;
}
.scroll-container:nth-of-type(1) {
background-color: #bdd0c4;
}
.scroll-container:nth-of-type(2) {
background-color: #f5d2d3;
}
.scroll-container:nth-of-type(3) {
background-color: #9ab7d3;
}
.scroll-container:nth-of-type(4) {
background-color: #dfccf1;
}
.scroll-container:nth-of-type(even) {
flex-direction: row-reverse;
}
.scroll-element,
.scroll-caption {
width: 50%;
}
.scroll-element {
min-height: 300px;
height: 100%;
background-color: #eaeaea;
}
.scroll-caption {
margin: 1rem;
}
footer {
text-align: center;
padding: 0.5rem 0;
background-color: #faddad;
}
footer p {
font-size: 0.75rem;
margin: 0.25rem 0;
color: #221133;
}
footer a {
text-decoration: none;
color: inherit;
}
#media screen and (max-width: 650px) {
.scroll-container,
.scroll-container:nth-of-type(even) {
flex-direction: column;
align-content: inherit;
}
.scroll-element {
height: 100%;
}
.scroll-element,
.scroll-caption {
width: 100%;
}
}
/**Styling scrollable elements*/
.js-scroll {
opacity: 0;
transition: opacity 500ms;
}
.js-scroll.scrolled {
opacity: 1;
}
.scrolled.fade-in {
animation: fade-in 1s ease-in-out both;
}
.scrolled.fade-in-bottom {
animation: fade-in-bottom 1s ease-in-out both;
}
.scrolled.slide-left {
animation: slide-in-left 1s ease-in-out both;
}
.scrolled.slide-right {
animation: slide-in-right 1s ease-in-out both;
}
#keyframes slide-in-left {
0% {
-webkit-transform: translateX(-100px);
transform: translateX(-100px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
#keyframes slide-in-right {
0% {
-webkit-transform: translateX(100px);
transform: translateX(100px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
#keyframes fade-in-bottom {
0% {
-webkit-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<head></head>
<body>
<header class="container">
<h1>How to Animate on Scroll With Vanilla JavaScript</h1>
<h2>Scroll to see the effects
<p class="animate-arrow">↓
</p>
</h2>
</header>
<section class="scroll-container">
<div class="scroll-element js-scroll fade-in">
</div>
<div class="scroll-caption">
This animation fades in.
</div>
</section>
<section class="scroll-container">
<div class="scroll-element js-scroll fade-in-bottom">
</div>
<div class="scroll-caption">
This animation slides in to the top.
</div>
</section>
<section class="scroll-container">
<div class="scroll-element js-scroll slide-left">
</div>
<div class="scroll-caption">
This animation slides in from the left.
</div>
</section>
<section class="scroll-container">
<div class="scroll-element js-scroll slide-right">
</div>
<div class="scroll-caption">
This animation slides in from the right.
</div>
</section>
<footer>
<p>Animation styles from animista.net</p>
<p>
Pen by Jemima Abu<span style="color: #D11E15"> ♥</span>
</p>
</footer>
</body>

Thank you all who responded to my question -
the answer was very simple and was actually mentioned by StackSlave
The script tag was in head and not at the end of the html file. The way around this is to add 'defer' at the end of the script tag. JS works perfectly now.

How to fix an array of elements in my section. It won't display my work when I call the function...?

So the idea of my work is with the 10 slides in my section will have an element append to the slides, which are drinking can products. When the cursor hovers the cans, the cans will increase the size to show the real detail of the can.
Anyway, I have managed to create my carousel active slide, the 3D effect cans that can rotate clockwise and have a list of different colour cans in CSS (different background for each bottle class).
I can only get the first can working on the active slide, but the rest of the slides are blank. I've only create a list of 3 items in the array hoping to fill up the three slides with the drinking can products but no luck? What am I doing wrong?
I'm calling the initApp function, which has the array of cans because I want to append items, but only one at a time...
so in the each.function(index) - I can add the index, and then in initApp(index). and then in the initApp function I can adjust so that bottle[index] gets selected and then added. But nothing seems to work?? What am I doing wrong? I know there is a bunch of ways I can do this.
Like could I skip the initApp() function and add all the code in the .each(function() { my code to append bottle})??
// slider
$("#products>article").on("click", function(){
$("#products>article").removeClass("active");
$(this).addClass("active");
animate();
});
function getActiveArticle(){
var x = 0;
$("#products>article").each(function(e){
if($("#products>article").eq(e).hasClass("active")){
x = e;
return false;
}
});
return x;
}
function gofwd(){
var activeIndex = getActiveArticle();
var minArticles = 0;
var maxArticles = $("#products>article").length - 1;
if(activeIndex >= maxArticles){
activeIndex = minArticles-1;
}
$("#products>article").removeClass("active");
$("#products>article").eq(activeIndex+1).addClass("active");
animate();
}
function gobwd(){
var activeIndex = getActiveArticle();
var minArticles = 1;
var maxArticles = $("#products>article").length;
$("#products>article").removeClass("active");
$("#products>article").eq(activeIndex-1).addClass("active");
animate();
}
$(document).ready(function(){
animate();
});
function animate(){
var articleIndex = getActiveArticle();
var totalMargin = 25 * (articleIndex+1) - (25*(articleIndex));
var articlePosition = Math.floor($("#products>article").eq(articleIndex).offset().left - $("#products").offset().left) - totalMargin;
var productsHalfWidth = $("#products").width()/2;
if(articleIndex == 0){
var halfWidth = 150;
}else{
var halfWidth = 100;
}
var finalPosition = productsHalfWidth - articlePosition - halfWidth;
$("#products").animate({
"left": finalPosition,
}, {
duration: 500,
easing: 'easeOutBack',
});
}
$(window).on("resize", function(){
animate();
});
var autoPlay = setInterval(function(){
gofwd();
}, 3500);
$("#slider").on("mouseenter", function(){
clearInterval(autoPlay);
});
$("#slider").on("mouseleave", function(){
autoPlay = setInterval(function(){
gofwd();
}, 4500);
});
// cans
const getElement = (selector) => document.querySelector(selector);
const createElement = (tag) => document.createElement(tag);
// const addBackground1 = document.style['background'] = 'url ("https://i.postimg.cc/BZ8rj2NM/sleve.png")';
const addSideStyle = ($side, i) => {
let deg = 3.75 * i;
let bgPosition = 972 - (i * 10.125);
$side.style['background-position'] = bgPosition + 'px 0';
$side.style['-webkit-transform'] = 'rotateY(' + deg + 'deg) translateZ(154px)';
$side.style['-moz-transform'] = 'rotateY(' + deg + 'deg) translateZ(154px)';
$side.style['transform'] = 'rotateY(' + deg + 'deg) translateZ(154px)';
};
const createBottle = () => {
const $bottle = createElement('div');
$bottle.classList.add('bottle');
const $bottleLabel = createBottleLabel();
for (let i = 0; i < 96; i = i + 1){
let $bottleSide = createBottleSide(i);
$bottleLabel.append($bottleSide);
}
$bottle.append($bottleLabel);
return $bottle;
};
const createBottleLabel = () => {
const $bottleLabel = createElement('div');
$bottleLabel.classList.add('label');
return $bottleLabel;
}
const createBottleSide = (i) => {
const $bottleSide = createElement('div');
$bottleSide.classList.add('side');
addSideStyle($bottleSide, i);
return $bottleSide;
};
const changeBottleSize = (clickFn) => {
const _bottle = createElement('div');
_bottle.classList.add('bottle');
_bottle.style['transform'] = 'scale(0.9)';
return _bottle;
}
const clickFn = () => {
const $bottleSize = getElement('.container');
// const $bottle1 = changeBottleSize();
// const $bottle2 = changeBottleSize();
// const $bottle3 = changeBottleSize();
$bottleSize.style['transform'] = 'scale(0.9)';
return $bottleSize;
}
$('#products article').each(function(index) {
$(this).append(initApp())
});
const initApp = (index) => {
const $container = getElement('.container');
const $bottle1 = createBottle();
const $bottle2 = createBottle();
const $bottle3 = createBottle();
[$bottle1, $bottle2, $bottle3].forEach(($bottle, i) => {
$bottle.classList.add('bottle' + i);
});
$container.append($bottle1, $bottle2, $bottle3);
};
initApp();
* {
padding: 0;
margin: 0;
font-family: "Arial";
box-sizing: border-box;
}
body {
background-color: #444;
}
#slider {
position: relative;
overflow: hidden;
width: 90vw;
height: 750px;
margin: 50px auto;
background-color: rgba(255, 255, 255, .5);
}
#products {
position: relative;
display: flex;
width: 100%;
height: 100%;
align-items: center;
padding: 0 25px;
}
#products>article:first-child {
margin-left: 0;
}
#products>article {
position: relative;
min-width: 250px;
min-height: 250px;
margin-left: 25px;
font-size: 17px;
cursor: pointer;
/* background-color: rgba(255,0,0,.5); */
transition: all .3s ease-in-out;
}
#products>article.active {
min-width: 300px;
min-height: 300px;
font-size: 20px;
}
#picText {
position: absolute;
color: #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
#id {
color: #fff;
margin: 15px;
}
#gofwd,
#gobwd {
position: absolute;
top: 50%;
padding: 50px 15px;
z-index: 1;
cursor: pointer;
background-color: rgba(255, 255, 255, .6);
transform: translateY(-50%);
transition: all .3s ease-out;
}
#gofwd:hover,
#gobwd:hover {
background-color: #fff;
}
#gobwd {
left: 0;
}
#gofwd {
right: 0;
}
.can {
position: relative;
}
.bottle:hover {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)
/* translate3d(350px, 190px, 40px) */
scale(0.7);
}
.bottle {
transition: all 0.2s;
width: 10.125px;
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(650px, 190px, 40px);
-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(650px, 190px, 40px);
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(350px, 190px, 40px);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
transform: scale(0.2);
position: absolute;
}
.bottle0 {
top: 40px;
left: 100px;
}
.bottle1 {
top: 100px;
left: 500px;
}
.bottle2 {
top: 100px;
left: 700px;
}
.bottle>img {
position: absolute;
top: -180px;
left: -182px;
width: 374px;
}
.label {
-webkit-animation: spin 10s infinite linear;
-moz-animation: spin 10s infinite linear;
animation: spin 10s infinite linear;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
}
.side {
position: absolute;
width: 10.55px;
height: 679px;
margin-bottom: 400px;
}
.bottle0 .side {
background: url("https://i.postimg.cc/BZ8rj2NM/sleve.png");
}
.bottle1 .side {
background: url("https://i.postimg.cc/Fs2RgnN6/passion.png");
}
.bottle2 .side {
background: url("https://i.postimg.cc/zGzJjm40/raspberry.png");
}
#-webkit-keyframes spin {
from {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
#-moz-keyframes spin {
from {
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-moz-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
#keyframes spin {
from {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(-360deg);
-moz-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
#mixin makeSide() {}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="slider">
<span id="gofwd" onClick="gofwd();">></span>
<span id="gobwd" onClick="gobwd();"><</span>
<div id="products">
<article class="active">
<div class="container"></div>
</article>
<article>
<div class="container">
<p id="id">2</p>
</div>
</article>
<article>
<div class="picture">
<p id="id">3</p>
</div>
</article>
<article>
<div class="picture">
<p id="id">4</p>
</div>
</article>
<article>
<div class="picture">
<p id="id">5</p>
</div>
</article>
<article>
<div class="picture">
<p id="id">6</p>
</div>
</article>
<article>
<div class="picture">
<p id="id">7</p>
</div>
</article>
<article>
<div class="picture">
<p id="id">8</p>
</div>
</article>
<article>
<div class="picture">
<p id="id">9</p>
</div>
</article>
<article>
<div class="picture">
<p id="id">10</p>
</div>
</article>
</div>
</div>

If you look at your Javascript Console you should the following error:
you crated the initApp function as a const after calling it, that won't work. You have two options:
move the const initApp up, or
declare it a function like this:
function initApp(index){
// …
}

CSS Transition to specific location

I found an example, credit given to: http://jsfiddle.net/g9dn1a09/ and I am trying to modify it so that the CSS element transitions when clicked to given coordinates and then repeats.
The issue I am having is that my code is transitioning the element to different than needed coordinates.
How can I make this happen?
Thank you
JavaScript
var $box = $('.box'),
$btn = $('.toggle');
$box.on('click', function() {
var $this = $(this);
if ($this.hasClass('right')) {
$this.removeClass('right').addClass('down');
}
else if ($this.hasClass('down')) {
$this.removeClass('down').addClass('left');
}
else if ($this.hasClass('left')) {
$this.removeClass('left').addClass('up');
}
else if ($this.hasClass('up')) {
$this.removeClass('up').addClass('right');
}
else {
$this.addClass('right');
}
});
CSS
.box {
width: 50px;
height: 50px;
background-color: blue;
transition: transform 1s;
}
.right {
-webkit-transform-origin: 100% 50%;
transform: translateX(100px);
}
.down {
-webkit-transform-origin: 100% 50%;
transform: translatey(100px);
}
.left {
-webkit-transform-origin: 100% 50%;
transform: translatex(100px);
}
.up {
-webkit-transform-origin: 100% 50%;
transform: translatey(0px);
}
HTML
<div class="box"></div>

You need to cumulate the translation and not define a new one each time because you will simply reconsider the initial state and you won't have any continuity in your mouvement:
var $box = $('.box'),
$btn = $('.toggle');
$box.on('click', function() {
var $this = $(this);
if ($this.hasClass('right')) {
$this.removeClass('right').addClass('down');
} else if ($this.hasClass('down')) {
$this.removeClass('down').addClass('left');
} else if ($this.hasClass('left')) {
$this.removeClass('left').addClass('up');
} else if ($this.hasClass('up')) {
$this.removeClass('up').addClass('right');
} else {
$this.addClass('right');
}
});
.box {
width: 50px;
height: 50px;
background-color: blue;
transition: transform 1s;
}
.right {
transform: translateX(100px) translateY(0);
}
.down {
transform: translateX(100px) translateY(100px);
}
.left {
transform: translateX(0) translateY(100px);
}
.up {
transform:translateX(0) translateY(0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>