Scrollmagic: Manually Setting A Scene's Progress Not Working

Created on 23 Oct 2015  路  2Comments  路  Source: janpaepke/ScrollMagic

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

Most helpful comment

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

All 2 comments

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);
  }
}
Was this page helpful?
0 / 5 - 0 ratings