[selectors] :in-viewport() psuedoclass for scroll-based animations & lazy-loading

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

[selectors] :in-viewport() psuedoclass for scroll-based animations & lazy-loading

Kseso?
Yestarday, Amelia Bellamy-Royds tweeted:
I also want an :in-viewport psuedoclass for scroll-based animations & lazy-loading.

Today I want to know your opinion about a new css pseudoclass
:in-viewport()
where the value inside the function () defines a viewport area.
The pseudoclass rule will be applied while any part of the element is inside this area

value for :in.viewport()
[ <length> | <percentage> | auto]{1,4}
The value may be negative.

For example:

.el {
opacity:0;
transition: .5s;
} .el:in-viewport(10vh 0) {
opacity:1;
}




Could declared exclusion areas inside :in-viewport()?

:in-viewport(0 / 30vh 0) {}




Libre de virus. www.avast.com
Reply | Threaded
Open this post in threaded view
|

Re: [selectors] :in-viewport() psuedoclass for scroll-based animations & lazy-loading

Rachel Nabors
I would like to vouch for this. I already use waypoints.js to manually track everything that is in view so I can pause/remove animations that aren't visible. I do this for performance reasons and others do, too. It's in the wild already. Would love to see it official.


photo
Rachel Nabors
Web Animation Engineer
   

On Tue, Jun 7, 2016 at 5:40 AM Kseso <[hidden email]> wrote:
Yestarday, Amelia Bellamy-Royds tweeted:
I also want an :in-viewport psuedoclass for scroll-based animations & lazy-loading.

Today I want to know your opinion about a new css pseudoclass
:in-viewport()
where the value inside the function () defines a viewport area.
The pseudoclass rule will be applied while any part of the element is inside this area

value for :in.viewport()
[ <length> | <percentage> | auto]{1,4}
The value may be negative.

For example:

.el {
opacity:0;
transition: .5s;
} .el:in-viewport(10vh 0) {
opacity:1;
}




Could declared exclusion areas inside :in-viewport()?

:in-viewport(0 / 30vh 0) {}




Libre de virus. www.avast.com
--
Curator of Web Animation Weekly
Speaking & Workshops
• Apr 05 –06 SmashingConf, San Francisco
• Apr 21 Frontend Masters, online, CSS Animations and Transitions Master Class
• May 18 –20 Front-Trends Keynote, Warsaw
• Jun 01 CSSconf Nordic, Oslo
Reply | Threaded
Open this post in threaded view
|

Re: [selectors] :in-viewport() psuedoclass for scroll-based animations & lazy-loading

Florian Rivoal-4
This is all software, so nothing's impossible if we're creative enough, but making a pseudo class depend on layout (and scrolling) goes against the grain of how CSS works.

The styles you apply when that selector matches can change the layout, which can change whether the selector matches. This kind of loops between the styling layer and the layout layer are really troublesome.

I know there are tons of use cases for something like that, and LG was suggesting something along these lines earlier as well to deal with scroll effects on round displays, but I don't think this approach will actually work.

 - Florian

On Jun 14, 2016, at 09:25, Rachel Nabors <[hidden email]> wrote:

I would like to vouch for this. I already use waypoints.js to manually track everything that is in view so I can pause/remove animations that aren't visible. I do this for performance reasons and others do, too. It's in the wild already. Would love to see it official.


photo
Rachel Nabors
Web Animation Engineer
   

On Tue, Jun 7, 2016 at 5:40 AM Kseso <[hidden email]> wrote:
Yestarday, Amelia Bellamy-Royds tweeted:
I also want an :in-viewport psuedoclass for scroll-based animations & lazy-loading.

Today I want to know your opinion about a new css pseudoclass
:in-viewport()
where the value inside the function () defines a viewport area.
The pseudoclass rule will be applied while any part of the element is inside this area

value for :in.viewport()
[ <length> | <percentage> | auto]{1,4}
The value may be negative.

For example:

.el {
opacity:0;
transition: .5s;
} .el:in-viewport(10vh 0) {
opacity:1;
}

<Gráfico1.jpg>


Could declared exclusion areas inside :in-viewport()?

:in-viewport(0 / 30vh 0) {}

<Gráfico2.jpg>


Libre de virus. www.avast.com
<a href="x-msg://80/#m_7859376910412252250_DDB4FAA8-2DD7-40BB-A1B8-4E2AA1F9FDF2" width="1" height="1" class="">
--
Curator of Web Animation Weekly
Speaking & Workshops
• Apr 05 –06 SmashingConf, San Francisco
• Apr 21 Frontend Masters, online, CSS Animations and Transitions Master Class
• May 18 –20 Front-Trends Keynote, Warsaw
• Jun 01 CSSconf Nordic, Oslo

