Skip to content

Instantly share code, notes, and snippets.

@frederikbosch

frederikbosch/gsap-to-left.js

Created January 9, 2016 16:48
Show Gist options
  • Save frederikbosch/c689d034acb5de1f1ff4 to your computer and use it in GitHub Desktop.
Save frederikbosch/c689d034acb5de1f1ff4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. frederikbosch created this gist Jan 9, 2016.
    36 changes: 36 additions & 0 deletions gsap-to-left.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    import Ember from "ember";
    var RSVP = Ember.RSVP;

    export default function () {
    if (!this.newElement) {
    return RSVP.resolve();
    } else if (!this.oldElement) {
    this.newElement.css({visibility: ''});
    return RSVP.resolve();
    }

    return new RSVP.Promise((resolve) => {
    var tweenComplete = () => {
    this.oldElement.css({
    visibility: 'hidden'
    });
    this.newElement.css({
    visibility: ''
    });
    resolve();
    };

    this.newElement.css({
    visibility: ''
    });

    var timeline = new TimelineMax({
    onComplete: tweenComplete,
    paused:true
    });

    timeline.insert(TweenMax.fromTo(this.oldElement[0], 0.2, { x: 0}, {x: this.oldElement.width() * -1}));
    timeline.insert(TweenMax.fromTo(this.newElement[0], 0.2, { x: this.oldElement.width()}, {x: 0}));
    timeline.play();
    });
    }
    36 changes: 36 additions & 0 deletions gsap-to-right.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    import Ember from "ember";
    var RSVP = Ember.RSVP;

    export default function () {
    if (!this.newElement) {
    return RSVP.resolve();
    } else if (!this.oldElement) {
    this.newElement.css({visibility: ''});
    return RSVP.resolve();
    }

    return new RSVP.Promise((resolve) => {
    var tweenComplete = () => {
    this.oldElement.css({
    visibility: 'hidden'
    });
    this.newElement.css({
    visibility: ''
    });
    resolve();
    };

    this.newElement.css({
    visibility: ''
    });

    var timeline = new TimelineMax({
    onComplete: tweenComplete,
    paused:true
    });

    timeline.insert(TweenMax.fromTo(this.oldElement[0], 0.3, { x: 0}, {x: this.oldElement.width()}));
    timeline.insert(TweenMax.fromTo(this.newElement[0], 0.3, { x: this.oldElement.width() * -1}, {x: 0}));
    timeline.play();
    });
    }