Determining and Managing Web Animation Hierarchy with GSAP
The State Changers meeting primarily revolved around a discussion of GSAP (GreenSock Animation Platform), dealing with issues related to animation, interactivity, opacity, and control over DOM elements.
The main problem encountered was the inability to determine which card is in view or should be during a scroll animation, preventing the implementation of an effect where a new card is displayed after a determined scroll threshold. This challenge was compounded by the fact that all cards are technically in view, making it difficult to identify which one is on top.
Different approaches to solve this issue were considered, including the use of other slider libraries or GSAP with callbacks to manage the sequence of card visibility events. The suggestion was made to search for GSAP-based slider libraries on GitHub for studying purposes and to use GSAP's on complete and on update event callbacks to trace the animation's progress and control what happens next.