anime
anime copied to clipboard
Problem with seek function
How run seek function from percentage scroll specific? For example my landing have 7 section each one of then has 100vh, I want run seek from 3th section to 4th section. (between two scroll points) starts at 37 percentage and finish at 47 percentage according my calculations. This code is inside 3th section.
const basicTimeline = anime.timeline({ direction: 'normal', loop: 1, autoplay: false, easing: 'easeInOutQuad' }); basicTimeline.add({ targets: ['.warehouse'], keyframes: [ { scale: 1, left: '34%' }, { scale: 2, left: '49%' }, { scale: 1, left: '34%' } ], begin: function (anim) {} }); basicTimeline.add({ targets: '.product', keyframes: [ { scale: 1, bottom: '488px' }, { scale: 2, bottom: '488px' }, { scale: 1, bottom: '488px' } ] }); basicTimeline.add({ targets: '.rrhh', keyframes: [ { scale: 1, right: '0%' }, { scale: 2, right: '21%' }, { scale: 1, right: '0%' } ] }); basicTimeline.add({ targets: '.shop', keyframes: [ { scale: 1, bottom: '14%', right: '15%' }, { scale: 2, bottom: '20%', right: '15%' }, { scale: 1, bottom: '14%', right: '15%' } ], update: function (anim) { } });
window.onscroll = () => {
const progress = scrollPercent();
setProgress(progress);
basicTimeline.seek((progress / 100) * basicTimeline.duration);
};
@solangeDev dont know what scrollPercent() does but if it returns an value between 0 and 1, you are currently dividing it by 100 which will result in an wrong value: eg: 0.5 / 100 = 0.005 which you than multiply by the animation duration