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. Additionally, the deployment of JavaScript console.log was advised to monitor the data changes and responses. Suggestions to seek advice from AI like ChatGPT and to research how the card-stacking effect is accomplished via GSAP were also given, with emphasis placed on the use of GitHub as a learning resource.

(Source: Office Hours 10/18/2023 AM )

State Change Members Can View The Video Here

View This Video Now

Join State Change Risk-Free