daniel.mt Posted November 6, 2020 Share Posted November 6, 2020 Hello . I'm trying to achieve a similar effect of scaling found here: See the Pen wvKwZXG by GreenSock (@GreenSock) on CodePen but with some slight changes. I'm trying to scale a position fixed div to another smaller one ( for short scaling the bigTile to smallTile ) . So far so good. The width / height is scaled perfectly and it works like a charm. But when I tried to alter the x/y of the fixed element I encountered various issues like: the positioning with the element is all wrong - the problem can be seen in the codepen, on resize it jumps out, on refresh it's not updated properly. I have the feeling that the way I'm updating x / y ( that works in my solution but not in codepen apparently ) it's all wrong . So the question: it's there any way to hijack those x/y values with the position of the small tile ( top / left ) ? See the Pen oNLPgee by vesemir (@vesemir) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 6, 2020 Share Posted November 6, 2020 Hey vesemir. As soon as there's a transform on your container element the element with position: fixed becomes like position: absolute... Are you sure you don't just need position: absolute? That would greatly simplify your calculations. You don't want to have to calculate positions every single time the user scrolls. If the element does act with position: fixed before the section is reached, it would likely make sense to change its positioning to absolute for the alignment to the small box. 1 Link to comment Share on other sites More sharing options...
daniel.mt Posted November 6, 2020 Author Share Posted November 6, 2020 Brilliant . Apparently this solves part of my problem. Here is final solution: See the Pen VwjGKzM by vesemir (@vesemir) on CodePen One more question if I'm not too annoying. Any idea on how I could update my to / from based on my progress on resize ? Tried something on refresh but this doesn't count my progress and updates it only to the final position. Thanks again for your help. I don't know why I didn't thought on this from the beginning. Link to comment Share on other sites More sharing options...
ZachSaucier Posted November 6, 2020 Share Posted November 6, 2020 You have two options there: Use functional values for all of the properties that change. Make sure invalidateOnRefresh is true for the ScrollTrigger. Then in the refreshInit callback you recalculate the position data. Just kill off the old tween and ScrollTrigger and rebuild them in the refreshInit. 1 Link to comment Share on other sites More sharing options...
daniel.mt Posted November 6, 2020 Author Share Posted November 6, 2020 Figured it out somehow. Ditched out the tween and used a timeline instead , managed to store the progress and send it to timeline. It's messy but it does his job . Here is the final solution for whoever is trying to achieve something similar: See the Pen mdEGOGb by vesemir (@vesemir) on CodePen I'll try to rewrite this mess but for now it works . Thanks a lot for your help. 1 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