CODEWITHSUNDEEP
javascripthtmlcss
Bagzli
Bagzli

Reputation: 6579

Transitioning from right to left

I have a website where I need to move some text from right side of the screen to the left. The text is ever changing in length so I can't just hard code a width to achieve what I want.

I have tried doing transitioning but when I go right to left it stops working. I have written a simple jsfiddle to demonstrate my problem and how I tried to solve it. The first div shows how it should work, however I need the text to align to left instead of right (text-align property will not work with my full code). The second div shows you the actual result of what happens when I do transition to left.

https://jsfiddle.net/h12wrm1n/

$("#right").on("click", function () {
    $("#right").toggleClass("active");
});
$("#right2").on("click", function () {
    $("#right2").toggleClass("active");
});
.right, .right2{
  width: 300px;
  position: absolute;
  right: 20px;
  transition: .5s
}
.right2{
  top: 100px;
}
.right.active{
  right: 200px;
}
.right2.active{
  left: 20px
}
<div id="right" class="right">This is some text</div>
<div id="right2" class="right2">This is some text</div>

How can I have it transition from right to left if I don't know the width of my text? Also please keep in mind that the page is responsive.

Upvotes: 3

Views: 2768

Answers (3)

vals
vals

Reputation: 64174

One posibility would be to use a container for the element with the text. And translate both the container and the inner element.

See the snippet for details. hovering on the body will trigger the transform. I have set a color on the container to make it easier to see what is happening

body {
  width: 300px;
  border: solid 1px red;
  margin: 30px;
}

.container {
  width: 100%;
  background-color: lightblue;
  transform: translateX(100%);
}


.test {
  display: inline-block;
  transform: translateX(-100%);
}

body:hover .container {
  transform: translateX(0%);
}

body:hover .test {
  transform: translateX(0%);
}

.container, .test {
  transition: transform 1s;
}
<div class="container">
<div class="test">Text</div>
</div>
<div class="container">
<div class="test">longer.............. text</div>
</div>

Upvotes: 2

Roko C. Buljan
Roko C. Buljan

Reputation: 206121

You cannot transition trough different properties (right→left)
only right→right or left→left

Therefore your second element should transition via the left property alone.

To set initially your element to a fake right position of 20px

  1. Set left: using calc(100% - 20px); 

    +-----------------------------------+
    |                                 ##|#############
  1. (display: table; or some other way could help here to keep the element width)
  2. now that the element Left edge is at the desired 20px from the right window border, to pull it back in it's entirety use transform: translateX(-100%);

    +-----------------------------------+
    |                  ###############  |
  1. you can now transition to left: 20px; and transform:translateX(0%); simultaneously

    +-----------------------------------+
    |  ###############                  |

Example

$("#right, #right2").on("click", function () {
    $(this).toggleClass("active");
});
#right, #right2{
  position: absolute;
  background: #f0f;
  transition: 0.5s;
}

#right       {right: 20px; }
#right.active{right: 200px;}


#right2{
  display: table;
  top: 50px;
  left: calc(100% - 20px);
  transform: translateX(-100%);
}
#right2.active{
  left: 20px;
  transform: translateX(0%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="right">click to animate right200px</div>
<div id="right2">click to animate left20px (some long text here)</div>

Upvotes: 2

antoni
antoni

Reputation: 5546

A possible way to do it is to calculate the width of your text, and substract it from the width of your device $(window).width() and then animate to position absolute from left 0 to left = $(window).width() - $(object).outterWidth().

I am sure there is a better way though. :)

Upvotes: 0

Related Questions