Hi all,
Thanks for amazing plugin, been waiting for a long time.
As per my understanding we can use st.scroll() method to get/set the position.
I used to jump to a progress using this method earlier in ScrollMagic. (See how I get the triggerPosition and add it to progress * duration)
this.controller.scrollTo(this.controller.Scene.triggerPosition() + progress * this.controller.Scene.duration());
This is my code
this.controller = ScrollTrigger.create({
trigger: '.how-it-works',
animation: this.howitworksTimeline,
pin: true,
start: 'top top',
end: '+=500%',
scrub: true,
markers: { startColor: 'green', endColor: 'red', fontSize: '12px' }
});
const progress = this.progressMap(idx);
const top = this.howitworksController.start + (progress * 5000);
window.scrollTo({ top, behavior: 'smooth' });
I have written 5000 explicitly as I know scene duration. How do I programmatically get scene duration?
EDIT: I figured it out, Here is the solution:
const progress = this.progressMap(idx);
const top = this.howitworksController.start + (progress * (this.howitworksController.end - this.howitworksController.start));
window.scrollTo({ top, behavior: 'smooth' });
* .end - .start is the duration for the scene so this should work fine.
Thanks again!