Interaction - Transform element

Hi.
I have world map with bullets / dotts (locations) and I want to animate that. The animation should work that the bullets should have drop effect when animation begins. My attempt is to change position of bullet from let say top:20% to top: 30%.

Now the problem is that Interaction doesn’t have top position adjustments, only Transforms which adds css transform code. If I change Move transform the Y axis to 30%, the move is really small, I must add at least 300% to move for 50px.

Everything is OK with that but not when you want that the image (map) and points (bullets) doesn’t resize or move proportionally - when you resize the browser, the image is resized and also bullets are moved into right direction. But because of the final state of animation, of element which has translateY 300% the bullets are not moved proportionally.

For example; In full view (1920px wide screen) the pin / bullet is pointed to New York, but if you resized it to let say 600px than the pin is located in North Atlantic Ocean :slight_smile:

Here is the example: http://andrazs-first-site.webflow.io/

Does any body have any idea or some trick in webflow which can solve the problem? The perfect solution would be to just change initial top position to final position in this case from 20% and 30% (durning animation).

Thanks.


Here is my public share link: LINK
(how to access public share link)

This can me deleted I have found the solution.

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.