[Mobile Phone Mockup Animation]

Hey Guys!

So I just started with GSAP and I trying to create a Mobile Phone Mockup with scrolling Content inside (like e.g.) https://mockup-scroll.webflow.io/

 

So the part with previous and following element working for me (like sections before the "animation).

I currently have a problem to make the Pinned scene and be able to scroll inside and show div's after some "scrolling" time..

 

My current code is this:

 

<section>
	<div id="mockup-trigger"></div>
	<div id="mockup">
		content inside
	</div>
</section>

// pin scene
new ScrollMagic.Scene({duration: 1955, triggerElement: "#mockup-trigger", offset: 0})
.setPin("#mockup")
.addTo(controller);

 

I would be very happy about tips!