Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Mobile Phone Mockup Animation

Recommended Posts

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:


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

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


I would be very happy about tips!

Link to comment
Share on other sites

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.



  • Like 3
Link to comment
Share on other sites

  • 1 year later...

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?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.