Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Any reason why GSAP wouldn't work?

edited April 2015 in Help! with 2.0
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/pJopax

As 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

  • OK, well I figured out what the bug was with the new Chrome version.

    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.
  • Hmmm, Google turned up this:

    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.
  • Claretta wrote:

    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.
  • That's unfortunate. Maybe I'll redo my story in 1.4 then. It should be easy enough to copy paste stuff across.

    I did, however, get it to work by pasting this in the final html file directly:

    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
    Maybe I'll just have to add in all animation after I finish writing the story.
  • The other problem I am finding with the Chrome bug is that the default transitions for the save/load and restart screen look like crap now.

    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


    #ui-bar, #ui-body {
    -webkit-transition: all 100ms linear;
    transition: all 100ms linear;
    }
    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.
  • I managed to smooth it out by inserting this monster of code:

    #ui-bar, #ui-body {
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: color 0 ease-in;
    transition: none;
    -webkit-animation: fadeIn 1000ms 1 forwards;
    animation: fadeIn 1000ms 1 forwards;
    -moz-animation: fadeIn 1000ms 1 forwards;
    }
    Where the animation keyframing is just an opacity fade in.

    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.
  • Claretta wrote:

    The other problem I am finding with the Chrome bug is that the default transitions for the save/load and restart screen look like crap now.

    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?


    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.
  • That's a good thought, I'll give it a go.

    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.
  • After turning off the background images I'm still getting that slow step-in opacity jittering. (the opacity filter that gets applied to the whole screen when the ui options open).

    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.

    #ui-overlay {
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: color 0 ease-in;
    transition: none;
    -webkit-animation: fadeIn 1000ms 1 forwards;
    animation: fadeIn 1000ms 1 forwards;
    -moz-animation: fadeIn 1000ms 1 forwards;
    }
    Makes it super smooth.
  • The only problem with that is it doesn't animate the UI in Firefox, which I find totally weird, since that same code animates passages in Firefox.

    At least Firefox transitions work for the UI, so I can use -moz- transitions and -webkit- animations.
  • I have a way to change the story stylesheet.Go to #TWINETUESDAY.
Sign In or Register to comment.