アニメーション前の状態を
指定してからアニメーション

<script src="//cdn.jsdelivr.net/npm/gsap@3.7.0/dist/gsap.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/gsap@3.7.0/dist/ScrollTrigger.min.js"></script>

gsap.set('.js-demo-section', {autoAlpha: 0}); 

gsap.to('.js-demo-section', { 
  autoAlpha: 1, 
  x: 800,
  scrollTrigger: {
    trigger: '.js-trigger',
    start: 'top center',
    markers: true,
  }
});

<div class="d-demo">
   <section class="d-demo__section d-demo__section--bg">
       <div class="d-demo__main js-trigger">
          <div class="d-demo__wrap">
            <div class="d-demo__elem js-demo-section"></div>
          </div>
       </div>
   </section>
</div>