<section id="waapi-transform-ordering-2" class="animate-things-wrapper-b">
<div id="mains">
<div id="box" class="box">
Translate -> Rotate -> Scale
</div>
<div id="box2" class="box">
Scale -> Translate -> Rotate
</div>
<div id="box3" class="box">
Scale -> Rotate -> Translate
</div>
</div>
<div id="ghosts">
<div class="ghostBox">
A
</div>
<div class="ghostBox">
B
</div>
<div class="ghostBox">
C
</div>
</div>
<div class="controls">
<button id="trigger">Play</button>
<button id="pause">Pause</button>
<button id="reset">Set to start point</button>
<button id="halfway">Set to midway point</button>
<button id="end">Set to end point</button>
<input type="range" id="scrubber" name="scrubber" min="0" max="1" step="0.01">
</div>
</section>
<script src="../../js/components/waapi-transform-ordering-2.js"></script>
<section id="waapi-transform-ordering-2" class="animate-things-wrapper-b">
<div id="mains">
<div id="box" class="box">
Translate -> Rotate -> Scale
</div>
<div id="box2" class="box">
Scale -> Translate -> Rotate
</div>
<div id="box3" class="box">
Scale -> Rotate -> Translate
</div>
</div>
<div id="ghosts">
<div class="ghostBox">
A
</div>
<div class="ghostBox">
B
</div>
<div class="ghostBox">
C
</div>
</div>
<div class="controls">
<button id="trigger">Play</button>
<button id="pause">Pause</button>
<button id="reset">Set to start point</button>
<button id="halfway">Set to midway point</button>
<button id="end">Set to end point</button>
<input type="range" id="scrubber" name="scrubber"
min="0" max="1" step="0.01">
</div>
</section>
<script src="{{ path '/js/components/waapi-transform-ordering-2.js' }}"></script>
/* No context defined. */
(function () {
document.addEventListener('DOMContentLoaded', function () {
console.log("waapi-transform-ordering-2 active");
const button = document.querySelector('#trigger');
const pause = document.querySelector('#pause');
const halfway = document.querySelector('#halfway');
const end = document.querySelector('#end');
const reset = document.querySelector('#reset');
const scrubber = document.querySelector('#scrubber');
const box = document.querySelector('#box');
const box2 = document.querySelector('#box2');
const box3 = document.querySelector('#box3');
const animInA = [{
transformOrigin: 'center center',
transform: `translate(-100px, 0) rotate(90deg) scale(0.5, 0.5)`,
backgroundColor: 'rgba(222,161,161,0.49)'
}, {
transformOrigin: 'center center',
transform: 'translate(100px, 0) rotate(-90deg) scale(1.5, 1.5)',
backgroundColor: 'rgba(36,243,202,1)',
}];
const animInB = [{
transformOrigin: 'center center',
transform: `scale(0.5, 0.5) translate(-100px, 0) rotate(90deg) `,
backgroundColor: 'rgba(222,161,161,0.49)'
}, {
transformOrigin: 'center center',
transform: 'scale(1.5, 1.5) translate(100px, 0) rotate(-90deg) ',
backgroundColor: 'rgba(36,243,202,1)',
}];
const animInC = [{
transformOrigin: 'center center',
transform: `scale(0.5, 0.5) rotate(90deg) translate(-100px, 0) `,
backgroundColor: 'rgba(222,161,161,0.49)'
}, {
transformOrigin: 'center center',
transform: 'scale(1.5, 1.5) rotate(-90deg) translate(100px, 0) ',
backgroundColor: 'rgba(36,243,202,1)',
}];
const totalDuration = 3000;
const timingA = {
duration: totalDuration,
easing: 'cubic-bezier(.42,0,.58,1)',
iterations: 1,
fill: 'forwards',
delay: 0,
endDelay: 0
};
const timings = [
timingA,
];
timings.forEach((timing) => {
console.dir(timing);
timing.duration = totalDuration - timing.delay - timing.endDelay;
});
const boxAnim = box.animate(animInA, timingA);
boxAnim.pause();
const box2Anim = box2.animate(animInB, timingA);
box2Anim.pause();
const box3Anim = box3.animate(animInC, timingA);
box3Anim.pause();
const anims = [
boxAnim,
box2Anim,
box3Anim,
];
button.addEventListener('click', function () {
anims.forEach((anim) => anim.play());
});
pause.addEventListener('click', function () {
anims.forEach((anim) => anim.pause());
});
halfway.addEventListener('click', function () {
anims.forEach((anim) => {
anim.pause();
anim.currentTime = totalDuration / 2;
});
});
end.addEventListener('click', function () {
anims.forEach((anim) => {
anim.pause();
anim.currentTime = totalDuration;
});
});
reset.addEventListener('click', function () {
anims.forEach((anim) => {
anim.pause();
anim.currentTime = 0;
});
});
scrubber.addEventListener('input', function () {
anims.forEach((anim) => {
anim.pause();
anim.currentTime = scrubber.valueAsNumber * totalDuration;
})
})
});
})();
#waapi-transform-ordering-2 {
text-align: center;
&:after {
position: absolute;
top: 0;
bottom: 0;
left: calc(50% - 1px);
width: 2px;
background-color: gray;
content: "";
}
.controls {
position: fixed;
bottom: 0;
left: 0;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: normal;
> * {
margin-right: 1rem;
}
}
#box {
border: 2px solid #ff0000;
}
#box2 {
border: 2px solid #00ff00;
}
#box3 {
border: 2px solid #0000ff;
}
#ghosts,
#mains {
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
> * {
margin: 1rem;
}
.ghostBox {
border: 1px solid pink;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
height: 100px;
width: 100px;
}
}
}
No notes defined.