Search code examples
javascriptcssanimationgsap

can't hide overflow of my sun animation

I want to make a sunrise and sunset animation at the bottom of the screen. The starting point should be outside the viewport and slowly move to the center-middle and then slowly move beyond the egde of the screen in the bottom right while smoothly moving on top of all other html content.

https://codepen.io/imaginfox/pen/oqqpLK

My problem is that when it leaves the screen a vertical scrollbar appears. Also The path of the sun is a bit off as it is not centered in the middle of the viewport, I thought using percent values instead of X and Y pixel values would make it responsive e.g. mobile friendly.

CSS:

#sun {
  height: 500px;
  width: 500px;
  left: 0%;
  top: 100%;
  border-radius: 50%;
  background-color: yellow;
  position: absolute;
  z-index: 1000;
  overflow: hidden;
}

Javascript:

<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
</head>
<body>

    <div id="sun"></div>

    <script type="text/javascript">


    TweenMax.to("#sun", 5, {
        bezier: {
            type: "soft",
            values: [
                { left: "0%", top: "0%" },
                { left: "100%", top: "100%" },
            ]},

        ease: Linear.easeNone,
        repeat:-1,
    });
    </script>
</body>
</html>
Solution

  • Use overflow: hidden; on container element

    UPDATED: https://codepen.io/anon/pen/NYYORO wrapper should be relative or at least not static, height should be not in % if no any parents with exact height declared.