Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
componentDidUpdate () {
// Because we are re-rendering animated elements every time the component
// is updated, we need to re-start the animations or reset the elements.
this.startStandByAnimation();
anime.set(this.dotLinesContainer.childNodes, { strokeDasharray: '3 7' });
}
stopStandByAnimation () {
const { classes } = this.props;
const circuitLineLights = Array.from(
this.circuitContainer.querySelectorAll('.' + classes.circuitLineLight)
);
clearTimeout(this.standByStartId);
clearTimeout(this.standByAnimationId);
anime.remove(circuitLineLights);
circuitLineLights.forEach(circuitLineLight => {
circuitLineLight.removeAttribute('style');
});
anime.set(circuitLineLights, { opacity: 0 });
}
animateNormalEnter () {
const { energy, onEnter } = this.props;
const { duration } = energy;
const divisors = this.element.querySelectorAll('b');
const links = this.element.querySelectorAll('a');
anime.set(links, { opacity: 1 });
anime({
targets: divisors,
easing: 'easeOutCubic',
scaleY: [0, 1],
duration: duration.enter,
delay: (divisor, index) => index * duration.stagger,
complete: () => onEnter && onEnter()
});
}
reset () {
const { energy } = this.props;
const show = energy.entering || energy.entered;
const shapes = Array.from(this.svg.querySelectorAll('path'));
this.setState({ show });
shapes.forEach(shape => {
shape.removeAttribute('style');
shape.removeAttribute('stroke-dasharray');
shape.removeAttribute('stroke-dashoffset');
});
anime.set(this.element, { translateY: 0 });
anime.set(shapes, { opacity: show ? 1 : 0 });
}
reset () {
const { energy } = this.props;
const show = energy.entering || energy.entered;
const shapes = Array.from(this.svg.querySelectorAll('path'));
this.setState({ show });
shapes.forEach(shape => {
shape.removeAttribute('style');
shape.removeAttribute('stroke-dasharray');
shape.removeAttribute('stroke-dashoffset');
});
anime.set(this.element, { translateY: 0 });
anime.set(shapes, { opacity: show ? 1 : 0 });
}
reset () {
const { energy } = this.props;
const show = energy.entering || energy.entered;
const shapes = Array.from(this.svg.querySelectorAll('path'));
this.setState({ show });
shapes.forEach(shape => {
shape.removeAttribute('style');
shape.removeAttribute('stroke-dasharray');
shape.removeAttribute('stroke-dashoffset');
});
anime.set(this.element, { translateY: 0 });
anime.set(shapes, { opacity: show ? 1 : 0 });
}
begin: () => anime.set(path, { opacity: 1 }),
change: anim => {
enter () {
const shapes = Array.from(this.svg.querySelectorAll('path'));
const [ground, line1, slash1, line2, line3, slash2, line4] = shapes;
const duration = this.getDurationEnter();
anime.set(shapes, { opacity: 0 });
this.playSound();
anime({
targets: this.element,
translateY: ['100%', 0],
easing: 'easeOutCubic',
duration,
complete: () => this.stopSound()
});
anime({
targets: ground,
opacity: [0, 1],
easing: 'easeOutCubic',
duration,
const durationGroup2 = duration * scaleGroup2;
anime.set(shapesGroup2, { opacity: 1 });
anime({
targets: shapesGroup2,
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'linear',
delay: durationGroup1,
duration: durationGroup2
});
const shapesGroup3 = [line2, line3];
const scaleGroup3 = shapesGroup3[0].getTotalLength() / this.element.offsetWidth;
const durationGroup3 = duration * scaleGroup3;
anime.set(shapesGroup3, { opacity: 1 });
anime({
targets: shapesGroup3,
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'linear',
delay: durationGroup1,
duration: durationGroup3
});
}