My challenge involves moving a div from left to right on the screen, ensuring it stays aligned even when the window is resized. To achieve this, I dynamically switch between using the CSS properties left and right depending on which side of the screen is closer.
The issue arises with the CSS transition when changing between the left and right properties. While the transition works smoothly when the div moves within the same orientation (either left or right), it instantaneously jumps when switching orientations.
Is there a way to maintain a smooth CSS transition when alternating between using the left and right properties?
I have a JavaScript function:
function moveTimeline(screenIndex) {
let timelineSectionWidth = (TIMELINE_BACKGROUND_WIDTH - documentElement.clientWidth) / num_timelinePieces;
let isOnLeftSide = (screenIndex < num_timelinePieces / 2);
if (!isOnLeftSide)
screenIndex = screenIndex - num_timelinePieces;
let new_timelinePosition = Math.floor(screenIndex * timelineSectionWidth);
if (isOnLeftSide) {
timelineBackground.css({
"left": "-" + new_timelinePosition + "px",
"right": "auto"
});
} else {
timelineBackground.css({
"left": "auto",
"right": (new_timelinePosition) + "px"
});
}
}
And for the CSS property:
transition: left 1s ease, right 1s ease;
I had hoped for a seamless movement from left to right regardless of which property was in use. However, I am stuck at making it work this way. Trying to avoid using a single property due to potential alignment issues upon window resize, and manual step-by-step movement is a last resort.