Transitioning from right to left

Question

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.

Duplicate of this question - http://stackoverflow.com/questions/8210560/css-transitions-do-not-work-when-assigned-trough-javascript — Francis Stalin, Jun 24 '16 at 04:38

score 2 · Answer 1 · answered Jun 24 '16 at 04:49

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

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

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

(display: table; or some other way could help here to keep the element width)
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%);

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

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>

Thank you Roko. Your solution worked after I implemented it. I have for that reason marked this as correct. However, I've got one concern, and that is using calc. From looking at http://caniuse.com/#feat=calc it seems to be supported IE 11 and up. My website supports IE 9 and up. Is there another way to accomplish this and to maintain support for IE 9 and up? — Bagzli, Jun 24 '16 at 13:02
@Bagzli I tested my code in IE11 and realized that IE is against me :) No, will not work. You'd better go with a JS solution... (Later I'll add an example) — Roko C. Buljan, Jun 24 '16 at 13:07
Alright, I pulled back the correct answer for now then as this doesn't work fully. I was hoping to avoid Javascript to control positioning. — Bagzli, Jun 24 '16 at 15:18
I was playing with the idea of what if I use left but somehow control the width. So my wrapper div can be positioned to the right and text be left: 0. The width then would increase on click allowing the transition to left to work. But I'm not sure how to force the width to be to its content as oppose to 100% — Bagzli, Jun 24 '16 at 15:21
@Bagzli sadly you can only transition width from some fixed value to another fixed value. "auto"->"100%" will not work. But what you can is to transition using `max-width` — Roko C. Buljan, Jun 24 '16 at 15:25

score 2 · Accepted Answer · answered Jun 25 '16 at 19:04

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>

With this approach, do I have to know the width of the body? I'm looking to implement this on a responsive site. — Bagzli, Jun 27 '16 at 20:39

score 0 · Answer 3 · answered Jun 24 '16 at 04:23

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. :)

Transitioning from right to left

3 Answers3