CSS transition

[bit-n...@hotmail.com]

I have something which is off-screen, ie. it's "left" is 101% in CSS. I'm trying to scroll it in smoothly, but it just *appears*, without a slow scroll. This is my JS code:

var elem = document.getElementById("middleoffscreen");
elem.style.transition = "left 0.5s linear 0s";
elem.style.left = "1%";



What am I doing wrong?

[Martin Honnen]

Can you set the CSS for transition statically in a CSS stylesheet and
only manipulate the left property with your code?

That seems to work https://jsfiddle.net/1pwfpk2L/.

[Thomas 'PointedEars' Lahn]

That may be a good idea, but should not be necessary. Dynamically adding
transitions like that works for me – provided that the *other* CSS
properties, namely `display` and `position`, and `left` here, have the
proper values.

However, it is usually better not to set any style properties in script
code, but to modify the class list of an element, which then triggers the
corresponding CSS rules.

> That seems to work https://jsfiddle.net/1pwfpk2L/.

Your test case appears to be flawed: You pass different object references,
but call test1() in both cases. As test1() does not set the `transition`
property, and that property was not declared in a ruleset for a selector
that matches the represented element, it “just appears”.

Compare: <https://jsfiddle.net/1pwfpk2L/1/>

--
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[Martin Honnen]

On 23.08.2017 03:14, Thomas 'PointedEars' Lahn wrote:

> Martin Honnen wrote:

>> That seems to work https://jsfiddle.net/1pwfpk2L/.
>
> Your test case appears to be flawed: You pass different object references,
> but call test1() in both cases. As test1() does not set the `transition`
> property, and that property was not declared in a ruleset for a selector
> that matches the represented element, it “just appears”.

Sorry about that, it seems I messed that example up. Thanks for correcting.

[JR]

Firstly, the css style lacks a 'position: absolute' (or relative or
fixed depending on your case) in order to set / change the element's
left property.

#middleoffscreen {
position: absolute;
left: 101%;
}

Then your code will work as desired:

var elem = document.getElementById("middleoffscreen");
elem.style.transition = "left 0.5s linear 0s";
elem.style.left = "1%";

However, you won't get a smooth animation by changing the 'left' (or
top, right, bottom) property, because it will trigger a reflow process
in the browser [1].

So in order to get smooth animations (~ 60 fps), change opacity,
transform and filter only, besides adding easing functions (ease-in,
ease-out, etc.). E.g:

CSS:

#middleoffscreen {
position: absolute;
left: 101%;
transition: transform 0.5s ease-out;
}

.transformed {
transform: translateX(-500px);
}

JS:

var elem = document.getElementById("middleoffscreen");

elem.classList.add('transformed');


Another possibility is using the fresh Web Animations API [2], i.e
Element.animate(), supported by some modern browsers so far.

function test2() {
var el = document.getElementById("middleoffscreen");
var keyframes = [{
transform: 'translateX(101%)',
filter: 'blur(40px)',
opacity: 0
},
{
transform: 'translateX(-700px)',
filter: 'blur(0)',
opacity: 1
}];
var options = {
delay: 0,
endDelay: 0,
direction: 'alternate',
duration: 500,
fill: 'forwards',
easing: 'ease-out',
};
el.animate(keyframes, options);
}


[1]
<https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/>
[2] <https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API>

--
Joao Rodrigues

[Thomas 'PointedEars' Lahn]

JR wrote:
^^
Your real name belongs there.

> However, you won't get a smooth animation by changing the 'left' (or
> top, right, bottom) property, because it will trigger a reflow process
> in the browser [1].

There is no reason why it should, and in fact the referred blog entry does
not claim this. “Reflow” pertains to the rearrangement of elements in the
document flow. With `position: absolute`, an element is *taken out* of the
document flow. What will happen is “repaint”, but that will happen in any
case.

> […]

> Another possibility is using the fresh Web Animations API [2], i.e
> Element.animate(), supported by some modern browsers so far.

Interesting.

> […]
> [1]
> <https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/>

This is from 2012-12-20. The update referred there is from 2016. We have
2017-08 now.

Be suspicious of any Web development advice that is older than one year.
While the advice does not change, layout engines keep being improved. With
“rapid release” schedules, the advice from last month can already be out of
date. (That is also why it is a bad idea to rely on books in this field.)

> [2] <https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API>

[bit-n...@hotmail.com]

On Wednesday, August 23, 2017 at 4:11:16 PM UTC+5:30, Joao Rodrigues wrote:

> >
> > What am I doing wrong?
> >
>
> Firstly, the css style lacks a 'position: absolute' (or relative or
> fixed depending on your case) in order to set / change the element's
> left property.
>
> #middleoffscreen {
> position: absolute;
> left: 101%;
> }
>
> Then your code will work as desired:
>

