anime icon indicating copy to clipboard operation
anime copied to clipboard

Problem with seek function

Open solangeDev opened this issue 2 years ago • 1 comments

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 avatar Jun 20 '22 18:06 solangeDev

@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

Pulse-Git avatar Jun 28 '22 06:06 Pulse-Git