Using skrollr with flexbox

53 Views Asked by At

I am running into an issue trying to use skrollr on flexbox items. Skrollr animations will not apply to the flex items. Is there a css fix so that I can use both flex positioning and skrollr animations?

<ul>
<li class="one skrollable skrollable-between" data-bottom-top="transform:translateY(0px);" data-top-bottom="transform:translateY(-50px);></li>
<li class="two skrollable skrollable-between" data-bottom-top="transform:translateY(0px);" data-top-bottom="transform:translateY(-120px);"></li>
<li class="three skrollable skrollable-between" data-bottom-top="transform:translateY(0px);" data-top-bottom="transform:translateY(-70px);"></li>
</ul>

ul {display:flex; flex-direction:column;}
li.one {align-self: flex-end; flex-basis: 570px;}
li.two {align-self:flex-start; flex-basis:500;}
li.three {align-self:flex-end; flex-basis: 450px;}

Thanks.

0

There are 0 best solutions below