Can flexbox elements be animated as they scroll?

Wondering if it's feasible to animate flex elements upwards when scrolled?

Attempting to replicate this effect: https://codepen.io/Sergiop79/pen/bxjGEe

I want to apply this to the elements below (styled in flexbox), either the entire "row" or each individual "col".

Haven't come across any resources specifically addressing this for Flexbox, so just curious if it's doable. Thanks!

<about id="about" class="row">
      <div class="col">
        <div class="about1">
          <img src="1-AB.svg">
        </div>
        <div class="about1a">
          <h3>About</h3>
          <p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero.</p>
        </div>
      </div>
      <div class="col">
        <div class="about2">
          <img src="2-AB.svg">
        </div>
        <div class="about2a">
            <h3>Aboot</h3>
            <p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero.</p>
          </div>
      </div>
      <div class="col">
        <div class="about3">
          <img src="3-AB.svg">
        </div>
        <div class="about3a">
            <h3>Abute</h3>
            <p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero.</p>
        </div>
      </div>
    </about>
javascriptcssflexboxcss-transitions

Answer №1

To hide elements, you can adjust their opacity to 0 and apply transform:transationY(100%). Create a class named show with properties like opacity:1; and transform:translateY(0);

Next, include this JavaScript code:

    var columns = document.getElementsByClassName("col");
    document.addEventListener("scroll",function(){
        for(var i = 0; i < columns.length; i++){
           if(columns[i].getBoundingClientRect().top < window.innerHeight){
              columns[i].classList.add("show");
           }
        }
    });
.col{
width:100%;
height:300px;
background:#555;
border:1px solid #000;
margin-bottom:50px;
opacity:0;
transform:translateY(100%);
transition:opacity .5s, transform .5s;
}

.show{
opacity:1;
transform:translateY(0);
}
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>

The condition 

columns[i].getBoundingClientRect().top < window.pageYOffset + window.innerHeight
determines whether the div is visible in the viewport during scrolling.

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

Sending Data from jQueryUI Dialog to PHP using AJAX

I am struggling to retrieve the user inputs from text fields within a dialog window in order to utilize them for a SQL query. The issue I am encountering is that I am unable to effectively use the array in PHP. Despite no error messages being displayed, I ...

javascriptphpajaxjquery-uidialog

Utilizing Ajax to dynamically display the outcome of selecting a radio button

I am currently working on a script that aims to utilize Ajax in order to post the result of a radio button click. My progress so far includes: <label> <input type="radio" name="DisableAd" value="0" id="RadioGroup1_0" /> Radio </lab ...

javascriptjqueryajax

What makes the element[class=noquotes] function so effective?

According to the MDN attribute selector in CSS, it has the following syntax: div[attr="actualValue"] For example: <div class="test"></div> div[class="test"] However, I have observed that the quotes around the test are not necessary as show ...

htmlcssw3c

What causes the disruption of vertical alignment among inline-block elements when using overflow:hidden?

Take a look at these two JSFiddles: http://jsfiddle.net/am28dsbz http://jsfiddle.net/am28dsbz/1/ Why is it that the first one shows my text aligned correctly, while the second one displays the first link lower than the second? Stack Overflow requires m ...

css

What is the proper way to retrieve the JSON data?

How can I retrieve data from another table to use in a detail view if the value returned by the getData method is null? <th data-field="id" data-detail-formatter="DetailFormatter">ID</th> <th data-field="prefix&quo ...

javascripthtmljquerybootstrap-4bootstrap-table

How to create a scrolling fixed div that moves horizontally and repositions to the center when the page is maximized

I've been searching for a solution to my problem and have managed to figure out the first part, but there's still one issue that I could use some help with. While I have some knowledge of html, css, and basic php, I'm completely new to javas ...

jquerycss

Placing elements from an array into a customized output

Currently, I am dealing with a unique output: dAmn_Raw('send chat:Sandbox\n\nmsg main\n\nthismessage'); In my code, there exists a variable: myvariable that stores a random value selected from an array I formulated. The cha ...

