BebDev Posted November 1, 2022 Share Posted November 1, 2022 Hi guys, I'm currently trying to scale an element until its width/height matches the screen width/height. I managed to do that for the width, but the problem is that I can't set the transformOrigin value to be correctly calculated on all screen resolutions. Any help would be appreciated! Regards See the Pen vYrLRex by abanobakram (@abanobakram) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted November 1, 2022 Share Posted November 1, 2022 Sounds like a good time to use GSAP's FLIP plugin to 'flip' between two different positions 😎https://greensock.com/docs/v3/Plugins/Flip/ Link to comment Share on other sites More sharing options...
BebDev Posted November 1, 2022 Author Share Posted November 1, 2022 @Cassie Thanks so much. May I ask does this work with scrollTrigger? I mean I want the scale to happen on scroll. Does FLIP works with that? Thanks again! Link to comment Share on other sites More sharing options...
BebDev Posted November 1, 2022 Author Share Posted November 1, 2022 @Cassie I managed to set the width/height to the same as the browser window, but any idea how to make this to work on scroll using scrollTrigger? Regards Link to comment Share on other sites More sharing options...
Cassie Posted November 1, 2022 Share Posted November 1, 2022 Here you go, this thread should help! 1 Link to comment Share on other sites More sharing options...
BebDev Posted November 1, 2022 Author Share Posted November 1, 2022 @Cassie Thanks so much. This was so much helpful. Sorry for being a headache. I'm just one step away. As you can see in this pen, I managed to get everything to work fine, but I have one question. Can I make that to happen as a part of another timeline? So, what I want to happen on scroll is: 1- The image should rotate 360deg 2- Scale to window width/height 3- Change opacity to 0 Pin Thanks again for your help. Link to comment Share on other sites More sharing options...
Rodrigo Posted November 1, 2022 Share Posted November 1, 2022 Hi, I think is best to just calculate the scale values needed to stretch the image or a container with the image as a background than using Flip with a scrubbing ScrollTrigger instance. While a Flip instance returns a GSAP timeline, because the way GSAP works, it records the start and end values on the first render and then iterates between them, so while this will work in a ScrollTrigger instance with scrub, as soon as you resize the window you'll start having problems. An alternative is to use a call method in a timeline controlled by ScrollTrigger: See the Pen BaVjMwK by GreenSock (@GreenSock) on CodePen Also as you can see, using scale in Flip, does create a jump in the image when the class is toggled most likely because of the CSS setup, so as I mentioned before, I would do the simple math to get the scale values and use a container with the image as a background, scale the container and use a scrubbing ScrollTrigger instance. Let us know if you have more questions. Happy Tweening! 2 Link to comment Share on other sites More sharing options...
GreenSock Posted November 2, 2022 Share Posted November 2, 2022 It's definitely a non-trivial scenario with the entirely dynamic nature of things and how you want to accommodate viewport resizing that'd totally change things, but here's another approach: See the Pen jOKWRER?editors=0010 by GreenSock (@GreenSock) on CodePen 4 Link to comment Share on other sites More sharing options...
BebDev Posted November 2, 2022 Author Share Posted November 2, 2022 Thanks so much guys for the help. I followed @GreenSock method, everything is working great now. 3 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