How to utilize the translateY() method to seamlessly shift concealed elements with no empty space

Question

How to utilize the translateY() method to seamlessly shift concealed elements with no empty space

My goal is to create an interactive animation that reveals a specific section when a user clicks on an element. Initially, this section is hidden from view using the translateY(-700px) property. However, I have noticed that applying a transition effect to the margin-bottom property has resulted in a decrease in frames per second (FPS) during the animation.

Now I'm left wondering: Is there a way to animate this section without causing any visible blank space when it's hidden?

Below is the SASS code for the section:

.section {
  padding: 50px 0 20px 0;
  background-color: black;
  display: block;
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.05);
  transform: translateY(-700px);
  transition: transform 1s;

  &._active {
    transform: translate(0, 0);
    margin-bottom: 0;
  }
}

javascript jquery html css

Answer 1

Answer №1

When utilizing the translate function, the browser retains the original size of the styled element. If you eliminate the padding, one approach is to transition the height together with translateY:

var toggler = document.getElementById("toggler");
var toggled = document.getElementById("toggled");

toggler.addEventListener("click", e => {
  toggled.classList.toggle('_active');
})

.section {
  /* padding: 50px 0 20px 0; */
  background-color: black;
  color: white;
  display: block;
  height: 0;
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.05);
  transform: translateY(-700px);  
  -webkit-transform: translateY(-700px);
  transition: transform 1s, height 1s;
  -webkit-transition: transform 1s, height 1s;
}
.section._active {
    transform: translate(0, 0);
    margin-bottom: 0;
    height: 130px; /* adjust for your section content */
}

<button id="toggler">Toggle visibility</button>

<section id="toggled" class="section"></section>

<section>
    <p>
  Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
  </p>
</section>

If you plan to include content within your section, a workaround to add some space is to utilize a border with the same color as the section background and adjust the height property in your _active class.

Answer 2

When utilizing the translate function, the browser retains the original size of the styled element. If you eliminate the padding, one approach is to transition the height together with translateY:

var toggler = document.getElementById("toggler");
var toggled = document.getElementById("toggled");

toggler.addEventListener("click", e => {
  toggled.classList.toggle('_active');
})

.section {
  /* padding: 50px 0 20px 0; */
  background-color: black;
  color: white;
  display: block;
  height: 0;
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.05);
  transform: translateY(-700px);  
  -webkit-transform: translateY(-700px);
  transition: transform 1s, height 1s;
  -webkit-transition: transform 1s, height 1s;
}
.section._active {
    transform: translate(0, 0);
    margin-bottom: 0;
    height: 130px; /* adjust for your section content */
}

<button id="toggler">Toggle visibility</button>

<section id="toggled" class="section"></section>

<section>
    <p>
  Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
  </p>
</section>

If you plan to include content within your section, a workaround to add some space is to utilize a border with the same color as the section background and adjust the height property in your _active class.

Answer 3

Answer №2

After some experimentation, I finally cracked the code.

I noticed that using both the height and margin-bottom properties resulted in a jerky animation. To achieve smooth movement, I had to resort to applying transform: translateY() to all elements that needed to move along with the main element being displayed.

My solution involved assigning an additional class to each section on the webpage and adjusting its transform property accordingly. This workaround produced the seamless animation effect I desired. If you know of a more efficient method, please share!

$('#panel').on('click', function() {
  $('.new-class').toggleClass('down');
  $('.advanced-search').toggleClass('_active');
});

.hero {
  height: 700px;
  background-color:  #FFD400;
  position: relative;
  z-index: 2;
}

#panel {
 width: 100%;
 color: white;
 background: #2E294E;
 font-weight: bold;
 font-family: Helvetica, sans-serif;
 text-align: center;
 padding: 30px 0;
 position: relative;
 z-index: 2;
}

.advanced-search {
 height: 700px;
 display: block;
 width: 100%;
 background: #D90368;
 text-align: center;
 margin-bottom: -700px;
 transform: translateY(-700px);
 transition: transform 1s;
}

