<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;
}
}
View Compiled
//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
});
});
This Pen doesn't use any external CSS resources.