juliangarnier / anime

JavaScript animation engine
https://animejs.com
MIT License
50.42k stars 3.68k forks source link

Problem with seek function #819

Open solangeDev opened 2 years ago

solangeDev commented 2 years ago

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);
};
Pulse-Git commented 2 years ago

@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