I'm struggling to find the right approach to make this animation work effectively.
Currently, I have two elements centered vertically within a flexbox layout. My goal is to animate these elements into their final positions by sliding in from off-screen. However, due to their flex positioning, I am encountering unexpected issues. Any suggestions on how I can overcome this challenge?
For reference, you can view the current state of the project in this plunker. I have slowed down the animation so that you can see the issue and understand where I am trying to go with it.
.scroller-item-wrapper {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: center;
overflow: hidden;
.scroll-animator {
position: relative;
width: 100%;
flex-shrink: 0;
flex-grow: 0;
transform: translateY(100%);
&:not(.pre-animated){
animation-name: scrollItemIn;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
&:last-of-type {
animation-delay: 1300ms;
}
}
&.leaving {
animation-name: scrollItemOut;
animation-duration: .3s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
transform: translateY(0%);
&:last-of-type {
animation-delay: 300ms;
}
}
&:last-of-type {
.scroller-item {
margin-bottom: 0;
}
}
}
...
}