LiquidFire - Animating routes with absolutely positioned elements


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?


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:


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