What is the best way to move an element from a relative to an absolute position smoothly?

Question

What is the best way to move an element from a relative to an absolute position smoothly?

I've been working on my portfolio site and came up with a unique idea for the landing page – having the name placed in the center and then transitioning into a navbar when a route is selected.

However, I'm facing a dilemma. To achieve this effect, I either have to position the navbar items absolutely (which I'd like to avoid) or center the name relative to its original position on the screen (also not ideal).

You can see how it currently looks here

I am using Vue with Tailwind, but would appreciate a vanilla HTML solution as well.

This is the code snippet I have:

<template>
  <header
    class="bg-black/25 py-3 transition-[max-height] duration-1000 ease-in-out max-h-screen h-screen justify-center"
    :class="{
      'flex max-h-20': !isHomePage,
    }"
  >
    <div
      class="w-5/6 flex justify-between items-center"
      :class="{ 'h-screen': isHomePage }"
    >
      <router-link to="/" :class="{ 'flex space-x-2 items-end': !isHomePage }">
        <div
          class="text-3xl font-semibold transition-all absolute duration-1000 left-1/2 top-1/3 -translate-y-4"
          :class="{
            'relative !translate-y-0 !translate-x-0 left-0 top-0': !isHomePage,
          }"
        >
          Aby
        </div>
        <div
          class="text-2xl font-medium transition-all duration-1000 absolute left-1/2 top-1/3 translate-y-4 -translate-x-4"
          :class="{
            'relative !translate-y-0 !translate-x-0 left-0 top-0': !isHomePage,
          }"
        >
          Isakov
        </div>
      </router-link>
      <router-link to="/other">click</router-link>
    </div>
  </header>
</template>

While I initially tried positioning the navbar items absolutely, it caused issues with responsiveness of the component.

css vue.js tailwind-css

Answer 1

Answer №1

If you want to implement a transition that alters the 'position' css property, there are several steps you need to take. Here is a function that achieves this for a relative positioned element:

function positionTransition(element) {
    var rectBefore = element.getBoundingClientRect(); //obtain old coordinates
    
    //adjust positioning:
    element.style.position = "absolute";
    element.style.left = "50vw";
    element.style.top = "50vh";
    
    var rectAfter = element.getBoundingClientRect(); //retrieve new coordinates
    
    //calculate the difference:
    var xDiff = -(rectAfter.x - rectBefore.x);
    var yDiff = -(rectAfter.y - rectBefore.y);
    
    //apply translation to simulate the element staying in its original position:
    element.style.transform = "translate(" + xDiff + "px, " + yDiff + "px)";
    
    //finally, add the transition effect with position remaining as absolute
    setTimeout(function() { //transition won't work without the timeout delay
        element.style.transition = "transform 1000ms ease-in-out";
        element.style.transform = "";
    }, 10);
}

No need to worry about any flickering effects, as the change in position and translation back happen instantaneously!

EDIT1

I have included a complete example in the following code snippet:

    window.addEventListener("DOMContentLoaded", function() {
        setTimeout(function() {
            var element = document.querySelector(".the-changing-span");
            positionTransition(element);
        }, 1000);
    });
    
    function positionTransition(element) {
        var rectBefore = element.getBoundingClientRect(); //get old coordinates
        
        //change positioning:
        element.style.position = "absolute";
        element.style.left = "50vw";
        element.style.top = "50vh";
        
        var rectAfter = element.getBoundingClientRect(); //get new coordinates
        
        //calculate the difference:
        var xDiff = -(rectAfter.x - rectBefore.x);
        var yDiff = -(rectAfter.y - rectBefore.y);
        
        //translate, so that the absolute positioned element seems to be in the old place:
        element.style.transform = "translate(" + xDiff + "px, " + yDiff + "px)";
        
        //finally, make the transition, which works because it remains in position: absolute
        setTimeout(function() {
            element.style.transition = "transform 1000ms ease-in-out";
            element.style.transform = "";
        }, 10);
    }

    .the-changing-span {
        position: relative;
    }
    
    span {
        border: 1px solid #AAA;
    }

    <span class="a-simple-span">
        stays
    </span>
    <span class="the-changing-span">
        changes
    </span>

