LiquidFire - Animating routes with absolutely positioned elements

1

I am trying to animate routes that contain elements with position:absolute.

However after applying animations the route’s wrapping liquid-child’s transform:translate*() causes my absolute elements to behave like relatively positioned. I made a JSbin to explain my situation.

I understand this is the expected behaviour of using a css transform on the wrapping element.

But this makes it impossible to use liquid-fire’s awesome animations that depend on transform in my app.

@ef4 Is there a clean solution to applying liquid-fire animations to routes that may contain absolutely positioned elements?

2

You can still absolutely position elements inside your route. It’s just their offsetParent that’s changing, meaning now their absolute positions are calculated relative to the containing liquid-child, instead of whatever higher element they were using previously.

Here’s a modified version of your example: JS Bin - Collaborative JavaScript Debugging

3

@ef4 Thanks for clarifying and thanks for this wonderful library.