📹 Video
Create a box in index.html.
- div with id="box"
Use gsap to style box.
- use TweenMax.set() - syntax
TweenMax.set("selectedElement", {properties})- Take a look at 🤔Common CSS Properties Reference to see how CSS properties are defined in javascript.
- Use TweenMax.to() inside the eventListener callback function.
document.addEventListener('click', event => {
TweenMax.to("#box", 0.5, {
rotation: 30
})
})- Expected behavior will be that a 'click' anywhere on the document will set off an animation on the div with id="box" ("#box") to change it's 'rotation' to 30 degrees.
- Additional clicks will appear to have no effect since the rotation is already at 30 degrees.
- To rotate on additional clicks change,
rotation: 30
to
rotation: "+=30"
- This will add 30 degrees to the current rotation value and animate the change to that new rotation value.
- Now additional clicks will continue to rotate the #box.