<div class="container">
  <h2>Basic use of GSAP to(), from() and fromTo() methods</h2> 
  
  <div class="example">
    <h3 class="example__title">GSAP to()</h3>
    <button class="example__button" id="to-button">Play</button>
    <img class="example__element" id="to-element" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/drinkmebottle.gif" alt="Alice" />
  </div>
  
  <div class="example">
    <h3 class="example__title">GSAP from()</h3>
    <button class="example__button" id="from-button">Play</button>
    <img class="example__element" id="from-element" style="position:relative;" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/drinkmebottle.gif" alt="Alice" />
  </div>
  
  <div class="example">
    <h3 class="example__title">GSAP fromTo()</h3>
    <button class="example__button" id="from-to-button">Play</button>
    <img class="example__element" id="from-to-element" style="position:relative;" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/234228/drinkmebottle.gif" alt="Alice" />
  </div>
  
</div>

$main-color: #ab7ae9;

* {
  box-sizing: border-box;
}

*:after, *:before {
  box-sizing: inherit;
}

body {
  width: 100%;
  height: 100%;
  background-color: $main-color;
  line-height: 1.5;
}

.container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto 5%;
  padding: 1em 0;
  font-size: 1.5rem;
  text-align: center;
  background-color: $main-color;

  h2 {
    color: white;
    font-size: 1.6rem;
  }
}

.example {
  width: 200px;
  margin: 0 auto 40px;
}

.example__title {
  font-size: 1.3rem;
  color: white;
}

.example__button {
  background-color: transparent;
  color: white;
  padding: 0.5em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
  border: 3px solid darken($main-color, 10);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.3s;
  
  &:hover,
  &:focus {
    border-color: darken($main-color, 20);
  }
}

.example__element {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 10px;
  
  &:nth-of-type(1) {
    margin-top: 1.5em;
  }
}

//to() method
const toButton = document.querySelector('#to-button'),
      toElement = document.querySelector('#to-element');

//the page loads with the element 
//in a slanted position: notice 
//the set() method (no duration)
TweenMax.set(toElement, {rotation: -45});

//from slanted, the element rotates 
//360 degrees and ends up upright
toButton.addEventListener('click', () => {
  TweenMax.to(toElement, 1, { rotation: 360 });
});

//from() method
const fromButton = document.querySelector('#from-button'),
      fromElement = document.querySelector('#from-element');

//the element is animated from -100px using
//translate-x under the hood
//and ends up in its default position 
//as set in the CSS
fromButton.addEventListener('click', () => {
  TweenMax.from(fromElement, 1, {
    x: -100
  });
});

//fromTo()
const fromToButton = document.querySelector('#from-to-button'),
      fromToElement = document.querySelector('#from-to-element');

//the element starts from -100px along 
//the Y axis (top) and ends up being 
//translated to its default position as 
//set in CSS
fromToButton.addEventListener('click', () => {
  TweenMax.fromTo(fromToElement, 1, {
    y: -100
  }, {
    y: 0
  }); 
});