On my site I have a single Scene controlled by a single Controller. I call a function on the "progress" event which works out just great; however, I have attempted to manually change the Scene's progress upon an element's click event. I can see that the Scene's progress has changed to my liking, but as soon as I start mouse scrolling again the Scene's progress starts from where it previously left off, not where I had manually set it. If more information is needed, please feel free to ask
Currently i'm having this same issue.
Is it possible that such a simple case does not work correctly?
Still opened.
Guys, I had the same problem. I was using scene.progress(p) setter but scroll position didn't update. I also tried scene.refresh(), scene.update() and scene.update(true) but none of that worked.
And then I came up with working solution. I removed unnecessary details from my code but I hope the idea is clear, that you can use controller.scrollTo(scene.triggerPosition() + p * scene.duration()) to make it work.
/**
* create scene with 2-way progress binding
*/
import { Controller, Scene } from 'scrollmagic';
const controller = new Controller();
export default function (onUpdate) {
const scene = new Scene({...});
const onProgress = e => onUpdate(e.progress);
scene.on('progress', onProgress);
scene.addTo(controller);
return function setProgress(p) {
scene.off('progress', onProgress);
controller.scrollTo(scene.triggerPosition() + p * scene.duration());
setTimeout(() => {
scene.on('progress', onProgress);
}, 0);
}
}
Most helpful comment
Guys, I had the same problem. I was using
scene.progress(p)setter but scroll position didn't update. I also triedscene.refresh(),scene.update()andscene.update(true)but none of that worked.And then I came up with working solution. I removed unnecessary details from my code but I hope the idea is clear, that you can use
controller.scrollTo(scene.triggerPosition() + p * scene.duration())to make it work.