Can Webflow's Interactions feature move a specific element to the top left of a scrollable page and scale it to a specific size when tapped?

Yes, Webflow’s Interactions feature can move an element to the top-left of the viewport and scale it when tapped, using page or element triggers combined with transforms.

1. Use a Tap Trigger on the Element

• Select the element you want to animate.
• Go to the Interactions panel (lightning bolt icon).
• Click + next to Element Trigger and choose Mouse Click (Tap).
• Choose On 1st Click, then select Start an Animation and click + New Timed Animation.

2. Add a Move Action to the Animation

• Inside the animation timeline, click + Add Action, then choose Move.
• Set the X and Y values to position the element at the top-left. Normally, that’s X = 0px and Y = 0px, but you may need to adjust based on your layout (e.g., use negative margins or translate values if necessary).
• Make sure the element has a position setting that allows movement (e.g., absolute or fixed).

3. Add a Scale Action

• In the same animation sequence, click + Add Action, then choose Scale.
• Set new values (e.g., 0.5 for 50% of original size) in the X and Y fields.
• Adjust the duration and easing as desired for a smooth visual transition.

4. Make Sure the Element Can Be Transformed

• In the Style panel, ensure the element’s transform origin is correctly set (e.g., top left) if you want scaling to be anchored from that point.
• The element must have an appropriate positioning context (relative to viewport or parent element) for move animations to behave correctly.

5. Optional: Reverse the Interaction on Second Tap

• Still in the Interactions panel, add actions under On 2nd Click to reverse the move and scale back to their original states.

Summary

Webflow’s Interactions allow you to move an element to the top-left corner and scale it when tapped. Use a Click (Tap) trigger, Move, and Scale actions in a Timed Animation, and ensure proper positioning and transform origin for precise control.