Paddle and Ball

index.html

<div id="wrap">
  <div class="box"></div>
  <div class="ball"></div>
</div>

paddle-and-ball.markdown

Paddle and Ball

A Pen by motion@hook on CodePen.

License.

script.js

let tl = gsap.timeline({repeat: -1});

let yHigh = 60;
let yLow = 180;
let yTop = -160;

tl.add([
  gsap.timeline({defaults: {ease: "power3.inOut"}})
  .set(".box", {x: -180})
  .to(".box", 1, {x: 180})
  .to(".box", 1, {x: -180})
], 0);

tl.add([
  gsap.timeline({defaults: {ease: "power0.inOut"}})
  .set(".box", {rotation: -340})
  .to(".box", .1, {rotation: "-=5", ease: "power2.out"})
  .to(".box", .8, {rotation: 330, ease: "power2.inOut"})
  .to(".box", .1, {rotation: 340, ease: "power0.out"})
  .to(".box", .1, {rotation: "+=5", ease: "power2.out"})
  .to(".box", .8, {rotation: -330, ease: "power2.inOut"})
  .to(".box", .1, {rotation: -340, ease: "power0.out"})
], 0);

let upBox = CustomEase.create("custom", "M0,0,C0.272,0,0.472,0.455,0.496,0.496,0.574,0.63,0.712,0.916,1,1");

tl.add([
  gsap.timeline({defaults: {ease: "power1.inOut"}, repeat: 1})
  .set(".box", {y: yHigh})
  .to(".box", .1, {y: yHigh-40, ease: "power2.out"}) // ends the little pop up as ball makes contact with an easeOut. 
  .to(".box", .4, {y: yLow})
  .to(".box", .4, {y: yHigh+10, ease: upBox,})
  .to(".box", .1, {y: yHigh, ease: "power2.in"}) //starts the little pop up right before loop point with an easeIn.
                                                 //Together with the first tween, makes an inOut across the loop point.
], 0);


//// ball bounce

//X
tl.add([
  gsap.timeline({defaults: {ease: "power0"}})
  .set(".ball", {x: -180})
  .to(".ball", 1, {x: 180})
  .to(".ball", 1, {x: -180})
  //.to(".ball", .02, {})
], 0);

//Y
tl.add([
  gsap.timeline({repeat: 1, repeatDelay: 0})
  .set(".ball", {y: yHigh+9})
  .to(".ball", .07, {y: yHigh-49, ease: "power0.out"})
  .to(".ball", .465, {y: yTop, ease: "power1.out"})
  .to(".ball", .465, {y: yHigh+9, ease: "power1.in"})
], 0);

//SQUASH AND STRETCH
tl.add([
  gsap.timeline({repeat: 1, repeatDelay: 0, defaults: {transformOrigin: "50% 50%"}}) //Repeats 1 bc this is half the dur of the main tl.
    .set(".ball", {scaleX: 1.5,scaleY: .6}) //squash
    .to(".ball", .035, {scaleX: .6, scaleY: 1.7, ease: "power4.in"}) //stretch
    .to(".ball", .465, {scaleX: 1, scaleY: 1, ease: "power2.out"}) //ball form
    .to(".ball", .465, {scaleX: .6, scaleY: 1.7, ease: "power3.in"}) //stretch
    .to(".ball", .035, {scaleX: 1.5,scaleY: .6, ease: "power4.out"}) //squash
], 0);

//ROTATION
tl.add([
  gsap.timeline({defaults: {ease: "power3.inOut"}})
  .set(".ball", {rotation: 20})
  .to(".ball", 1, {rotation: -20})
  .to(".ball", 1, {rotation: 20})
], 0);


tl.timeScale(.9)

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase3.min.js"></script>

style.css

body {
  background: lightyellow;
  display: flex;
  height: 100vh;
}

#wrap {
  position: relative;
  margin: auto;
  width: 100px;
  height: 100px;

}

.box {
  position: absolute;
  background: tomato;
  width: 150px;
  height: 20px;
  border-radius: 15px;
  margin: auto;
}

.ball {
  position: absolute;
  left: 60px;
  top: -29px;
  background: steelblue;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}