Greetings!
I am attempting to replicate this simple tween example using scrollmagic.js. It functions properly on jsfiddle. To confirm, I added scene.addIndicators() to observe the start, end, and trigger hook. It functions flawlessly. As displayed in the jsfiddle:
<div class="container" style="height:1000px;">
<div class="spacer" style="height:400px;">
Scroll Down
</div>
<div id="trigger1"></div>
<div id="animate1">Hello World!</div>
</div>
I attempted adjusting the height of the container and spacer to various large values and the trigger hook still remained in the center. This was ideal. However, when I tried replicating it on my local machine using Sublime, I encountered an issue. Setting the spacer to a large value caused the trigger hook to appear at the bottom of the page. This would obstruct the visibility of the tween animations. Has anyone else faced this issue before? I suspect there may be an error in my local setup since it functions correctly on jsfiddle. I have already reached out to the scrollmagic contributor. What could be the reason for this discrepancy?
Thank you in anticipation.