ScrollTrigger.jsで
複雑なアニメーション

<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-section5,.js-demo-section6, .js-demo-section7", { scale:0.5,borderRadius: '50%' ,duration: 0.8});

/*-- 基本条件をセット --*/
const custom_anime = gsap.timeline({
  repeat: -1, // アニメーションの繰り返し回数。-1で無限回
  repeatDelay: 0.6, // ループとループの間の時間
  scrollTrigger: {
    trigger: ".js-trigger",
    start: "center center",
    end: "bottom center",
    toggleActions: 'play pause resume reverse', 
    markers: true,
 },
});

/*-- アニメーションをセット --*/
custom_anime.to('.js-demo-section5', { keyframes: [
  { duration: 0.5, x: 100,y:-85 },
  { duration: 1, x: 300,y:295}, 
  { duration: 1.2 , x: 500,y:-85},
  { duration: 0.5, x: 725, y:50},
  { duration: 1, x: 400, y:295},
  { duration: 1, x:0, y:0},
]});
custom_anime.to('.js-demo-section6', { keyframes: [
  { duration: 1.4, x: 500,y:185 },
  { duration: 1, x: 725, y:50}, 
  { duration: 1 , x: 220,y:-200},
  { duration: 0.8, x:0, y:0},
]}, "<1");
custom_anime.to('.js-demo-section7', { keyframes: [
  { duration: 1.5, x: 725,y:-60 },
{ duration: 1.9, x:0, y:0},
]}, "<0.8");

<div class="d-demo">
   <section class="d-demo__section d-demo__section--bg d-demo__section--lg">
       <div class="d-demo__main js-trigger">
          <div class="d-demo__wrap">
            <div class="d-demo__elem js-demo-section5"></div>
             <div class="d-demo__elem d-demo__elem--color1 js-demo-section6"></div>
            <div class="d-demo__elem d-demo__elem--color2 js-demo-section7"></div>
          </div>
       </div>
   </section>
</div>