Display element over text - html,css,js

Question

I want to overlap a ScrollMagic animation on a text, and not make the animation a separate section like it is right here:

There is supposed to be text over there but it made this animation into a new section where the text is at the bottom.

Code:

gsap.registerPlugin(MotionPathPlugin);

const tween = gsap.timeline();
tween.to(".paper-plane", {
  duration: 1,
  ease: "power1.inOut",
  motionPath: {
    path: [
        {x: 100, y: 0},
        {x: 300, y: 10},
        {x: 500, y: 100},
        {x: 750, y: -100},
        {x: 350, y: -50},
        {x: 600, y: 100},
        {x: 800, y: 0},
        {x: window.innerWidth, y: -250}
    ], 
    curviness: 2,
    autoRotate: true
  }
});

const controller = new ScrollMagic.Controller();
const scene = new ScrollMagic.Scene({
triggerElement: '.animation',
duration: 1000,
triggerHook: 0
})
.setTween(tween)
.setPin('.animation')
.addTo(controller);

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
header, footer{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Montserrat", sans-serif;
}
header h1{
    font-size: 60px;
}
.animation{
    height: 100vh;
    position: relative;
    overflow: hidden;
}
.paper-plane{
    position: absolute;
    top: 50%;
    left: 0%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/MotionPathPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<div class="animation">
        <img class="paper-plane" src="https://i.postimg.cc/W1w9dT1x/paper.png" alt="Paper Plane">
    </div>

What would I need to add to my css so that the animation displays on top of the text, I have not provided the code for my text because it can be any text in general. I just want this animation to work over text and not have a separate section of its own. Any suggestions?

Answer 1

you need to set the display to absolute

gsap.registerPlugin(MotionPathPlugin);

const tween = gsap.timeline();
tween.to(".paper-plane", {
  duration: 1,
  ease: "power1.inOut",
  motionPath: {
    path: [{
        x: 100,
        y: 0
      },
      {
        x: 300,
        y: 10
      },
      {
        x: 500,
        y: 100
      },
      {
        x: 750,
        y: -100
      },
      {
        x: 350,
        y: -50
      },
      {
        x: 600,
        y: 100
      },
      {
        x: 800,
        y: 0
      },
      {
        x: window.innerWidth,
        y: -250
      }
    ],
    curviness: 2,
    autoRotate: true
  }
});

const controller = new ScrollMagic.Controller();
const scene = new ScrollMagic.Scene({
    triggerElement: '.animation',
    duration: 1000,
    triggerHook: 0
  })
  .setTween(tween)
  .setPin('.animation')
  .addTo(controller)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header,
footer {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Montserrat", sans-serif;
}

header h1 {
  font-size: 60px;
}

.animation {
  width: 100%;
  height: 800px;
  position: absolute;
  overflow: hidden;
}

.paper-plane {
  position: absolute;
  top: 0;
  left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/MotionPathPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<div class="animation">
  <img class="paper-plane" src="https://i.postimg.cc/W1w9dT1x/paper.png" alt="Paper Plane">
</div>

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et ultrices neque ornare aenean. Tortor dignissim convallis aenean et tortor at risus. Ullamcorper eget nulla facilisi etiam dignissim
  diam. Id diam maecenas ultricies mi eget mauris pharetra et ultrices. Vitae auctor eu augue ut lectus arcu. Dui nunc mattis enim ut. Tempor orci eu lobortis elementum nibh tellus molestie nunc non. Vel turpis nunc eget lorem dolor sed. A lacus vestibulum
  sed arcu non odio euismod lacinia. Eget mi proin sed libero enim sed faucibus turpis in. Mattis rhoncus urna neque viverra justo nec ultrices dui sapien. Sed ullamcorper morbi tincidunt ornare massa. Eu feugiat pretium nibh ipsum. Vitae elementum curabitur
  vitae nunc sed. Vitae auctor eu augue ut lectus arcu. Mattis nunc sed blandit libero. In ante metus dictum at tempor commodo ullamcorper a. Mus mauris vitae ultricies leo integer malesuada nunc vel risus. Vivamus at augue eget arcu dictum varius. Faucibus
  ornare suspendisse sed nisi lacus sed viverra. Pellentesque dignissim enim sit amet. A diam sollicitudin tempor id eu nisl nunc. Lobortis elementum nibh tellus molestie nunc non blandit massa. Et netus et malesuada fames ac turpis egestas integer. Vivamus
  at augue eget arcu dictum varius duis. Ut sem nulla pharetra diam sit amet. Ipsum dolor sit amet consectetur adipiscing elit. Urna id volutpat lacus laoreet non. Commodo odio aenean sed adipiscing diam donec adipiscing tristique risus. Amet nulla facilisi
  morbi tempus iaculis. Nullam vehicula ipsum a arcu cursus. Suspendisse sed nisi lacus sed. Tristique risus nec feugiat in fermentum posuere urna nec. In hac habitasse platea dictumst quisque sagittis. Nam at lectus urna duis convallis convallis tellus.
  Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Orci sagittis eu volutpat odio. Magna eget est lorem ipsum dolor sit amet consectetur.
</div>