I am attempting to create a ‘scroll in view’ interaction that animates a div with blocks of text from being center aligned to the page to being left aligned to the page (up to the site’s padding ofc).
The only method I could think of was to wrap the div in a flex box while being sandwiched by two equally sized ‘spacer’ divs. The flex box would be left aligned. I’d then animate the width of the ‘spacers’—blowing their width up would push my primary div to the center of the page, and making their width 0 would bring my div back to the left edge. I’d be doing a ‘global variable value’ animation within the interaction timeline.
Here’s the problem: how wide the ‘spacers’ need to be depends on the viewport width. I could have the initial amount be a ridiculously large amount so that it’s center aligned on even the largest displays, but the issue is that doing that disrupts the timing of my animation (when the div actually starts moving on the screen at each VW). I need the div to move in sync with my other animations.
Theoretically, if I could set my initial ‘spacer’ width to a linear equation [(100VW - size of div - (2*margin))/2], then my ‘spacers’ would always be the perfect size. But clearly, that’s not natively possible in weblfow.
- Is there any way I can do this using custom code?
- OR is there an alternate structure/approach I could take to achieve the desired alignment interaction?
Here is my public share link: read-only-link