This is kinda a technical question so I'm ok if it can't be answered.
The recent Chrome update introduced a few css animation bugs into my story, so I've been looking at switching over to Javascript animation, using the GSAP plugin. (
http://greensock.com/gsap)
Except, it doesn't seem to work in Twine for me.
So to test it I played around with this:
http://codepen.io/anon/pen/pJopaxAs you can see the html background slowly fades to black.
Now if I put that all into twine by:
1. Putting the source Javascript into the javascript passage (just copy pasted the whole TweenMax.min.js file and dumped it in there)
2. Creating the appropriate css classes
3. Putting this in a passage:
<script>TweenLite.to("html", 10, {className: "black"});</script>
...it doesn't work.
Comments
It seems to now get fiddly with playing more than one transition at the same time. So if your passage and background transitions coincide, the background transition will be processed really slowly, making it very jagged looking.
This is kinda unfortunate. I think the only way around it is using Javascript to handle the background transitions. Forcing GPU etc didn't work.
http://twinery.org/vanillatest/discussion/2065/how-would-i-use-greensock-animation-library-with-twine
Guess I'm doing something wrong somewhere. :P
I'll try the suggestion in that post, although I'm not entirely sure how it corresponds with Twine 2.0.
It doesn't. The recommendation in that thread (original here), uses a feature of Twine 1.4 which doesn't exist in Twine 2.0.
I did, however, get it to work by pasting this in the final html file directly: Maybe I'll just have to add in all animation after I finish writing the story.
I haven't touched any of the UI transition code and it's really jerky in Chrome. Still looks fine in Firefox.
I was able to improve it slightly by directly removing the default transitions in the html file under appearance/structural.css, but it still looks a little bad, as there are pauses between each of the fade-in steps. There must be a step-in I missed removing somewhere.
Is this issue existing for anyone else?
EDIT:
Got it a bit smoother by adding to override the default transition, but there's still a weird flicker caused by the UI having an extra transition there somewhere I haven't located yet. The UI popup comes into focus, then blinks again. This also happens in my other UI popups.
What would I have to alter to get rid of all UI transition effects but that one? I'm working from the old bleached CSS stylesheet as a base.
EDIT 2: The flicker only happens in Chrome as well. Firefox is really smooth.
Although the UI darkening of the background still looks a bit jittery, so I still need to find what's affecting that and disable that stepping in and convert it to animation code instead of transitions.
Chrome 42 (on Win 7) works just fine on my testbed story (using SugarCube 1.0.20). As a guess, try removing any background images and trying again (it could be that changing opacity over a large image could be problematic). If that solves it, then you know where to look.
Unfortunately, removing the background images in my story isn't really feasible, but perhaps there's a way to mitigate it.
However, it seems that only CSS transitions are suffering. I can convert things to animation to smooth it back out.
The only negative with that is I have to do some really hacky use of pseudo :before elements to actually make a large image transition using just animation. It works, it's just... a lot of css coding.
And as a further test I completely deleted all my user css and javascript modifications... and bugs are still there.
So right now my best guess is that it is a Windows 10 thing. That's the only thing that makes sense if I'm not applying any user css or javascript.
Since it seems there's nothing I can do to solve this bug, what I'd like to do is to change the properties of that whole-screen opacity filter that comes up. Like make it instant instead of stepping in. What would be the easiest way to do that? I checked the css and I can't spot anything that changes it.
I do see an option to change opacity in the API, but that's it.
EDIT: Solved my own problem after I saw in the API documentation a reference to UI overlay. Makes it super smooth.
At least Firefox transitions work for the UI, so I can use -moz- transitions and -webkit- animations.