Swipe js goes haywire when contained elements have animations

[jessepinuelas]

I am creating a feature on a site that has several animations on each slide. The library I am using is GSAP, green sock. Long story short I got all my animations dialed in and when I integrated swipe js the elements within the slide container jump all over the place. It swipes left and right and that works fine but if a slide that I swipe to contains any animations that particular slide goes haywire. This only happens when a slide contains animations.

Has this happened to any one?

[AaronOpfer]

Can you create a jsfiddle demonstrating the behavior? Also: Are you using Swipejs master branch or swipe2 branch?

[phortuin]

Something to do with the callback? After every transitionEnd event, also on child elements, the callback is triggered. This is giving me headaches as well with child elements having CSS transitions.

[AaronOpfer]

If the problem is indeed that transitions inside slides trigger actions in Swipe in the transitionEnd event, then you should set an event listener that captures the events on those inner elements as they bubble up and then execute the stopPropagation() method on the event.

Maybe Swipe should only handle transitionEnd elements if they occur on the slide itself and not any of its descendants. That shouldn't break anything I don't think. I think I'll branch off and see if I can patch this behavior in and test it a bit.

[phortuin]

AaronOpfer: thanks for the tip. I agree, transitionEnd event (and other events) should probably only be triggered on the Swipe element.

Not sure if this is jessepinuelas's trouble as well?

[AaronOpfer]

I reviewed some of the code and it looks like that swipe2 does not have this issue as it tests the slide number before proceeding. Can you try using swipe2? There's a few extra stylesheet rules that accompany using swipe2 over swipe, so check the readme before you drop it in as a replacement.

[phortuin]

Dropped in swipe2 and indeed fixes these issues! Will swipe (by your knowledge) eventually be replaced by swipe2, eg. is it safe to start depending on it yet?

[AaronOpfer]

I believe the plan is for Swipe2 to replace Swipe. You'll have to ask @bradbirdsall :-)

[phortuin]

Sure, thanks for the help!

[phortuin]

Ah, for future reference: https://twitter.com/bradbirdsall/status/293870408267083776

"Hey @bradbirdsall, if I were to start a new project with http://swipejs.com , which branch would you recommend? Master? V2 (swipe2)?"

"@ryexley swipe2 branch :)"

[jessepinuelas]

Hmmm just tried using swipe 2 and I get the same issue. When I get off of work I will post a decent example demonstrating the issue.

[jessepinuelas]

Here is a simplified example of the issue I am having: http://jsfiddle.net/jessepinuelas/JhaFT/58/

It works fine in most browsers but if you view it on an iOS device or the simulator you can view the issue. The animation jumps around and goes off screen.

[AaronOpfer]

I don't have an iOS device or the simulator, unfortunately.

For diagnostic purposes, you should see if the bug still occurs when you edit swipe.js to make it think the browser doesn't support transitions with a patch like this:

  // simple feature detection
  this.browser = {
    touch: (function() {
      return ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;
    })(),
    transitions: false
  };

That would at least give us an idea as to where in the code the bug lives. Although if it's iOS only it might be a browser bug.

[ryexley]

Just tossing in my $.02 where it wasn't asked for...

I'm using the v2 branch, and have several pages that contain CSS3 animations that are running with no problems.

[thebird]

Swipe2 is now master. Let me know if this solves everything, hopefully :)

You guys are awesome!