iimatos Posted December 9, 2022 Share Posted December 9, 2022 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 Link to comment Share on other sites More sharing options...
Solution alig01 Posted December 9, 2022 Solution Share Posted December 9, 2022 Hey, you could do something like this for the scaling part See the Pen gOKywXr?editor by alig01 (@alig01) on CodePen Hope this helps. 4 Link to comment Share on other sites More sharing options...
iimatos Posted December 10, 2022 Author Share Posted December 10, 2022 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. Link to comment Share on other sites More sharing options...
alig01 Posted December 10, 2022 Share Posted December 10, 2022 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. 1 Link to comment Share on other sites More sharing options...
iimatos Posted December 10, 2022 Author Share Posted December 10, 2022 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. Link to comment Share on other sites More sharing options...
alig01 Posted December 10, 2022 Share Posted December 10, 2022 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 Link to comment Share on other sites More sharing options...
GreenSock Posted December 10, 2022 Share Posted December 10, 2022 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. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now