My current scroll animations are problematic as they are causing horizontal scrolling beyond the edge of the screen

I've implemented scroll animations on various elements of a website I'm constructing.

The CSS rules I'm utilizing are as follows:

.hiddenLeft {
    opacity: 0;
    filter: blur(5px);
    transform: translateX(-090%);
    transition: all 1s;
}

.hiddenRight {
    opacity: 0;
    filter: blur(5px);
    transform: translateX(90%);
    transition: all 1s;
}

.show {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}

Initially, the hiddenLeft and hiddenRight classes are present in the elements, and once they intersect during vertical scroll, the show classes are added.

Everything is functioning well, except that it's causing horizontal scrolling to extend beyond the width of the site into empty space.

I'd like to retain the animations as they are but eliminate the horizontal scroll.

Here's an illustration showing me scrolling towards the side into the void for clarity:

view image here

I created a simple replication here:

https://codepen.io/acodeaday/pen/NWMYWNL

I understand that the problematic line is:

transform: translateX(90%);

However, this line contributes significantly to the visual appeal of the animation. So, I'm hoping there's a solution to resolve this issue while retaining that aspect.

Answer №1

Consider utilizing the following CSS properties:

max-width: 100%!important; height: auto; overflow: hidden!important;

It is recommended to place all your animation elements within a container, such as a div. Hopefully, this tip proves helpful~

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

Greetings: Obtaining an array of text within the <td> tags

Here is the HTML Source: <td bgcolor="#ffffbb" colspan=2><font face="Verdana" size=1>2644-3/4<br>QPSK<br><font color="darkgreen">&nbsp;&nbsp;301</font> - 4864</td> I am looking to extract text array wit ...

How can I connect the Bootstrap-datepicker element with the ng-model in AngularJS?

Below is the html code for the date field : <div class='form-group'> <label>Check out</label> <input type='text' ng-model='checkOut' class='form-control' data-date-format="yyyy-mm-dd" plac ...

Leveraging the power of Material-UI and React, modify the appearance of the "carrot" icon within the

Currently implementing MUI's textfield based on the information found at this link: https://mui.com/components/text-fields/. While there are numerous resources available for changing the font of the input text, I have not come across any documentation ...

Fixed width blocks automatically adjusting to small containers

When I try to add text to my absolute block inner div, it doesn't expand as expected. I am aware that expanding within a parent container with a specified width, such as <div class="main_wrap"></div>, can be problematic. Unfortunately, I ...

When multiple input fields with an iterative design are using the same onChange() function, the specific event.target.values for each input

I'm in the process of developing a dynamic select button that adjusts based on the information entered into the iterative input fields I've set up. These input fields all utilize the same onChange() function. for (let i = 0; i < selectCount; i ...

Shade the tag when the checkbox is marked

Is it possible to change the color of a label without using javascript when the associated checkbox is checked? ...

Error: Module not found - The package path "." is not exported from the specified package. As a result, Firebase will not update in your Next.js

I have been developing a Next.js application that retrieves data from a Firebase collection. During the process of connecting to the Firebase database, I have come across the following error: Failed to compile. Module not found This error seems to be ori ...

A guide on how to activate an event when a radio button is selected using jQuery

I experimented with implementing this. When I try clicking on the radio button, the code functions correctly, but the radio button does not appear to be checked and remains unchanged. Any ideas on how to resolve this issue? <p> <input id="p ...

Error message occurs when creating a pie chart with invalid values for the <path> element in Plottable/D3.js

For those who need the code snippets, you can find them for download here: index.html <!doctype html> <html> <head> <meta charset="UTF-8"> <!-- CSS placement for legend and fold change --> </head> <body ...

Storing POST Request Data in Express

I want to use a single API endpoint for both GET and POST requests. My goal is as follows: Send multiple POST requests to /api/users with data like: {'id': 2, is_valid: 'true'} Retrieve this data by fetching the same API URL later on ...

Creating a Vue application utilizing a function with an unspecified purpose

Looking to create an app with a function that is currently undefined. On the production server, there is a function called __doPostBack which I am calling from my Vue app like this: getLabel(templateName) { __doPostBack(templateName, ""); } Afte ...

Implementing MySQL in JavaScript code leads to various possibilities

I am working on a web application that requires retrieving values from a MySQL database. The process involves: PHP code generates an HTML page successfully. Clicking a button updates a cookie, which also works. Using the cookie in a MySQL query, which is ...

The Android WebView experiencing issues with the functionality of the Hamburger Menu

I'm facing an unusual issue with the Android WebView in my app. The hamburger menu on my website works perfectly fine on my mobile browser, but when I try to open it in the Android WebView, it does not fully expand to show the menu items. I have trie ...

Best practices for referencing attributes created with the data method in a Vue component

In my application, there is a section that displays a list of users along with a search box to filter names. The user information is fetched from a database and stored in app.users. I have created a component named 'user' to show the details of e ...

Connecting factors

Let me simplify what my code does: var list = { "group":{ "subgroup1":[{"name1":"Jimmy","name2":"Bob"}], "subgroup2":[{"name1":"Sarah","name2":"Nick"},{"name1":"Kevin","name2":"George"}] } } function group(group,name){ var link ...

Transition from mouse wheel scroll to page scroll not functioning properly when overflow is enabled

The website has a fixed element that uses overflow:auto. Users can scroll this element by positioning the mouse over it. However, once the element reaches the end of its scroll, the page does not seamlessly take over the scrolling. Instead, there is about ...

Adding a numerical value to the conclusion of the php variable

It may seem like a basic question, but it has been bothering me for quite some time now... I have a PHP file that is included on a PHP web page to retrieve dynamic content from my MySQL database. Everything works smoothly with this setup except when I tr ...

Determining the position of p5.js input in relation to the canvas

Show me what you’ve got: function initialize() { var board = createCanvas(960,540); board.parent("drawingPad"); background('white'); var textbox = createInput(); textbox.position(10,10); textbox.parent("drawingPad"); } I’ve cre ...

Interacting with an API and retrieving data using JavaScript

I have hit a roadblock. This question might be simple, but I am struggling to figure it out. I am attempting to retrieve a response from an API (mapquest), but I can't seem to navigate the response to extract the necessary information. Here is my con ...

Implement a smooth transition effect when changing the image source

I am currently working on enhancing a Squarespace website by adding a new image fade-in/fade-out effect when the mouse hovers over one of three buttons. The challenge I'm facing is that the main static image is embedded as an img element in the HTML r ...