Oh I beg your pardon, it's there, I just didn't mention it in my post! :)

> However, you won't get a smooth animation by changing the 'left' (or
> top, right, bottom) property, because it will trigger a reflow process
> in the browser [1].

I'm thoroughly confused - I was watching *this* guys video:
https://www.youtube.com/watch?v=hA-fYOlLXPQ&t=708s

....*he* seems to manage it just fine.....? Have the browsers changed or something..?

>
> So in order to get smooth animations (~ 60 fps), change opacity,
> transform and filter only, besides adding easing functions (ease-in,
> ease-out, etc.). E.g:
>

Why would I change opacity and filter? (I don't even know what "filter" IS....)

> CSS:
>
> #middleoffscreen {
> position: absolute;
> left: 101%;
> transition: transform 0.5s ease-out;

Ummm - I would prefer to do the "transition"-ing in JS...... - could you help me out with the code? :)

[Joao Rodrigues]

bit-naughty wrote:
> On Wednesday, August 23, 2017 at 4:11:16 PM UTC+5:30, Joao Rodrigues wrote:
>>
>> Firstly, the css style lacks a 'position: absolute' (or relative or
>> fixed depending on your case) in order to set / change the element's
>> left property.
>>
>> #middleoffscreen {
>> position: absolute;
>> left: 101%;
>> }
>>
>> Then your code will work as desired:
>>
>
> Oh I beg your pardon, it's there, I just didn't mention it in my post! :)

Then it must have been something else in your code and /or stylesheet
that was either impeding the animation to happen or to be perceived.

>> However, you won't get a smooth animation by changing the 'left' (or
>> top, right, bottom) property, because it will trigger a reflow process
>> in the browser [1].
>
> I'm thoroughly confused - I was watching *this* guys video:
> https://www.youtube.com/watch?v=hA-fYOlLXPQ&t=708s
>
> ....*he* seems to manage it just fine.....? Have the browsers changed or something..?
>

Thanks for the link! - I enjoy that style of teaching. There's nothing
wrong with the technique taught on that video. I was only commenting
that changing the 'left' property via JavaScript might cause “janky
animations” [1][2], obviously depending on the complexity of the
document's DOM tree, on the device in use (desktop or mobile). Changing
top, right, bottom and left properties (call it TRouBLe for short) may
cause animation lags.

I prefer using CSS animations and transitions to take advantage of
hardware acceleration, but I'm aware of some cases in which JavaScript
animations suit fine, particularly Web Animations API (WAAPI) [3].

>>
>> So in order to get smooth animations (~ 60 fps), change opacity,
>> transform and filter only, besides adding easing functions (ease-in,
>> ease-out, etc.). E.g:
>>

CSS experts, such as Rachel Nabors, Lea Verou, Sarah Drasner, and JS
engine experts as Paul Lewis and Paul Irish, people who currently work
at Microsoft, Google, Mozilla, some of them are invited experts at the
W3C, recommend animating opacity, transform and filter properties,
because of smaller paint times, and 2D / 3D CSS functions as
translate3d() that run on the computer's GPU.

Also it is fine to animate some other CSS properties, such as color or
background-color. Use Google (or Firefox) Developer Tools [4] to inspect
animations and tweak transition timing functions, duration, and delays.
And use your judgement to choose what you see fit in your document. But
test in mobile devices too because bad things can happen, you know :-)

>
> Why would I change opacity and filter? (I don't even know what "filter" IS....)

Opacity allows you to adjust an element's transparency, and thus it is
used in fade-in and fade-out effects. Remember 'display' is not an
"animatable" property [5].

Filter lets you apply graphical effects like blurring, sharpening, or
color shifting to an element. Filters are commonly used to adjust the
rendering of images, backgrounds, and borders. [6].

>
>> CSS:
>>
>> #middleoffscreen {
>> position: absolute;
>> left: 101%;
>> transition: transform 0.5s ease-out;
>
>
> Ummm - I would prefer to do the "transition"-ing in JS...... - could you help me out with the code? :)
>

OK. Here's an example:

HTML:

<input type="button" value="test" onclick="test()">
<div id="middleoffscreen">
Just an exercise.
</div>

CSS:

#middleoffscreen {
position: absolute;
left: 101%;
}

JS:

function test() {

var el = document.getElementById("middleoffscreen");

el.style.transition = 'transform 0.5s ease-out';
el.style.transform = 'translate3d(-600px, 0, 0)';
}



[1]
<https://www.chromium.org/developers/how-tos/trace-event-profiling-tool/anatomy-of-jank>

[2] <http://jankfree.org/>

[3] <http://danielcwilson.com/blog/2016/08/why-waapi/>

[4]
<https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations?hl=en>

[5]
<https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties>

[6] <https://developer.mozilla.org/pt-BR/docs/Web/CSS/filter>

--
Joao Rodrigues