Mobile Phone Mockup Animation

[chrisbrenn]

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!

[PointC]

ScrollMagic isn't a GreenSock product. If you have a GSAP specific question or problem, we're happy to help.

 

BTW - GreenSock is currently working on a plugin which will offer all the functionality (and more) of ScrollMagic. Hopefully out in the next month or so.

 

Happy tweening.

  

[harrybrown]

I did something similar only in UI/UX. No code, just 3D animation. I added triggers - for a specific animation. It was necessary to make an animation that would turn on the screen when you tap. The main difficulty was to work out the animation schedule. At the output - all worked perfectly. This option, of course, is easier, cause I`ve not mastered the coding perfectly yet. In addition, I saw that the latest iPhone mockups came out. They have quite conservative but stylish designs. What do you think about them?