Jump to content
Search Community

geddski

Business

  • Posts

    20

  • Joined

  • Last visited

 Content Type 

Posts posted by geddski

    Draggable onDragEnd not firing

    in GSAP

    Posted

    I recently upgraded an app to gsap 3 and found that my Draggable instance never fires its onDragEnd event. The other events (onDragStart and onDrag) fire just fine. 

     

    I tried onRelease event also and it doesn't fire either. I'm using React 16.12 and found another post about needing to use dragClickables: true option, but that didn't help. 

     

    In case it's relevant, I'm using:

    this.draggable.startDrag(originalEvent);

     

    to initiate the dragging, as it's a dynamic element that I create rather than one the user touches. 

     

    Any ideas?

    SplitText dropping indents/formatting

    in GSAP

    Posted

    I'm needing to display formatted code with SplitText. Currently it strips out all my spaces. I've tried things like adding a bunch of " " but those get removed as well. I tried the pre tag but no luck either. How do I make it honor spaces/formatting like the docs say it's supposed to? (Note: I also have to add br tags any time I want line breaks, assuming its the same problem)

    See the Pen VyaGRO by geddski (@geddski) on CodePen

    How to use PixiPlugin with webpack?

    in GSAP

    Posted

    I'm trying to bring in the PixiPlugin with webpack (create-react-app setup). 

    import { TweenMax, PixiPlugin } from "gsap";
    console.log(PixiPlugin); // undefined

     

    Tried just using it anyway: 

     

    TweenMax.to(this.ship, 1, {
    pixi: { scaleX: 2, scaleY: 1.5, skewX: 30, rotation: 60 }
    });

     

    but it doesn't do anything. The old way does work however:

    TweenMax.to(this.ship, 1, { rotation: 60 * Math.PI / 180 });

     

    How do you use PixiPlugin with webpack? It appears to be in the npm package...

     

    SplitText fails

    in GSAP

    Posted

    I'm using the SplitText plugin and have run into so many issues. Here is the code I'm using:

     

    // split and animate the text
    const split = new SplitText(this.refs.message, { type: "chars, lines" });
     
    //targets, duration, vars, stagger, onCompleteAll, onCompleteAllParams, onCompleteAllScope
    TweenMax.staggerFrom(split.chars, 0.2, {
      autoAlpha: 0,
      scale: 3,
      delay: this.props.delay || .3,
      onComplete: () => { } },
      0.022,
      this.typingComplete.bind(this)
    )

     

     

    1. Performance is terrible, especially when anything else is happening on the page.

     

    2. It frequently stops, then janks ahead several words in a very jarring way. 

     

    3. It sometimes orphans single letters onto the next line

     

    4. It causes horizontal scrollbars when they're not needed

     

     

    Anything I can do to solve these issues? 

    Draggable Performance Jank

    in GSAP

    Posted

    I guess it certainly could be a bug in the chrome dev tools. It does seem strange (impossible?) for two RAF triggers in one frame. I'll create an issue for them with this example to be sure, and report back here once they've investigated. Thanks!

    Draggable Performance Jank

    in GSAP

    Posted

    Hey guys thanks for checking in. I first noticed performance issues when trying out dragging things in my app on mobile safari (iPhone 6s Plus). I thought it was something I was doing onDrag. But commenting out onDrag entirely didn't help. I rely heavily on chrome devtools to keep my app performant (60FPS) so I tried various optimizations I could think of, all while capturing performance timelines. Again nothing helped, I continued to get frequent drops in FPS, indicated by the green line drops and red flag warnings in the chrome devtools timeline:

     

    f9e06a3b1a030e7543ce4babbb218378.png

     

    To determine if this perf hit was caused by something in my app or something in GSAP I created a standalone codepen that does nothing but use Draggable on a single div. The result was the same: frames frequently taking double the time they should be (~33ms instead of ~16ms). Here's a recording of what I'm seeing, in case it helps.

     

    I do suspect it has something to do with the "ticks" Jack mentioned. I've reproduced this on a 2013 macbook pro and a 2015 macbook pro. If you hit my codepen and record the timeline you should see the same issue. 

     

    Thanks for your help looking into this!

    Draggable Performance Jank

    in GSAP

    Posted

    Hi Jonathan,

    I'm on latest stable Chrome (v47) for OSX. I did as you suggested and switched codepen to debug mode. Same effect. In fact the reason I decided to reach out was because I'm seeing this jank in the app I'm building, so I'm positive it isn't the codepen runtime. 

     

    Switching to Incognito was a good idea, to rule out any of my chrome extensions etc. Same problem :/

     

    Adding position:absolute; to the element also had no effect on performance.

     

    Switching it from a 3d transform (x,y) to a position change (left, top) did not improve performance either. 

     

    As far as I can tell, something Draggable is doing causes certain frames to go over the 16ms budget, to around 33ms (< 30 FPS). See screenshot below. There doesn't appear to be any JS, compositing or painting happening to cause such a long frame. Notice all the empty whitespace. It appears that there are simply *two* Animation Frames firing in a single frame for some reason, causing frames that take twice the time. Strange eh.

     

    98b260947687c31cf007f29c7250d705.png

    Draggable Performance Jank

    in GSAP

    Posted

    I'm trying to achieve 60FPS in my UI. I'm using an x,y Draggable, but cannot currently get a jank-free experience with Draggable which makes me so sad because otherwise I love this tool (and even joined the club). See the chrome profile timeline below. How can we fix this?

     

     

    3b42ecfa2dca3e76192b59376368c434.png

    See the Pen WrXmox by geddesign (@geddesign) on CodePen

×
×
  • Create New...