Reply | Threaded
Open this post in threaded view
|

Re: [selectors] :in-viewport() psuedoclass for scroll-based animations & lazy-loading

Ryan Seddon
This is something the proposed IntersectionObserver[1] would solve.

[1] https://github.com/WICG/IntersectionObserver/blob/gh-pages/explainer.md
On Tue, 14 Jun 2016 at 12:47 PM, Florian Rivoal <[hidden email]> wrote:
This is all software, so nothing's impossible if we're creative enough, but making a pseudo class depend on layout (and scrolling) goes against the grain of how CSS works.

The styles you apply when that selector matches can change the layout, which can change whether the selector matches. This kind of loops between the styling layer and the layout layer are really troublesome.

I know there are tons of use cases for something like that, and LG was suggesting something along these lines earlier as well to deal with scroll effects on round displays, but I don't think this approach will actually work.

 - Florian

On Jun 14, 2016, at 09:25, Rachel Nabors <[hidden email]> wrote:

I would like to vouch for this. I already use waypoints.js to manually track everything that is in view so I can pause/remove animations that aren't visible. I do this for performance reasons and others do, too. It's in the wild already. Would love to see it official.


photo
Rachel Nabors
Web Animation Engineer
   

On Tue, Jun 7, 2016 at 5:40 AM Kseso <[hidden email]> wrote:
Yestarday, Amelia Bellamy-Royds tweeted:
I also want an :in-viewport psuedoclass for scroll-based animations & lazy-loading.

Today I want to know your opinion about a new css pseudoclass
:in-viewport()
where the value inside the function () defines a viewport area.
The pseudoclass rule will be applied while any part of the element is inside this area

value for :in.viewport()
[ <length> | <percentage> | auto]{1,4}
The value may be negative.

For example:

.el {
opacity:0;
transition: .5s;
} .el:in-viewport(10vh 0) {
opacity:1;
}

<Gráfico1.jpg>


Could declared exclusion areas inside :in-viewport()?

:in-viewport(0 / 30vh 0) {}

<Gráfico2.jpg>


Libre de virus. www.avast.com
--
Curator of Web Animation Weekly
Speaking & Workshops
• Apr 05 –06 SmashingConf, San Francisco
• Apr 21 Frontend Masters, online, CSS Animations and Transitions Master Class
• May 18 –20 Front-Trends Keynote, Warsaw
• Jun 01 CSSconf Nordic, Oslo
Reply | Threaded
Open this post in threaded view
|

Re: [selectors] :in-viewport() psuedoclass for scroll-based animations & lazy-loading

Kseso?
In reply to this post by Florian Rivoal-4
Thanks for your opinion, Florian.

2016-06-14 4:43 GMT+02:00 Florian Rivoal <[hidden email]>:
This is all software, so nothing's impossible if we're creative enough, but making a pseudo class depend on layout (and scrolling) goes against the grain of how CSS works.
 
No. It isn´t layout depended. It is "user interaction depend" as other aspects such as: hover,: target,: checked...
"The grain of how CSS works" is not unique nor immutable. CSS offers solutions to specific issues and needs. And his response is a function of the nature of the topic addressed. Each case requires a specific analysis and response commensurate with it.

The styles you apply when that selector matches can change the layout, which can change whether the selector matches. This kind of loops between the styling layer and the layout layer are really troublesome.

This is the same case that :hover.
It is valid to declare el:hover {display: none;} regardless of the effects (repaints and reflows) this envolves.
Some time ago  el:hover {display: none} create an infinite loop "show / hide". Today, in some browsers like Chrome, the user needs to move the pointer to the declaration applies again (a second time).
I mean CSS should not give up new developments because the user can make a possible misuse them.

My proposal only provides a way for CSS knows if an item is inside or outside the viewport. Which it is not possible today.
The good or bad use a particular developer can do with that knowledge in specific cases should be indifferent. And never reason to rule out a innovation.

2016-06-14 4:43 GMT+02:00 Florian Rivoal <[hidden email]>:
This is all software, so nothing's impossible if we're creative enough, but making a pseudo class depend on layout (and scrolling) goes against the grain of how CSS works.

The styles you apply when that selector matches can change the layout, which can change whether the selector matches. This kind of loops between the styling layer and the layout layer are really troublesome.

I know there are tons of use cases for something like that, and LG was suggesting something along these lines earlier as well to deal with scroll effects on round displays, but I don't think this approach will actually work.

 - Florian

On Jun 14, 2016, at 09:25, Rachel Nabors <[hidden email]> wrote:

I would like to vouch for this. I already use waypoints.js to manually track everything that is in view so I can pause/remove animations that aren't visible. I do this for performance reasons and others do, too. It's in the wild already. Would love to see it official.


