Begin by positioning flex elements outside of the screen and then animate them into their final

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;
      }
    }
  }
  ...
}

https://plnkr.co/edit/MPyuTSjy2s5XWLk5EVVD?p=preview

Answer №1

When using percentage with the CSS property translate, it references the element's own size. For example, if an element is 200px tall, applying translateY(100%) will move it 200px (100% of its height) downwards.

In such scenarios, viewport units can be used instead, like transform: translateY(100vh);. This will position the element at the bottom of the viewport regardless of its height.

Check out the updated code snippet here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with jQueryUI sortable causing flickering and erratic movement while attempting to reorder and position items within the list

When using jQueryUI sortable with a long list of items, I encounter an issue where the items flicker and jump around the screen as I try to change their order by dragging them. This makes it nearly impossible to organize the items effectively. It seems li ...

Right-align the text in the title of the material card

Why isn't the CSS aligning my title of matcard to the right? <mat-card [ngStyle]="{ 'margin':'5px','height':'130px'}"> <mat-card-header> <mat-card-title [ngStyle]="{ 'text-align': ...

There seems to be an issue with the CSS header alignment as the logo is not properly positioned using a top margin of -20px

My goal is to create a header bar that includes an image, a title, and a menu car. I want the bar to be displayed after scrolling 50px down, and I also want the image to be positioned slightly above the wrapping div, showing a bit of it in the top 50px. Ri ...

Is there a way to manipulate the placement of an image within a div using CSS?

Teaching myself HTML has been quite the journey. Right now, I'm in the process of building a website purely for its aesthetic appeal, and I seem to be hitting a roadblock with the CSS/div element. As of now, it appears like this. When the h1 is remove ...

Ways to implement a placeholder height for images on a webpage with varying heights using HTML

I'm facing an issue with an image on my website that has a dynamic width and height as defined by the following CSS: .sm_item_image { width:100%; height:auto; max-width:400px; } The problem arises when the image takes some time to load, ...

What is the best way to align a div with a fixed width in the center, when it is positioned between two other divs within a parent

I have this HTML (technically JSX) code snippet here: https://i.sstatic.net/jXYz0.png The center div with the class domain-input-parent is supposed to have a fixed width of 400px and stay centered horizontally on the screen. This arrangement ensures that ...

CSS: Centralizing a Div Element with Fluid Width

I've created a popup that appears in the center of the screen using: transform: translate(-50%, -50%); and position: absolute. However, I'm facing an issue where the width of the popup remains fixed instead of adjusting dynamically based on the c ...

Please enter the text in the field provided at the bottom using IE10

Why is the text inside my input appearing at the bottom in IE10, while it displays in the middle on FF and Chrome? http://jsfiddle.net/PXN2e/2/ input.form-text { color: #999999; font-size: 14px; height: 30px; line-height: 30px; paddin ...

How can we ensure that the borders of a text field automatically adjust to fit the dimensions of the text field using CSS?

I've encountered an issue with the borders of text fields while working on a project involving CSS/HTML. The problem is that in the browser, the borders appear shorter than the text fields. Initially, I attempted to adjust the border size to match th ...

jQuery used to create a variety of animations that are activated by scrolling

I have created a function that fades a specific DIV when it scrolls into view. Within these DIVs, I have child elements that I want to animate at the end of each fade animation. How can I incorporate additional functions within the existing function below? ...

Step by step guide to showcasing images dynamically in user interface

My current project involves displaying a screen with an HTML table and an image. The HTML table is fully dynamic. The Code Working Process When the user loads a page (with a URL), I render an HTML table in different parts as the page loads. I retrieve al ...

Tips for keeping the menu open even when you're not hovering over it with your cursor

I put together a stylish drop-down menu based on some web examples, but my manager pointed out that it can be inconvenient to use because the menu closes when the mouse moves off of it. I've tried various workarounds as outlined here, but none have in ...

Indent the text within a span element that is displayed as an inline block

I am in search of a solution using only CSS for the following issue. Take into account the HTML below: <p> <span>Some text</span> <span>Some text</span> </p> Both <span> elements are set as inline-block. ...

The image displays successfully on desktop, however, it fails to load once the website is deployed on GitHub or Netlify

While developing this website on my Mac, I encountered an issue where images load fine when I copy the project path from Atom to Chrome. However, once I push the same code to GitHub and then publish it on Netlify, the image fails to load. Does anyone kno ...

Redirecting a CSS link on a website

I have a webpage with a "read more" option that redirects to the About Us page. When I click on "read more", the About Us page opens at the top, but I want it to redirect to the bottom of the About Us page. How can I achieve this? ...

Customizing the label styles within MUI's Chip component

Incorporating React with MUI's library has been a seamless experience for me. One of the key MUI components I have integrated is the Chip Within this particular Chip, there lies the label attribute, offering the option to showcase a text f ...

When viewed on a mobile device, the entire HTML document is resized to occupy less than half of the

Whenever I adjust the size of my webpage on different devices or mobile phones, I notice that the <div> tag appears to be only half (or even less) the width of the page. This gap seems to increase as the window size decreases. Refer to the screenshot ...

Concealing a hyperlink within a DIV by removing or hiding it

I am looking to temporarily hide or remove a specific link (team.aspx) within a drop-down menu, with the intention of adding it back in later. Here is my current code: <div id="nav_menu"> <ul id="nav"> <li class="current"><a href= ...

jQuery mobile enhancing user experience with dynamic background images

I am having trouble setting different background images for each page in jQuery Mobile. <div data-role="page" id="pageone">... </div> <div data-role="page" id="pagetwo">... </div> Since each page has a unique ID, I tried ...

Positioning of bottom navigation bars

Is there a way to ensure that the bottom navigation bar remains fixed at the bottom of the screen, regardless of the device's screen size? position: absolute; bottom: 0; width: 100%; While this solution works, it has been observed that when th ...