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

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 <[email protected]> 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
> Web Animation Engineer
> w:rachelnabors.com <http://rachelnabors.com/>
>  <http://twitter.com/rachelnabors>  <http://dribbble.com/rachelthegreat>  <http://plus.google.com/u/0/+RachelNabors>  <http://linkedin.com/in/rachelnabors>
> Curator of Web Animation Weekly <http://webanimationweekly.com/>
> Speaking & Workshops
> 
> Aug 07 CSS Conf Argentina, Buenos Aires <http://cssconfar.com/>
> Oct 17 –18 CSS Dev Conf, San Antonio <http://2016.cssdevconf.com/>, Animation Workshop <http://2016.cssdevconf.com/#workshops>
> Oct 26 –27 All Things Open Keynote, Raleigh, NC <http://allthingsopen.org/>
> On Tue, Jun 7, 2016 at 5:40 AM Kseso <[email protected] <mailto:[email protected]>> 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>
> ​
> 
>  <https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail>	Libre de virus. www.avast.com <https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail> <x-msg://80/#m_7859376910412252250_DDB4FAA8-2DD7-40BB-A1B8-4E2AA1F9FDF2>
> -- 
> 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