I have come across an issue using fullPage.js and ScrollMagic when trying to achieve the below output https://drive.google.com/file/d/1uS21T4rjQfhm0ZIYUShMBI2-jHT0evxC/view
This is working flawlessly in the normal scrolling.
Code I'm using
HTML5
<div id="fullpage">
<div class="section" id="section0">
section 1 content
</div>
<div class="section section-one" id="section1">
<h1 class="header-class">Hands on activity</h1>
<div class="abcde" style="background-color: darkgoldenrod; overflow: hidden">
<div class="left-holder" style="display: block; float:left; width: 15%;">
<p>Terry's sent you a business card for a new customer she has just singed up. Let's add them into Terry's client file.</p>
<p>Pre request goes here</p>
<br /><br />
<div class="instruction" style="height: 450px; background-color: yellow; display: block;">
<<< Start of Instructions >>><br/><br/><br/>content goes here<br/><br/><br/>
content goes here<br/><br/><br/>content goes here<br/><br/><br/>content goes here<br/><br/><br/>
content goes here<br/><br/><br/>content goes here<br/><br/><br/>
content goes here<br/><br/><br/>content goes here<br/><br/><br/>
<<< End of Instructions >>>
</div>
</div>
<div id="iframe-holder" style="float: right; width: 80%; height: 750px; background-color: yellowgreen">iframe content goes here ... </div>
</div>
<div style="margin-top:300px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultricies ipsum vitae sapien tincidunt bibendum. Aliquam tempor cursus
</div>
</div>
<div class="section" id="section2">
<div class="intro">
<h1>No limitations!</h1>
<p>Content is a priority. Even if it is so large :)</p>
</div>
</div>
</div>
JS
(function ($) {
var realHeight = $('.instruction')[0].scrollHeight;
var height = $('.instruction').height();
var scrollableHeight = realHeight - height;
var offset = $('.header-class').outerHeight(true) - 10;
var containerN = new ScrollMagic.Controller({container: "#section1"});
var scene = new ScrollMagic.Scene({ offset: offset, duration: scrollableHeight})
.addTo(containerN)
.setPin(".abcde");
$('#fullpage').fullpage({
});
}(jQuery))
