Animation Scroll Library

Installing:

npm i --save animejs @crescendo-collective/anim-scroll;

``javascript
import @crescendo-collective/anim-scroll;
`

Examples:

$3

`javascript
addScene(document.querySelector('.hero'), (sceneConfig) => {
let widenOutAnim = anime.timeline({ autoplay: false, loop: true });

anime.set(sceneConfig.el, {
width: '20vw',
});
widenOutAnim.add({
targets: sceneConfig.el,
easing: 'linear',
width: '100vw',
});
sceneConfig.timelines.push({
start: 0.75,
end: 0.2,
timeline: widenOutAnim,
});

return sceneConfig;
});

`

$3

`html


`

`javascript
registerPresets('tipItem', {
tipEnter: (sceneConfig) => {
let tipItemAnim = anime.timeline({ autoplay: false, loop: true });

anime.set(sceneConfig.el, {
translateX: '-600',
scale: 0.5,
opacity: 0,
});

tipItemAnim.add({
targets: sceneConfig.el,
easing: 'linear',
translateX: '-90',
opacity: 1,
scale: 1,
});

sceneConfig.timelines.push({
start: 0.6,
end: 0.4,
timeline: tipItemAnim,
});

return sceneConfig;
},

tipEnterRight: (sceneConfig) => {
let tipItemAnim = anime.timeline({ autoplay: false, loop: true });

anime.set(sceneConfig.el, {
translateX: '200',
scale: 0.5,
});

tipItemAnim.add({
targets: sceneConfig.el,
easing: 'linear',
translateX: '0',
scale: 1,
});

sceneConfig.timelines.push({
start: 0.6,
end: 0.4,
timeline: tipItemAnim,
});

return sceneConfig;
},
});
``