Unable to re-initialize scrollmagic responsively

[leevh]

Hello, I was hoping someone might have some insight on what I might be doing wrong, or if perhaps this is a scrollmagic limitation. My attempts are based on the few threads here already trying similar solutions.

My designer has dictated slightly different layout/scroll animations on mobile vs desktop. So I have to make subtle html changes and re-initialize scrollmagic between mobile and larger screens. My problem is that no matter how much I try to "destroy" scrollmagic, kill tweens and remove inline styles, I cannot get a clean reset from which to re-initialize scrollmagic:

http://jsfiddle.net/leevh/bftx0v4d/ This fiddle attempts a full cleanup of scrollmagic. sliding it from mobile to desktop and back leaves everything in a very bad state :(

http://jsfiddle.net/leevh/dhs50j7w/ This fiddle doesn't attempt a cleanup, simply tries to re-initialize and overwrite. Works a bit better but pin-spacer divs become nested, and trying to cleanup only those causes JS errors.

Please note that I've removed all the extra code for the html refactor etc to keep it simpler. Any help would be greatly appreciated because I'm beginning to think I can't use scrollmagic for this use case :(

[leevh]

update:
When doing my cleanup, it seems that adding sceneArray[i].removeTween(); has helped a bit in resetting things. My fading text tweens now seem to reinitialise properly. Parallax still has issues properly re-initialising though.

I feel like I'm just missing a complete list of steps to cleaning up not only scenes and controllers but all the tweens attached to them. It also really seems like ScrollMagic isn't or isn't able to completely remove associated tweens on destroy.

[mateomm22]

Any update on this?

I'm having the same issue, when resizing to smaller everything works fine and the controller gets destroyed as planned, but when resizing back to desktop size, the controller is unable to re-initialize.