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);
};