javascriptarrays

Trouble with scrolling horizontally on the website

After completing the coding for this website with bootstrap, I encountered an unexpected issue with a horizontal scroll appearing. This is my first project using bootstrap. I attempted to troubleshoot by using the 'divide et impera' method - rem ...

htmlcsstwitter-bootstraphorizontal-scrolling

Function is not triggered in React component

When the LoginPage calls AuthForm, the structure is as follows: function mapDispatchToProps(dispatch: Redux.Dispatch<any>) { return { signUpWithEmail: function(email: string, password: string) { // bla bla }, }; } handleForm ...

javascriptreactjstypescriptreduxreact-redux

Can you provide some straightforward instances of single-axis zooming using d3?

I'm interested in creating a single-axis zoom for d3's zoom behavior. Are there any straightforward examples that demonstrate how to achieve this? I came across Mike Bostock's example, but I found it a bit complex to grasp. Here is the code ...

javascriptd3.jssvgzooming

jQuery does not support the addition of new fields in HTML

Recently, I've been working on creating a lucky number generator. Initially, I developed it using C# and now I'm in the process of transitioning it to JavaScript and jQuery. You can view the latest version here. However, I've encountered an ...

javascriptjquery

Customize the size of data points on your Angular 2 chart with variable

In my Angular 2 application, I am utilizing ng2-charts to create a line chart. The chart functions properly, showing a change in color when hovering over a point with the mouse. However, I want to replicate this behavior manually through code. Upon clicki ...

javascriptangularjsangularchart.jsng2-charts

Navigating state: (TypeError): The mapping function for this.state.[something] is invalid

I am currently working on iterating through my state, which contains data retrieved from an external API. However, I encountered this error message: TypeError: this.state.stocks.map is not a function My goal is to display the results on the frontend dyn ...

javascriptreactjs

Tips for displaying lesser-known checkboxes upon clicking a button in Angular

I have a form with 15 checkboxes, but only 3 are the most popular. I would like to display these 3 by default and have an icon at the end to expand and collapse the rest of the checkboxes. Since I'm using Angular for my website, I think I can simply ...

javascriptangularjsformsuser-interfacecheckbox

Fetching json data from the request in Node.js

I'm currently working on a project that involves using the request module to send an HTTP GET request to a specific URL in order to receive a JSON response. However, I've run into an issue where my function is not properly returning the body of ...

javascriptjsonnode.jshttprequest

Tips for eliminating unnecessary or duplicate dependencies in package.json files

While I am aware that this question has been asked previously on Stack Overflow, I have found that depcheck does not work effectively for me. It provides numerous false alerts and requires specific configuration for libraries like babel, eslint, etc. How ...

javascriptnode.jsreactjsnpmyarnpkg

Is AGM-Map capable of providing all the same features as the Google Maps API?

Greetings to everyone! I am currently working on an Angular 6 project and I want to incorporate asset tracking using the Google Maps API. However, I am unsure if AGM-Map fully supports all the features of Google Maps API, like heatmaps and advanced asset ...

javascriptangulargoogle-maps

When using v-for to render components and <selection>, is there a way to customize it for just one specific instance of the component?

How can I modify the selection in each instance separately when rendering elements of an array obtained from the backend using v-for? Currently, changing one selection affects all instances due to the v-model. Is there a way to target only one selection ...

javascriptvue.js

How to define an index signature in Typescript that includes both mandatory and optional keys

I am on a quest to discover a more refined approach for creating a type that permits certain keys of its index signature to be optional. Perhaps this is a scenario where generics would shine, but I have yet to unlock the solution. At present, my construc ...

javascripttypescripttypesindex-signature

Dynamic Content with Angular Bootstrap Tooltip

Currently, I am developing a cart application in Angular and utilizing Angular Bootstrap. The main requirement is to display a tooltip when hovering over the cart icon, with the content of the tooltip changing based on whether the item is already in the c ...

javascriptangularjsangular-ui-bootstrap