Tips for making a slide-in animation that doesn't require adjusting the browser size

As I work on an animation where an img object and text slide in from outside the frame of the webpage upon page load, everything seems to be running smoothly. But there's one glaring issue: right at the start of the page load, the webpage resizes for about half a second. This happens because, at that moment, the img object is positioned outside the frame, causing the website to adjust its size accordingly. This results in a rather jerky effect during loading. Is there a way to make it so that the img object remains outside the current bounds of the frame and only becomes visible on the webpage once it partially enters the frame?

Below is the simple CSS code for the animation, along with the CSS for the image (set as a float to allow text wrapping).

Since I am using the React framework, I am also open to any React or JavaScript solutions that may help address this issue.

@keyframes slideFromRight {
    0% {
        transform: translateX(800px) translateY(-80px);
    }
  
    100% {
        transform: translateX(0px) translateY(0px);

.img--berk {
    float: right;
    width: 335px;
    height: 213px;
    margin-top: 1%;
    margin-right: 1%;
    margin-left: 1%;
    border-radius: 9%;
    border: 4px solid var(--blue);
    animation: slideFromRight 1.2s cubic-bezier(0.35,-0.15, 0.63, 1.58);
}
javascripthtmlcssreactjscss-animations

Answer №1

If you happen to be working with react, my recommendation would be to utilize framer motion.

To incorporate framer motion into your project, simply run the following command in your terminal: npm i --save framer-motion

import {motion} from "framer-motion";
            
const variants = {
    initial: { x: "100vw" },
    animate: { x: "0vw", 
        transition: { duration: 1.2 }
    }
}

export default function ImgComponent() {
    return <motion.img className="img--berk" src="https://picsum.photos/200" initial="initial" animate="animate" variants={variants} />
}

Remember to add 'overflow: hidden;' to your "App.js" component as well.

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

Difficulty with aligning textfield controls to the right

I'm currently working on adding StaticTextField controls to a page. We are using ExtJS, but we incorporate VB.NET methods for implementing ExtJS so manual coding isn't necessary. So far, I attempted to align the text to the right by using this c ...

asp.netcssasp.net-mvcvb.netextjs

How can I create a box-shaped outline using Three.js?

As someone new to threejs, I have been trying to figure out how to render a transparent box around a symbol in my canvas. The box should only display a border and the width of this border should be customizable. Currently, I am using wireframe to create a ...

javascriptcssangularthree.js

Is it possible to drag the div container in HTML to resize its width from both left to right and right to left?

After posing my initial inquiry, I have devised a resizing function that allows for the expansion of a div's width. When pulling the right edge of the div to resize its width from left to right, is it possible to adjust the direction or how to resize ...

javascripthtmlcssangulartypescript

What are some alternatives to using multiple slot transclution in an Angular 1.5 component?

In the process of constructing a panel component using angular 1.5, I am looking to embed some markup into this template (which has been simplified): <div class="panel"> <h1>{{ $ctrl.title }}</h1> <div ng-transclu ...

javascriptangularjstypescript

Using an `<img>` element as an event handler in a JavaScript function

I'm having trouble setting up a click handler for the search field in my project. I've tried using on() with an img or class, but it's not working as expected. When adding the image using the code below: jQ('#psc').append('&l ...

javascriptjqueryfunctiononclickevent-handling

Wait for the definition of a variable before returning in React Native

I am currently receiving data asynchronously and displaying it within the render() function using {data}. My dilemma is how to ensure that the render() function waits until the variable is defined. Currently, the placeholder variable remains the same or d ...

javascriptreactjsnative

Using TypeScript: creating functions without defining an interface

Can function props be used without an interface? I have a function with the following properties: from - HTML Element to - HTML Element coords - Array [2, 2] export const adjustElements = ({ from, to, coords }) => { let to_rect = to.getBoundingC ...

javascripttypescriptinterface

The functionality of Protovis JavaScript is not supported within a dropdownlist's onchange event

I encountered an issue where one block of code works fine on its own, but when combined with another block, only one of them functions properly. The problem arises when I try to invoke a method from a dropdownlist using the onchange event, especially afte ...

javascriptdom-eventsprotovis

Sorting data by type in React JS API fetched data can be done by utilizing the built-in methods

This concerns an advertising website created using the MERN stack. I'm looking to organize data by ad type "reach-up-ad" and then display all other ads below this particular type. I will be fetching the data through axios and then utilizing mapping, ...

reactjssortingnext.jsmern

The enigmatic discrepancy in height across various browsers

I have encountered an issue with the layout of my HTML document. Both the BODY and HTML elements are set to a height of 100%. Within these elements, I have two child elements - one with a fixed height of 100px and the other set to height:100%. However, th ...

htmlcss

What could be causing the issue with uglify not functioning properly with AngularJS content?

I've created some gulp tasks to assist in building my web project. One of the tasks involves minifying js files. Here is the task code snippet: gulp.task('minify' , function() { console.log('Copy minified js '); return gulp ...

javascriptangularjsgulpgulp-uglify

Guidelines for incorporating role-based permissions in a React application

I am developing a MERN application that has various features catering to different roles. I need the ability to display specific data, navigation options, and divs based on the user's role while hiding these elements from others. It is important to no ...

javascriptnode.jsreactjs

Alignment issue with Bootstrap dropdowns noticed after dynamically loading dropdown content in Blazor

When working with Blazor, you have the ability to dynamically load content by enclosing it within an @if block and then setting the condition to true, such as when a button is clicked. Recently, I encountered an issue with a Bootstrap dropdown in my proje ...

cssbootstrap-4blazorblazor-server-sidepopper.js

VueJS is unable to identify the variable enclosed within the curly braces

I recently started learning VueJS and I've hit a roadblock. My goal is to display a variable, but for some reason, instead of seeing the product name, all I get is {{product}} Here's the HTML code I'm using: <!DOCTYPE html> <html l ...

javascriptvue.js

What is the best way to navigate users to a different page when they click on a button?

I recently designed a button in Dreamweaver software. Could you please guide me on how to set up the button so that when clicked, it redirects the user to a different page using Dreamweaver? Below is the HTML code for the button: <input type="submit" ...

htmlcssbuttonhyperlinkdreamweaver

Transforming a unirest 'GET' call into an axios request

I am currently utilizing TheRundown API to access sports data. The example provided to me makes use of unirest, but I am endeavoring to adapt that example into an axios request. While I have managed to make it work for the most part, my main challenge lies ...

javascriptreactjsapiaxiosnext.js

Is there a way to automatically hide a div based on a checkbox value when the page loads?

How can I hide a div in my view when a checkbox is not checked upon page load? <input type="checkbox" class="k-checkbox" id="chkInvoiceStatusActive" asp-for="InvoiceStatus" value="true" /> <input t ...

javascriptjqueryasp.net

What is the best way to save a large array to a .txt file in node.js?

It seems that using fs.writeFile is the obvious solution. However, after reading the response to this question, it appears that a Stream technique might be more appropriate. In an attempt to delete a line from a text file by converting it to an array, I ...

javascriptarraysnode.jstextfile-io

Tips for Showing Empty Data in a Nonexistent `<td>` Element within a Table

This particular query appears to be quite simple... I am seeking the HTML code for creating a table: <table> <tr> <th>Heading 1</th> <td>or</td> <th>Heading 2</th> </tr> <tr> ...

htmlcssxhtml

What is the best way to ensure that the width of a div fills its parent container?

I need my divs(.give, .sep, .take) to completely fill the width of its parent container (.trade). This is the HTML code: <div class="trade"> <div class="give"></div> <div class="sep"></div> ...

htmlcss