Jump to content

Robert Wildling

GSAP with VueJS and state management?

Recommended Posts

Hi, dear GSAP community,


I am learning my way through this and that, and next up is, what is called "state management". There are frameworks like Redux, martyjs, mobxjs etcetc. So far it seems to be a technology that is used for handling big amounts of shared data (and keeping them synchronized).


Being  totally new to this topic, it might be too early to ask a question here, but nevertheless I thought I'll give it a try: Can state managers also be used to handle "animation logic" in an application? Is it the "right" way to go or am I starting to think in a totally wrong way?


So far, I haven't found any tutorials that deal with state management for "animation logic".


The reason why I ask is this: I keep bumping into the situation, where a specific type of animation logic problem occurs. Namely, when navigating to different pages. Let's say there is a "home page", an "about", a "contact" and a "blog" page with respective menu buttons. When being on the "home " page, clicking "about" initiates an animation that handles the transition to the "about" page. But when I am on the "contact" page and click the "about" button there to get to the "about" page, a different kind of animation should handle the page transition (simply because things are different now: the top menu is narrowed down yet, the logo is probably smaller and hides a specific text section...).


This is not so much a problem, when the visitor starts at the "home" page. But I am very confused, when it comes to handling a situation, where somebody directly enters the website at the "about" page. Or when somebody sends a link to the "blog" posts (or maybe even a specific blog entry) to a friend via email, who then clicks the link. How can I then handle my application's "animation state" - so-to-say (in lack of a better word).


Any tips or hints are most appreciated!



Link to comment
Share on other sites

Hi @Robert Wildling


Everything you described can be done using transitions with Vue's router.


State management is more of a pattern, and adds a layer of complexity that might not be needed if you're just starting out. From the author of Redux, You Might Not Need Redux. But if you want to want to get into state management, Vue has it's own version called Vuex.


To learn more about working with Vue and GSAP, you should follow Sarah Drasner.


  • Like 2
Link to comment
Share on other sites

@OSUblake thanks for your most helpful reply!!! Looking forward to checking out Sarah Drasner!


Best wishes and have a good day!

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.