Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
componentDidMount(props) {
let membershipId = this.state.membershipId;
// If the user reloads or visits this page with a copied address,
// then use the query parameters for our requests.
if (this.props.membershipId === '') {
let parsed = queryString.parse(this.props.location.search);
membershipId = parsed.membershipId;
this.fetchCharacterData(parsed.platform, parsed.membershipId);
} else {
this.fetchCharacterData(this.props.platform, this.props.membershipId);
}
const characterList = document.querySelector('.character-select');
anime({
targets: characterList,
duration: 1000,
easing: 'easeInOutQuart',
opacity: [0, 1],
translateY: [20, 0]
})
}
async function animateLibraries(deck) {
// create a tween from enterProgress=0 to enterProgress=1
const animation = anime({
duration: librariesAnimation.duration,
targets: librariesAnimation,
enterProgress: 1,
easing: 'linear',
update() {
// each tick, update the DeckGL layers with new values
updateLayers(deck);
},
});
updateLayers(deck);
// wait for the animation to finish
await animation.finished;
}
translateY: '40px',
color: [
{ value: '#FF0000', duration: 2000 },
{ value: '#00FF00', duration: 2000 },
{ value: '#0000FF', duration: 2000 },
],
duration: () => {
return 1000000000000;
},
update: callback,
complete: callback
});
const someNodes = document.querySelector('button');
const test3 = anime({
targets: someNodes,
top: "-5000000em"
});
const tl = anime.timeline({
loop: false,
direction: 'normal'
});
tl.add({
targets: ".tiny-divvy-div",
scale: 10000000
});
const path = anime.path('#motionPath path');
exit () {
const { energy } = this.props;
const paths = this.svgElement.querySelectorAll('path');
anime({
targets: paths,
strokeDashoffset: [0, getPathLength],
easing: 'linear',
duration: energy.duration.exit
});
anime({
targets: this.backgroundElement,
easing: 'linear',
opacity: [1, 0],
duration: energy.duration.enter
});
}
setupAnime() {
anime(this.getContainerOptions())
if (this.options.loop) {
anime(
Object.assign({}, this.getAnimeDefaultOptions(this.childrens), {
loop: true,
delay: (el, i) => i * this.options.duration
})
)
} else {
const childrens = this.childrens.map((el, index) => {
if (index === this.childrens.length - 1) {
return Object.assign(this.getAnimeDefaultOptions(el), {
opacity: [[0, 1], 1],
loop: false
})
}
return Object.assign(this.getAnimeDefaultOptions(el), {
loop: false
})
return 60 * i
}
})
.add({
translateY: ['-0.7em', 0],
easing: 'easeOutExpo',
opacity: [0, 1],
endDelay: 700
})
.add({
translateY: [0, '0.4em'],
easing: 'easeInExpo',
opacity: [1, 0]
})
} else {
anime({
targets: this.chars,
translateY: ['-0.7em', 0],
opacity: [0, 1],
easing: 'easeOutExpo',
duration: this.options.duration,
loop: false,
delay(el, i) {
return 60 * i
}
})
}
}
}
getAnimationStyles (animationState = AnimationStates.ENTER) {
const {
duration,
sequence
} = this.props
const animation = sequence.reduce((styles, seq) => {
return Object.assign(
styles,
this.getAnimationStylesFromSequence(seq, animationState)
)
}, {})
if (!Object.keys(animation).length) return null
return anime(Object.assign(
{
targets: this.node,
duration
},
animation))
}
setupAnime() {
anime(this.getContainerOptions())
if (this.options.loop) {
anime(
Object.assign({}, this.getAnimeDefaultOptions(this.childrens), {
loop: true,
delay: (el, i) => i * this.options.duration
})
)
} else {
const childrens = this.childrens.map((el, index) => {
if (index === this.childrens.length - 1) {
return Object.assign(this.getAnimeDefaultOptions(el), {
opacity: [[0, 1], 1],
translateY: [{ value: this.DOWNTOMID }, { value: 0 }],
loop: false
})
}
return Object.assign(this.getAnimeDefaultOptions(el), {
loop: false
enter () {
const { energy, sounds, animateY, onEnter } = this.props;
const { duration } = energy;
sounds.fade.play();
anime({
targets: this.element,
easing: 'easeOutCubic',
keyframes: [
{ opacity: 1, duration: duration.enter / 3 },
{ opacity: 0, duration: duration.enter / 5 },
{ opacity: 1, duration: duration.enter / 2 }
],
complete: () => onEnter && onEnter()
});
if (animateY) {
anime({
targets: this.element,
easing: 'easeOutCubic',
translateY: [-10, 0],
duration: duration.enter