Scrollmagic: Dynamically generated scenes, update duration?

Created on 11 Feb 2019  Â·  4Comments  Â·  Source: janpaepke/ScrollMagic

Hello, I've got some scenes that are being generated in a loop like so:

var $sceneDiv = $( this );
$(  '.scene-div'  ).each( function(){
  var scene = new ScrollMagic.Scene( { triggerElement: $sceneDiv } )
    .addTo( _scrollController )
    // logging to see if the duration changes on enter/leave
    .on('enter', function (event) {
        console.log( 'enter ' + this.duration() ); })
    .on('leave', function (event) {
        console.log( 'leave ' + this.duration() ); });
}

Those divs are later updated dynamically via ajax _(on scroll, thankyouverymuch)_ and content is added, changing the height of the div.

Since my scenes are generated in the loop, they don't have unique names for me to target and call .duration() on.

I've attempted to work around this by adding them to an object with a unique key, like so:

_sceneRepository[ $id ] = scene;

I then try to target them like so:

var thisScene = _sceneRepository[ $id ];
// new content is appended to $(  '.scene-div'  ) …
var updateDuration = $(  '.scene-div'  ).outerHeight();
thisScene.duration( updateDuration );
_scrollController.updateScene( thisScene );

And while it may seem to have worked when I log…

console.log(thisScene.duration());

…the scene still ends at the duration that it was set at initially before content was added.

Is there a way I can target/update those scenes or their duration that I'm missing?
Thanks in advance.

Most helpful comment

For anyone who comes here looking for a solution of some sort for updating duration in a loop on window resize, I was able to figure it out after way too much time.
https://codepen.io/shikkaba/pen/bGGPwWj

All 4 comments

@rynokins I know you posted this ages ago, but did you find a solution? I'm pretty much in need of this exact thing, except the duration needs to be changed on window resize instead of when an ajax call is made.

I wound up giving in and going with @michalsnik's excellent AOS library instead, which served my purposes more directly.

@rynokins Thank you for this. Sorry, I hope I wasn't bothering you. By the way, your work is amazing.

For anyone who comes here looking for a solution of some sort for updating duration in a loop on window resize, I was able to figure it out after way too much time.
https://codepen.io/shikkaba/pen/bGGPwWj

Was this page helpful?
0 / 5 - 0 ratings

Related issues

pascaloliv picture pascaloliv  Â·  3Comments

ravitdx picture ravitdx  Â·  3Comments

danbohea picture danbohea  Â·  4Comments

neelamk picture neelamk  Â·  4Comments

maziarz picture maziarz  Â·  7Comments