The goal.
I need to reliably move elements of different sizes by distances proportional to their dimensions, using interactions 2.0. So if an element’s width is 20 px, it needs to move 20 px, and if I later change its width to 30 px it now needs to move 30 px. I need to do this because it’s the only way to synchronize movement between elements of variable sizes when making them disappear with overflow:hidden.
The reasoning.
On paper, it sounds simple enough. I tell the interaction step to move the element by, say 100%, or some other percentage. Done, right? I hate to spoil it to you, but things don’t work out as they apparently should.
The setup.
The link is set with an initial movement state of “110% X” (moving it to the right).
Upon hover, after a delay of 0.0s and with a transition time of 1.4s (these numbers are important), it’s set to move back to its natural position, i.e. “0% X”.
Upon hover out, after a delay of 0.0s and with a transition time of 1.4s (same numbers as before, still important), it’s set to move back to its initial movement state, i.e. “110% X”.
What actually happens.
To make a long story short, it bugs out. Specifically, the timeline becomes something more along the lines of a delay of 1.2s and a transition time of 0.2s, with a bit of funky lag to boot.
What I’ve tried.
I’ve tried changing the timeline, and I’ve discovered that adding some substantial delay (2s) makes the whole operation move as specified, but adds an incredible amount of lag.
I’ve tried changing the easing type and the percentage of movement and, while I have tried only a few combinations, it doesn’t seem to change things.
I’ve tried to change the “Affect:” setting from “class” to “select element” and that seems to cause the actions to not register at all.
Is this normal? Is there a solution I’m not seeing?
The public share link.
For your viewing and testing pleasure.
Thanks!