.new-class {
 background-color: #F1E9DA;
 height: 300px;
 width: 100%;
 border: 1px solid white;
 text-align: center;
 font-family: Helvetica, sans-serif;
 transition: transform 1s;
}

.new-class.down {
  transform: translateY(700px);
}

.advanced-search._active {
  transform: translateY(0px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hero"></div>
<div id="panel"> Click to show </div>
<div class="advanced-search"></div>
<div class="new-class">
  Some content
</div>
<div class="new-class">
  Some content
</div>
<div class="new-class">
  Some content
</div>
<div class="new-class">
  Some content
</div>
<div class="new-class">
  Some content
</div>
<div class="new-class">
  Some content
</div>

Answer 4

After some experimentation, I finally cracked the code.

I noticed that using both the height and margin-bottom properties resulted in a jerky animation. To achieve smooth movement, I had to resort to applying transform: translateY() to all elements that needed to move along with the main element being displayed.

My solution involved assigning an additional class to each section on the webpage and adjusting its transform property accordingly. This workaround produced the seamless animation effect I desired. If you know of a more efficient method, please share!

$('#panel').on('click', function() {
  $('.new-class').toggleClass('down');
  $('.advanced-search').toggleClass('_active');
});

.hero {
  height: 700px;
  background-color:  #FFD400;
  position: relative;
  z-index: 2;
}

#panel {
 width: 100%;
 color: white;
 background: #2E294E;
 font-weight: bold;
 font-family: Helvetica, sans-serif;
 text-align: center;
 padding: 30px 0;
 position: relative;
 z-index: 2;
}

.advanced-search {
 height: 700px;
 display: block;
 width: 100%;
 background: #D90368;
 text-align: center;
 margin-bottom: -700px;
 transform: translateY(-700px);
 transition: transform 1s;
}

.new-class {
 background-color: #F1E9DA;
 height: 300px;
 width: 100%;
 border: 1px solid white;
 text-align: center;
 font-family: Helvetica, sans-serif;
 transition: transform 1s;
}

.new-class.down {
  transform: translateY(700px);
}

.advanced-search._active {
  transform: translateY(0px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hero"></div>
<div id="panel"> Click to show </div>
<div class="advanced-search"></div>
<div class="new-class">
  Some content
</div>
<div class="new-class">
  Some content
</div>
<div class="new-class">
  Some content
</div>
<div class="new-class">
  Some content
</div>
<div class="new-class">
  Some content
</div>
<div class="new-class">
  Some content
</div>

How to utilize the translateY() method to seamlessly shift concealed elements with no empty space

Answer №1

Answer №2

Similar questions

The Google Closure Compiler Service is providing faulty code

Extjs: How to Select a Node After Creating a Tree Structure

the div's width isn't getting larger

Error message "The camera provided is invalid and not an instance of THREE.Camera" appears when attempting to render a cube using Three.js

Implementing external JavaScript files such as Bootstrap and jQuery into a ReactJS application

Why does Vuetify/Javascript keep throwing a ReferenceError stating that the variable is undefined?

Iterating through a nested array in order to dynamically generate elements using JavaScript/jQuery

Template with a modal overlay

Utilizing Angular.js to Bind AJAX Content to Web Pages

Looking for a different method to remove a list item within an unordered list using CSS instead of HTML

Is requestAnimationFrame necessary for rendering in three.js?

What is the best way to update information in the `App` component using Vue?

What is the best way to send data using ajax?

Ways to enhance the maxDate functionality in a jQuery datepicker

Ways to retrieve child state in React?

Leveraging information from a single controller for another

Troubleshooting issues with jQuery plugin functionality post-upgrade

Detecting browser reload in React/Typescript: A guide

Unable to remove jQuery variable using jQuery .remove() method

Reconfigure a portion of a string using Vue's dynamic replacement feature