Hey there! Trying to figure out if I can solve this without using GSAP or something:
I’m building this one pager with scrollable (duh) content and when a user taps on a specific element, I want it to move to the top left of the page (and scale to a specific size as well) - so a predefined x and y position. I don’t know the starting position, since it’s a scrollable page.
Any suggestions if this is doable with Interactions?
Hi @aaleks
A little hard without seeing the page structure of what you’re working on. Sounds like you could make the click interaction change the element to position fixed with the x and y position that you require.
Hey @Smith-Cordell , appreciate you steppin’ in!
Here’s the read only link, hope that helps:
https://preview.webflow.com/preview/smits-noordenbos?utm_medium=preview_link&utm_source=designer&utm_content=smits-noordenbos&preview=7e78647a903869d1c5c1056718539c9f&workflow=preview
The interaction is on the VIEW PROJECT button of the first one showing up when scrolling.
About your suggestion: I can def change the position to fixed on click, but that would mean a sudden position change, not a smooth animation, unless I’m overlooking something…
Hey @aaleks
Now I think I understand what you are trying to do. You are wanting to reveal the content on click of the button by expanding the div on the right, but you want it to scroll the section to the top? If that’s what you’re trying to do, you can use anchor links.
As for smooth animation between position changes, I believe you can add a CSS transition to apply easing.
Hope that helps
Hey man, almost - but the use case is a bit different and unfortunately I don’t think it would work with a section link…
What I pretty much want to do is this: Grid Zoom | Codrops
As you can see, there are scrollable elements, but after click they will behave as a fixed positioned element.
Thanks again for your time.
Hey Alex! You could potentially use vw/vh scaling to do this. For example, when the user clicks on a smaller element, the container is sized to 100vw/100vh, and your inner content is sized based on percentages so that it scales with its container.
Hey Chris, thanks for jumping in! Not sure I completely understand 
I’m already scaling the element based on vw/vh, but the problem is that it’s scaling from its current position, but I need it to move to the top left position of the screen so it fills up the whole screen. That’s why I thought I might need it to change to position: fixed.
Thoughts?
Thanks again.
Got it, sorry about that. You can also use the Move interaction with vw/vh, so (in theory) the element would move as much as it needs to based on its original placement in your design. Very crude little example of what I did below:
I feel like this is probably more elegantly solved with some custom code though.
Thanks bud - really appreciate you taking the time! The move interaction will be a bit tricky, since I never know the current position of the red box (since its scrolling from the bottom up). Or am I overlooking something?
I dont mind using some custom code, but not to sure what direction to take. GSAP Flip plugin might work… I have also tried changing the positioning to fixed on click, but unfortunately, that will happen instantly and wont be animated.
Nope, you’re spot on. Depending on the volume of projects this might not be worth your time, but you could duplicate the interaction for each project and just change the target elements.