Prototyping: will-change

[wonglok]

I am learning how to use will-change correctly.

I tried to use it in a demo~ http://yellowhappy.com

src: http://github.com/wonglok/YH

Optimisation/Testing items:

1. Offscreen Nav with staggering item
2. Angular-Animate Page transition + 3D flip menu using same content div instead creating a 'pusher-container' div. (after this it got wayyyy smoother on mobile.)
3. Exploring the use of transition/animation delay to allow time for browser to do prep work of "will-change" and dom creation, destruction :)

So far optimising those stuff for about a week~ Galaxy S4 improved from 3x~4x to 40~60 fps iPad2 iOS7 ~60fps Desktop ~60fps

https://www.youtube.com/watch?v=wujCqd2hKZ0&list=PL8UhnCospzUYc47uSScgVCkBIPGOvyTNK

If I am doing things right, I am going to rewrite into scss and incorporate into effeckt.css

[grayghostvisuals]

From a pattern standpoint what would you categorize this as? Would it be under the “Off Screen Nav” pattern?

[wonglok]

I am going to break it down into simple ones.

1. the offscreen nav~
2. extra & module-independent angular page transition effect in 2d scene
3. extra & module-independent angular page transition effect in 3d scene (menu-opened)

[wonglok]

I think there should be a category of offscreen nav + page transition effeckts that works well together.

because configuring two effects (offscreen nav + page transition) is kinda hard when it comes to making it performant. people would usually just incorporate two kinds of effect in a 2 level way.

the offscreen nav content pusher -> 3d page transition.

people are going to do this because things are not comptable
<div class="perspective-container 3d-menu-effect-A 3d-page-trans-effect-E">
   <div class="3d-menu-pusher">
     <div class="3d-page-transition" ng-view=""></div>
  </div>
</div>

i.e.)

slow perf on mobile :( with 2level of 3d
.open.3d-menu-pusher{
 transform:rotateY(30deg);
}
.open.3d-page-transition.ng-enter{
 transform: translateY(-30%);
}
.open.3d-page-transition.ng-enter.ng-enter-active{
 transform: null;
}

the offscreen nav and 3d-page transition are comptable

instead they can do this if effects are compatible. (i did this improvement in my effect demo and makes it wayyy smoother after on mobile)
<div class="perspective-container 3d-menu-effect-A 3d-page-trans-effect-E">
     <div class="3d-transiton-target" ng-view=""></div>
</div>

i.e.)

faster perf on mobile :) with 1level of 3d
.open.3d-menu-effect-A.3d-page-trans-effect-E .3d-transiton-target.ng-enter{
 transform: rotateY(30deg) translateY(-30%);
}
.open.3d-menu-effect-A.3d-page-trans-effect-E .3d-transiton-target.ng-enter.ng-enter-active{
 transform: rotateY(30deg);
}

[grayghostvisuals]

I am going to break it down into simple ones.

1. the offscreen nav~
2. extra & module-independent angular page transition effect in 2d scene
3. extra & module-independent angular page transition effect in 3d scene (menu-opened)
4. What would you call it besides us knowing the pattern resides under the off screen nav category? Do you see any similar ones currently listed that could use a tweak instead of adding a new one?
5. How about just "Angular 2D Page Transition?"
6. How about just "Angular 3D Page Transition?"

I'm having a hard time wrapping my head around "extra & module-independent." That sounds a bit off to me. What are you really trying to say by that?

[wonglok]

1~ Most of the existing offscreen nav can be optimised with will-change without adding new ones, since it's a css property. set it ahead of time of animation and trigger out after animation would be okay. :)

2~ In my demo there are two main stage of the app, either the 3d menu is opened or closed. Page-transition happens in both mode, resulting several scenarios:

When the menus is closed (in normal viewing mode), the page transition happens in fading 2d animation. This is designed for iOS7 edge swiping, Safari Back Swipe and android browser's back button.

When the menu is opened, the page transition would use 3d animations.

Resulting these combination:

1. Off Screen Nav (add new ones if needed)
2. AngularJS 3d/2d Page Transition (add new ones)
3. Optimised AngularJS 3d Page transitions that depend on specific Offscreen nav effect (in case people use both offscreen nav and page-transition, then things can be optimised.)

As you can see the 3d offscreen menu's rotateY is baked into the page transition, so it's a different set of div structure and css property.

faster perf on mobile :) with 1level of 3d
.open.3d-menu-effect-A.3d-page-trans-effect-E .3d-transiton-target.ng-enter{
 transform: rotateY(30deg) translateY(-30%);
}
.open.3d-menu-effect-A.3d-page-trans-effect-E .3d-transiton-target.ng-enter.ng-enter-active{
 transform: rotateY(30deg);
}

To make things clear:

1. Tweaking any existing effeckts.
2. Adding if any new offscreen nav effect.
3. Adding Angular Page transitions in both 2d and 3d that does not need 3d menu.
4. Adding Optimised Angular Page transition that works with certain 3d menu.

[wonglok]

@grayghostvisuals @WellingGuzman I want to create new pure html page with new layout so that :

angular {{}} does not conflict with assemble-handlebar... and I can optmize angular-page-transition performance without the burden of existing page structure.

i am going to use ng-include to make things dry

[wonglok]

Here's the preview of the commit http://github.wonglok.com/Effeckt.css/ng-page-menu-transition.html#/

[grayghostvisuals]

When did we start supporting Angular? Also you should be working on either master or another branch and not gh-pages from your fork.

@WellingGuzman This is is his repo I'm looking at https://github.com/wonglok/Effeckt.css/tree/gh-pages also take a look here where I'm seeing some controllers using angular https://github.com/wonglok/Effeckt.css/tree/gh-pages/assets/js/demo

[wellingguzman]

Wait what? I don't know where this is going I didn't read the whole thing, but what is the point on this, I am confused.

@grayghostvisuals exactly, @wonglok you should be working either master or another branch but not gh-pages, and there you could add anything you want but, why are those in there, correct me if I'm wrong but if we need Angular (or another library) to make the animations preform better and smoothly, then we are doing something wrong.

First, I don't use Angular, but It's ok to me, to build something which works with it, but not directly on Effeckt. I think and getting out of this discussion.

Refresh my mind. Sorry but I dont quite understand what's going on here.

[grayghostvisuals]

@WellingGuzman I thought the initial issue was filed in regards to "will-change" and has drastically ended up here as "here's this thing I made w/angular." I also interpreted this as a pattern at first, but obviously that is not the case or am I confused as well?

[grayghostvisuals]

@wonglok If you would like to talk about this in terms of a pattern we can have that discussion in another issue. If you're still saying you would like to add in the will-change property then my answer is not right now as it's still an editor's draft http://dev.w3.org/csswg/css-will-change. As it matures more then we can have this talk again, but I'm closing this issue for now. Also we won't accept PRs w/Angular, but you're more than welcome to do that on your own forked copy.

[wonglok]

@WellingGuzman I am actually editing the scss. :) @grayghostvisuals oic @@~ You're right :) I understand~ I'm actually thinking about making angular-animation a separate repo on my own because angular-animations is kind of vendor-ish with the ng-enter and ng-enter-active classes.