Animate text seperate from parent div with GSAP

Question

I am trying to animate a parent div (working as expected) but at the same time animate the H1 to animate the opposite way so they "meet" when the animations are done running.

HTML:

  <div class="slide--in-left">
            <h1 class="slide--in-right">TEXT IN FROM RIGHT</h1>
  </div>

JS / GSAP:

function slideLeft() {
        TweenMax.set($('.slide--in-left'), {opacity: 0, x: 100});
        TweenMax.staggerTo('.slide--in-left', 1.5, {
            opacity: 1,
            x: 0,
            ease: Back.easeOut.config(1.7)
        });
    }
    slideLeft();

    function slideRight() {
        TweenMax.set($('.slide--in-right'), {opacity: 0, x: -100});
        TweenMax.staggerTo('.slide--in-right', 1.5, {
            opacity: 1,
            x: 0,
            ease: Power0.easeNone
        });
    }
    slideRight();

Answer 1

The issue here is not your animation so much as your logic.

The child header is likely positioned relatively to the container/background. So you'd have to move it twice as far as the background in order to make up for the difference. However, you'd also have to match the easing of the background animation.

Most likely the easier solution is to not have the text be positioned within the container. To do that, size the background how you want it, absolutely position the text, and then do the animation that you're wanting to do.

Side notes:

• There's no reason to use a jQuery selector here. You can just pass a string (like your last Tween) and GSAP will automatically use .querySelectorAll() on it.
• If you only have one of these, there's no reason for a staggerTo, a to will suffice. If you do have multiple, you should add a stagger value (like stagger: 0.15 or something).
• Most likely it'd be better to use a timeline since your animations are paired. That will allow you to reverse it, change the speed, or do other manipulations like that if you want to later on.