Grid Zoom while Scrolling with GSAP Flip and ScrollTrigger. GSAP let's us enhance an existing Webflow animation because we can tween (animate) pretty much ANY CSS property. In this tutorial I'll show you how I improved a previous grid zoom while scrolling animation by also animating grid-column-gap, grid-row-gap, border-radius, opacity, and transforms with Greensock Animation Platform (GSAP). Both Webflow and GSAP are super powerful animation engines, but GSAP gives us a few more properties that we can animate, which we sometimes need to get that animation feeling JUST RIGHT. This is a great animation to feature gallery content and utilizes important skills with position sticky, transforms, and combo classes. The GSAP Flip Plugin provides a different but handy way of thinking about building animations by defining beginning and end states with combo classes.

gsap,  gsapscrolltrigger,  gsapanimation,  webdesign,  gallery,  imagegallery,  scrollanimation,  scroll,  scrolling,  scrollinteraction,  scrolltrigger,  customjavascript,  scrolleffects,  zoom,  imagezoom,  transforms,  flip,  animation,  whilescrolling,  whilescrollinginview,  animationonscroll,  sectionscroll,  animateonscroll,  animations,  imageanimation