Skip to content

Latest commit

 

History

History
19 lines (16 loc) · 1.02 KB

10-animate-between-css-classes-with-greensock.md

File metadata and controls

19 lines (16 loc) · 1.02 KB
Raw

Animate Between CSS Classes with GreenSock

📹 Video

Animate class changes

  1. Create a div with a class of box.
  2. Establish styles for the .box class.
  3. Add two new classes .hover and .down and styles for both.
  4. Add an eventListener on the box and use 🤔TweenMax.to() to adjust the className of the box.
    • Make sure to add the additional classes. If you replace the class you won't be adding styles to the box, but replacing them.
    TweenMax.to(box, .25, { className: '+=hover' })
  5. Make sure to use opposite addEventListeners to remove the classNames.
    • "mouseenter" adds, "mouseout" removes
    • "mousedown" adds, "mouseup" removes

📹 Go to Previous Lesson 📹 Go to Next Lesson