How to make the small div that simulates a site changes to full viewport?

[iimatos]

I'd like to make a similar effect, but I can't get the scale right.

 

https://www.thiagodesigner.com/

See the Pen LYrvpzd by iimatos (@iimatos) on CodePen

[alig01]

Hey,

 

you could do something like this for the scaling part 

 

See the Pen gOKywXr?editor by alig01 (@alig01) on CodePen

 

Hope this helps.

[iimatos]

It's almost what I want, but is there a way to fit the small page perfectly into the viewport? I'd like to code another page inside.

But that's really good thanks.

[alig01]

I'm not sure if you can always fit it perfectly, but I would try to create the other side first.

Then see what would be possible. Maybe move the elements in x/y direction or use transform-origin, but someone else is probably a better help here.

 

But definitely look around and get familiar with the library.

 

Good look.

[iimatos]

10 minutes ago, alig01 said:

I'm not sure if you can always fit it perfectly, but I would try to create the other side first.

Then see what would be possible. Maybe move the elements in x/y direction or use transform-origin, but someone else is probably a better help here.

 

But definitely look around and get familiar with the library.

 

Good look.

By the other side you mean that I should create the small page first than scale down to fit it on png?

 

I was trying to go full vanilla. Because I thought scrollTrigger was a paid plugin.
 

I am going to take a look on it now.

[alig01]

ScrollTrigger should be freely available. 
Everything below "Club Greenstock" is a paid plugin (Overview of the plugins). 

 

What I meant is, first create the other page that you want to have inside the image. Center it so everything is inline and then see afterwards how to improve it further. You can position many things already with css without scaling anything down. 

And after that you can probably move your page/notebook in x/y direction or do some other tricks.

 

But like I said, maybe someone else can better help

[GreenSock]

9 hours ago, iimatos said:

is there a way to fit the small page perfectly into the viewport? I'd like to code another page inside.

Sorry, I don't really know what you mean. Can you please be very specific and provide a clear minimal demo? As far as fitting things, that sounds like a CSS thing, but maybe I'm misunderstanding. Flip plugin as a Flip.fit() method too, just in case that helps.