Answer 2

If you want to implement a transition that alters the 'position' css property, there are several steps you need to take. Here is a function that achieves this for a relative positioned element:

function positionTransition(element) {
    var rectBefore = element.getBoundingClientRect(); //obtain old coordinates
    
    //adjust positioning:
    element.style.position = "absolute";
    element.style.left = "50vw";
    element.style.top = "50vh";
    
    var rectAfter = element.getBoundingClientRect(); //retrieve new coordinates
    
    //calculate the difference:
    var xDiff = -(rectAfter.x - rectBefore.x);
    var yDiff = -(rectAfter.y - rectBefore.y);
    
    //apply translation to simulate the element staying in its original position:
    element.style.transform = "translate(" + xDiff + "px, " + yDiff + "px)";
    
    //finally, add the transition effect with position remaining as absolute
    setTimeout(function() { //transition won't work without the timeout delay
        element.style.transition = "transform 1000ms ease-in-out";
        element.style.transform = "";
    }, 10);
}

No need to worry about any flickering effects, as the change in position and translation back happen instantaneously!

EDIT1

I have included a complete example in the following code snippet:

    window.addEventListener("DOMContentLoaded", function() {
        setTimeout(function() {
            var element = document.querySelector(".the-changing-span");
            positionTransition(element);
        }, 1000);
    });
    
    function positionTransition(element) {
        var rectBefore = element.getBoundingClientRect(); //get old coordinates
        
        //change positioning:
        element.style.position = "absolute";
        element.style.left = "50vw";
        element.style.top = "50vh";
        
        var rectAfter = element.getBoundingClientRect(); //get new coordinates
        
        //calculate the difference:
        var xDiff = -(rectAfter.x - rectBefore.x);
        var yDiff = -(rectAfter.y - rectBefore.y);
        
        //translate, so that the absolute positioned element seems to be in the old place:
        element.style.transform = "translate(" + xDiff + "px, " + yDiff + "px)";
        
        //finally, make the transition, which works because it remains in position: absolute
        setTimeout(function() {
            element.style.transition = "transform 1000ms ease-in-out";
            element.style.transform = "";
        }, 10);
    }

    .the-changing-span {
        position: relative;
    }
    
    span {
        border: 1px solid #AAA;
    }

    <span class="a-simple-span">
        stays
    </span>
    <span class="the-changing-span">
        changes
    </span>

Answer 3

Answer №2

Regrettably, this functionality cannot currently be implemented as per the documentation.

Source

1. w3 docs

Animated: no

2. mozilla docs

Animation type: discrete

Answer 4

Regrettably, this functionality cannot currently be implemented as per the documentation.

What is the best way to move an element from a relative to an absolute position smoothly?

Answer №1

Answer №2

Source

1. w3 docs

2. mozilla docs

Similar questions

The beauty of Aurelia's scoped CSS

Minimizing the menu bar while scrolling down (bootstrap3)

"Header becomes frozen in place while scrolling, never budging from

modify style when not valid and is touched

Is there a way to position text at the bottom of a card?

Insert content into a designated DIV

Utilize .GLB and Blender file formats within a Gridsome project developed with Vue.js

Tips for showcasing additional choices within a SELECT element while incorporating floating labels and adjusting the size

Issues with integrating Angular Cypress Component tests with Tailwindcss are causing problems

Removing the gridlines in a Linechart using Apexcharts

Is concealing content using Javascript or jQuery worth exploring?

Calculating the sum in a VueJS pivot table

accordions that are supposed to adapt to different screen sizes are

What methods can I utilize to increase the speed of my JavaScript animation?

Adjust the left and right margins while maintaining the vertical margin spacing

Personalize Dropdown Menu, determining when to initiate the hide menu action

Various web browsers (display: -webkit-inline-box;)

Tips for resizing a chartjs within bootstrap columns to accommodate various web browsers

Guide to transforming the image's color with CSS3

A two-column layout utilizing the full height feature in Bootstrap 5, excluding the use of cards within the