photo
Rachel Nabors
Web Animation Engineer
   

On Tue, Jun 7, 2016 at 5:40 AM Kseso <[hidden email]> wrote:
Yestarday, Amelia Bellamy-Royds tweeted:
I also want an :in-viewport psuedoclass for scroll-based animations & lazy-loading.

Today I want to know your opinion about a new css pseudoclass
:in-viewport()
where the value inside the function () defines a viewport area.
The pseudoclass rule will be applied while any part of the element is inside this area

value for :in.viewport()
[ <length> | <percentage> | auto]{1,4}
The value may be negative.

For example:

.el {
opacity:0;
transition: .5s;
} .el:in-viewport(10vh 0) {
opacity:1;
}

<Gráfico1.jpg>


Could declared exclusion areas inside :in-viewport()?

:in-viewport(0 / 30vh 0) {}

<Gráfico2.jpg>


Libre de virus. www.avast.com
--
Curator of Web Animation Weekly
Speaking & Workshops
• Apr 05 –06 SmashingConf, San Francisco
• Apr 21 Frontend Masters, online, CSS Animations and Transitions Master Class
• May 18 –20 Front-Trends Keynote, Warsaw
• Jun 01 CSSconf Nordic, Oslo


Reply | Threaded
Open this post in threaded view
|

RE: [selectors] :in-viewport() psuedoclass for scroll-based animations & lazy-loading

Jihye Hong
In reply to this post by Florian Rivoal-4
Hi,

> On Jun 14, 2016, at 11:43, Florian Rivoal < [hidden email] > wrote:
>
> I know there are tons of use cases for something like that, and LG was suggesting something along these lines earlier as well to deal with scroll effects on round displays, but I don't think this approach will actually work.

I had proposed a new type of pseudo-class, :region() pseudo-class.
:region() pseudo-class is a functional pseudo class for selecting an element in a particular area of the round display.

   :region( [ center || left || top || right || bottom ]? )

You can select the element which matches with center point of containing block by ":region(center)".
":region(top)" means the element which touches the top edge of containing block.

I propose about this for dynamic scrolling and scaling of list items on the round display.
On some of the latest smart watches, when an element in the list moves to the center of the screen it becomes bigger than the other elements, and I intended to implement this effect with :region().

However, this pseudo class is the layout-dependent selector.
For applying pseudo class, it requires changes in the layout, but the element coming inside the specified area doesn't change the layout.
So I thought this approach wouldn't work and didn't make more progress on :region() pseudo class.

I think IntersectionObserver[2] could be a solution for your problem.

Thanks,
Jihye

[1] https://lists.w3.org/Archives/Public/www-style/2016Jan/0255.html 
[2] https://github.com/WICG/IntersectionObserver/blob/master/explainer.md 

>> On Jun 14, 2016, at 09:25, Rachel Nabors <[hidden email]> wrote:
>>
>> I would like to vouch for this. I already use waypoints.js to manually track everything that is in view so I can pause/remove animations that aren't visible. I do this for performance reasons and others do, too. It's in the wild already. Would love to see it official.
>>
>>
>>  
>> Rachel Nabors
>>> On Tue, Jun 7, 2016 at 5:40 AM Kseso <[hidden email] <mailto:[hidden email]>> wrote:
>>> Yestarday, Amelia Bellamy-Royds tweeted:
>>> I also want an :in-viewport psuedoclass for scroll-based animations & lazy-loading.
>>> (see tweet: https://twitter.com/AmeliasBrain/status/739865073745833984 <https://twitter.com/AmeliasBrain/status/739865073745833984> )
>>>
>>> Today I want to know your opinion about a new css pseudoclass
>>> :in-viewport()
>>> where the value inside the function () defines a viewport area.
>>> The pseudoclass rule will be applied while any part of the element is inside this area
>>>
>>> value for :in.viewport()
>>> [ <length> | <percentage> | auto]{1,4}
>>> The value may be negative.
>>>
>>> For example:
>>>
>>> .el {
>>>   opacity:0;
>>>   transition: .5s;
>>>  }
>>> .el:in-viewport(10vh 0) {
>>>   opacity:1;
>>>  }
>>>
>>> <Gráfico1.jpg>
>>> ​
>>>
>>> Could declared exclusion areas inside :in-viewport()?
>>>
>>> :in-viewport(0 / 30vh 0) {}
>>>
>>> <Gráfico2.jpg>
>>> --
>>> Curator of Web Animation Weekly
>>> Speaking & Workshops
>>> • Apr 05 –06 SmashingConf, San Francisco
>>> • Apr 21 Frontend Masters, online, CSS Animations and Transitions Master Class
>>> • May 18 –20 Front-Trends Keynote, Warsaw
>>> • Jun 01 CSSconf Nordic, Oslo