Menu
Hi guys, I wrote this function but for some reason, it doesn’t work and I also do not get an error.
Do you know why?
``<i>
</i> // card.style.transform = perspective(1000px) rotateX(${rotateX}deg rotateY(${rotateY}deg));
card.style.transform = perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg);<i>
</i>``card.offsetTopcard.style.top>The HTMLElement.offsetTop read-only property returns the distance of the outer border of the current element relative to the inner border of the top of the offsetParent node.
``<i>
</i> const cardTilt = () => {
const cards = document.querySelectorAll(".card");
cards.forEach((card, event) => {
const cardMouseMove = (event) => {
const boundingRect = card.getBoundingClientRect();
const cardWidth = card.offsetWidth;
const cardHeight = card.offsetHeight;
const centerX = boundingRect.left + cardWidth / 2;
const centerY = boundingRect.top + cardHeight / 2;
const mouseX = event.clientX - centerX;
const mouseY = event.clientY - centerY;
const rotateX = (+1 * 25 * mouseY) / (cardHeight / 2);
const rotateY = (-1 * 25 * mouseX) / (cardWidth / 2);
// card.style.transform = perspective(1000px) rotateX(${rotateX}deg rotateY(${rotateY}deg));
card.style.transform = perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg);
};
card.addEventListener("mousemove", cardMouseMove);
});
};
cardTilt();<i>
</i>````<i>
</i> const setTransition = () => {
card.style.transition =
"transform 300ms cubic-bezier(.03, .98, .52, .99)";
clearTimeout(card.transitionTimeoutId);
card.transitionTimeoutId = setTimeout(() => {
card.style.transition = "";
}, 300);
};<i>
</i>````<i>
</i> const stepDelay = 50,
aniDuration = 300,
aniEasing = 'ease-in-out',
colOdd = '#9f9fed',
colEven = '#736ced',
colBase = 'white';
const logo = document.querySelector('#svg-logo');
const paths = document.querySelectorAll('#svg-logo path');
const aniKfEven = [
{ fill: colEven }
];
const aniKfOdd = [
{ fill: colOdd }
];
const aniKfRev = [
{ fill: colBase }
];
// Animation forwards: Colorize paths one by one
function makeAnimation() {
for (let i = 0; i < paths.length; i++) {
const aniKf = i % 2 ? aniKfOdd : aniKfEven;
const aniOpt = {
delay: i * stepDelay,
duration: aniDuration,
iterations: 1,
fill: 'forwards',
direction: 'normal',
easing: aniEasing
};
ani = paths[paths.length - i - 1].animate(aniKf, aniOpt);
ani.play();
}
}
// Animation backwards: Remove colors from paths one by one
function makeAnimationRev() {
for (let i = 0; i < paths.length; i++) {
const aniKf = aniKfRev;
const aniOpt = {
delay: i * stepDelay,
duration: aniDuration,
iterations: 1,
fill: 'forwards',
direction: 'normal',
easing: aniEasing
};
ani = paths[i].animate(aniKf, aniOpt);
ani.play();
}
}
logo.addEventListener('mouseover', makeAnimation);
logo.addEventListener('mouseout', makeAnimationRev);<i>
</i>````<i>
</i> const logo = document.querySelector('#svg-logo');
const paths = document.querySelectorAll('#svg-logo path');<i>
</i>````<i>
</i> const stepDelay = 50,
aniDuration = 300,
aniEasing = 'ease-in-out',
colOdd = '#9f9fed',
colEven = '#736ced',
colBase = 'white';
const logo = document.querySelector('#svg-logo');
const paths = document.querySelectorAll('#svg-logo path');
const aniKfEven = [
{ fill: colEven }
];
const aniKfOdd = [
{ fill: colOdd }
];
const aniKfRev = [
{ fill: colBase }
];<i>
</i>`</CODE>
As here are the changes I wanna make. But I need to replace the paths,length with the new paths const, for ex <C>preloaderPaths</C>.
I tried adding paths as a parameter like this <C>makeAnimation(paths)` but if I do that the function won't work anymore.The original function won't work``<i>
</i> function aniWrapper(
selContainer, // the selector of the container for the SVG or logo
duration, // the duration
colOdd, // color for odd paths
colEven, // color for even paths
colBase, // base color
mode // mode, 'forwards' or 'backwards'
) {
const stepDelay = 50;
// Get DOM element of the container (SVG):
const logo = document.querySelector(selContainer);
// Get paths inside that container:
const paths = logo.querySelectorAll('#svg-logo path');
const aniKfEven = [
{ fill: colEven }
];
const aniKfOdd = [
{ fill: colOdd }
];
const aniKfRev = [
{ fill: colBase }
];
function makeAnimation() {
for (let i = 0; i < paths.length; i++) {
const aniKf = i % 2 ? aniKfOdd : aniKfEven;
const aniOpt = {
delay: i * stepDelay,
duration: aniDuration,
iterations: 1,
fill: 'forwards',
direction: 'normal',
easing: aniEasing
};
ani = paths[paths.length - i - 1].animate(aniKf, aniOpt);
ani.play();
}
}
function makeAnimationRev() {
for (let i = 0; i < paths.length; i++) {
const aniKf = aniKfRev;
const aniOpt = {
delay: i * stepDelay,
duration: aniDuration,
iterations: 1,
fill: 'forwards',
direction: 'normal',
easing: aniEasing
};
ani = paths[i].animate(aniKf, aniOpt);
ani.play();
}
}
// Start animation according mode:
if (mode == 'forwards') {
makeAnimation();
} else {
makeAnimationRev();
}
}<i>
</i> ``>am I just copping the wrapper function with the const and jut call the make animation?
``<i>
</i><svg id="svg-1">markup of the first svg here</svg>
<svg id="svg-2">markup of the second svg here</svg>
<script>
function aniWrapper(
// parameters as posted above
) {
// body as posted above
}
// Calling the wrapper function like this will animate the first logo forwards:
aniWrapper('#svg-1', 300, 'blue', 'lightblue', 'white', 'forwards');
</script><i>
</i>````<i>
</i>const logoAnimation = (logoContainer, logoPaths) => {
const logo = document.querySelector(logoContainer);
const paths = document.querySelectorAll(logoPaths);
const stepDelay = 50;
const animationDuration = 150;
const animationEasing = "ease-in-out";
const evenColor = "#736ced";
const oddColor = "#9f9fed";
const baseColor = "white";
const evenKeyframes = [{ fill: evenColor }];
const oddKeyframes = [{ fill: oddColor }];
const reversKeyframes = [{ fill: baseColor }];
const forwardAnimation = () => {
for (let i = 0; i < paths.length; i++) {
const animationKeyframes = i % 2 ? oddKeyframes : evenKeyframes;
const animationOption = {
delay: i * stepDelay,
duration: animationDuration,
iterations: 1,
fill: "forwards",
direction: "normal",
easing: animationEasing,
};
animation = paths[paths.length - i - 1].animate(
animationKeyframes,
animationOption
);
animation.play();
}
};
const reverseAnimation = () => {
for (let i = 0; i < paths.length; i++) {
const animationKeyframes = reversKeyframes;
const animationOption = {
delay: i * stepDelay,
duration: animationDuration,
iterations: 1,
fill: "forwards",
direction: "normal",
easing: animationEasing,
};
animation = paths[paths.length - i - 1].animate(
animationKeyframes,
animationOption
);
animation.play();
}
};
logo.addEventListener("mouseover", forwardAnimation);
logo.addEventListener("mouseout", reverseAnimation);
};
logoAnimation("svg-logo-animated", "svg-logo-animated path");<i>
</i>``logoAnimation("#svg-logo-animated", "#svg-logo-animated path");```<i>
</i>const preloaderAnimation = () => {
logoAnimation("#preloader-logo", "#preloader-logo paths");
};
preloaderAnimation();<i>
</i>``mode```<i>
</i> <section>
<svg id="svg-logo" width="388" height="233" viewBox="0 0 388 233" fill="none"
xmlns="http://www.w3.org/2000/svg">
<!-- content as previously used -->
</svg>
<svg id="svg-loader" width="388" height="233" viewBox="0 0 388 233" fill="none"
xmlns="http://www.w3.org/2000/svg">
<!-- content as previously used -->
</svg>
</section>
<script>
class animateSvg {
// Constructor: This function is called once when the object is created:
constructor(
selContainer, // the selector of the container for the SVG or logo
duration, // the duration
colOdd, // color for odd paths
colEven, // color for even paths
colBase
) {
this.stepDelay = 50;
// Get DOM element of the container (SVG):
this.logo = document.querySelector(selContainer);
// Get paths inside that container:
this.paths = this.logo.querySelectorAll('path');
this.aniDuration = duration;
this.aniEasing = 'ease-in-out';
this.aniKfEven = [
{ fill: colEven }
];
this.aniKfOdd = [
{ fill: colOdd }
];
this.aniKfRev = [
{ fill: colBase }
];
}
makeAnimation() {
for (let i = 0; i < this.paths.length; i++) {
const aniKf = i % 2 ? this.aniKfOdd : this.aniKfEven;
const aniOpt = {
delay: i * this.stepDelay,
duration: this.aniDuration,
iterations: 1,
fill: 'forwards',
direction: 'normal',
easing: this.aniEasing
};
const ani = this.paths[this.paths.length - i - 1].animate(aniKf, aniOpt);
ani.play();
}
}
makeAnimationRev() {
for (let i = 0; i < this.paths.length; i++) {
const aniKf = this.aniKfRev;
const aniOpt = {
delay: i * this.stepDelay,
duration: this.aniDuration,
iterations: 1,
fill: 'forwards',
direction: 'normal',
easing: this.aniEasing
};
const ani = this.paths[i].animate(aniKf, aniOpt);
ani.play();
}
}
makeAnimationBack() {
for (let i = 0; i < this.paths.length; i++) {
const aniKf = this.aniKfRev;
const aniOpt = {
delay: i * this.stepDelay,
duration: this.aniDuration,
iterations: 1,
fill: 'forwards',
direction: 'normal',
easing: this.aniEasing
};
const ani = this.paths[this.paths.length - i - 1].animate(aniKf, aniOpt);
ani.play();
}
}
}
// Create object for animating the logo:
const animateLogo = new animateSvg(
'#svg-logo', // the selector of the container for the logo
300, // the duration
'lightblue', // color for odd paths
'purple', // color for even paths
'white'
);
const logo = document.querySelector('#svg-logo')
logo.addEventListener('mouseover', event => {
animateLogo.makeAnimation();
});
logo.addEventListener('mouseout', event => {
animateLogo.makeAnimationRev();
});
// Create object for animating the loader:
const animateLoader = new animateSvg(
'#svg-loader', // the selector of the container for the loader
300, // the duration
'red', // color for odd paths
'lightsalmon', // color for even paths
'white'
);
const aniTime = 300;
function aniPhase1() {
// Animation phase 1
animateLoader.makeAnimation();
// After timeout: Start animation phase 2
setTimeout(aniPhase2, aniTime);
}
function aniPhase2() {
// Animation phase 2
animateLoader.makeAnimationBack();
// After timeout: Start animation phase 1
setTimeout(aniPhase1, aniTime);
}
aniPhase1();
</script><i>
</i>````<i>
</i>const logoAnimation = () => {
const wrapperFunction = (logoContainer, logoPaths) => {
const logo = document.querySelector(logoContainer);
const paths = document.querySelectorAll(logoPaths);
const stepDelay = 50;
const animationDuration = 150;
const animationEasing = "ease-in-out";
const evenColor = "#736ced";
const oddColor = "#9f9fed";
const baseColor = "white";
const evenKeyframes = [{ fill: evenColor }];
const oddKeyframes = [{ fill: oddColor }];
const reversKeyframes = [{ fill: baseColor }];
const forwardAnimation = () => {
for (let i = 0; i < paths.length; i++) {
const animationKeyframes = i % 2 ? oddKeyframes : evenKeyframes;
const animationOption = {
delay: i * stepDelay,
duration: animationDuration,
iterations: 1,
fill: "forwards",
direction: "normal",
easing: animationEasing,
};
animation = paths[paths.length - i - 1].animate(
animationKeyframes,
animationOption
);
animation.play();
}
};
const reverseAnimation = () => {
for (let i = 0; i < paths.length; i++) {
const animationKeyframes = reversKeyframes;
const animationOption = {
delay: i * stepDelay,
duration: animationDuration,
iterations: 1,
fill: "forwards",
direction: "normal",
easing: animationEasing,
};
animation = paths[paths.length - i - 1].animate(
animationKeyframes,
animationOption
);
animation.play();
}
};
};
wrapperFunction("#preloader-logo", "#preloader-logo paths");
logo.addEventListener("mouseover", forwardAnimation);
logo.addEventListener("mouseout", reverseAnimation);
};
logoAnimation();<i>
</i>``logo```<i>
</i> // const logoAnimation = () => { Mod1: Remove wrapper
// const wrapperFunction = (logoContainer, logoPaths) => {
wrapperFunction = function (logoContainer, logoPaths) { // Mod2: Change syntax so the function can be used as a constructor
const logo = document.querySelector(logoContainer);
const paths = document.querySelectorAll(logoPaths);
const stepDelay = 50;
const animationDuration = 150;
const animationEasing = "ease-in-out";
const evenColor = "#736ced";
const oddColor = "#9f9fed";
const baseColor = "white";
const evenKeyframes = [{ fill: evenColor }];
const oddKeyframes = [{ fill: oddColor }];
const reversKeyframes = [{ fill: baseColor }];
// const forwardAnimation = () => {
this.forwardAnimation = () => { // Mod3: Make this function accessible from outside
for (let i = 0; i < paths.length; i++) {
const animationKeyframes = i % 2 ? oddKeyframes : evenKeyframes;
const animationOption = {
delay: i * stepDelay,
duration: animationDuration,
iterations: 1,
fill: "forwards",
direction: "normal",
easing: animationEasing,
};
animation = paths[paths.length - i - 1].animate(
animationKeyframes,
animationOption
);
animation.play();
}
};
// const reverseAnimation = () => {
this.reverseAnimation = () => { // Mod4: Make this function accessible from outside
for (let i = 0; i < paths.length; i++) {
const animationKeyframes = reversKeyframes;
const animationOption = {
delay: i * stepDelay,
duration: animationDuration,
iterations: 1,
fill: "forwards",
direction: "normal",
easing: animationEasing,
};
animation = paths[paths.length - i - 1].animate(
animationKeyframes,
animationOption
);
animation.play();
}
};
};
// Mod5: Create an object instead of simply calling the function
// Subsequently you will be able to call the functions from outside:
const animatePreloader = new wrapperFunction("#preloader-logo", "#preloader-logo path");
const preloader = document.querySelector('#preloader-logo');
// Mod6: Call forwardAnimation from object:
preloader.addEventListener("mouseover", animatePreloader.forwardAnimation);
// Mod7: Call reverseAnimation from object:
preloader.addEventListener("mouseout", animatePreloader.reverseAnimation);
// }; Mod1: Remove wrapper<i>
</i>``0.1.9 — BETA 5.13