Jump to content
Search Community

Revert all animations when entering page

Nicksav test
Moderator Tag

Recommended Posts

On my website, I use a GSAP timeline to animate the submenu. The user clicks on the main menu and then the submenu appears in a cool way.

I wrote the code below to simply showcase my example, there are alot more animations going on.

 

  gsap.defaults({ease:"power1.out"});
  var mn = gsap.timeline({});

  jQuery('.menu-products').click(function(){
    mn.to(".nav-products",{
      duration:.8,
      opacity:1,
      zIndex:999,
    });
  });

So when I click on an item on the menu with the class menu-products, a big fullscreen submenu will appear.

I am also using BarbaJS to transition smoothly from page to page. So I also have this code:
 

    leave(data) {
      var mn = gsap.timeline({});
      mn.to(".nav-products",{
        zIndex:-1,
        opacity:0;
      });
      return gsap.to(data.current.container, { opacity: 0 });
    }

This way, when someone clicks on a submenu link, the whole submenu will animate back to opacity:0 and y:100vh so it will disappear from the screen. All good so far.

 

So the story is this:

  1. User enters website
  2. They click on the menu item
  3. Submenu appears with animation
  4. User clicks on a submenu item
  5. The submenu is running an animation (the one you see above in the leave(data) function) so that it closes.
  6. User is being transfered to a new page
  7. User again clicks on a menu item
  8. Submenu appears without animation

 

So my problem is that the animation never runs if it has run one time before. This happens due to BarbaJS not actually reloading the website, but simply refreshing the content. So when the original animation of the submenu run once at the start, now even if we are transfered in a new page, the GSAP thinks that it's done with the animation and nothing should run again now.

 

There is a fix for this problem. Simply tell BarbaJS to run an animation when the user leaves the page. This animation will be an opacity:0 and zIndex:-1 so that we go in our original state. Pretty much revert all animations one by one everytime we leave the website.

 

Problem is, there are alot of elements that I animate and I wanted to know if there is some other solution.

 

I have tried adding inside the leave(data) function a mn.reverse() but it didn't do anything.

 

Is there a way to mass-revert all animations to their original state? Or I have to manually write each animation again?

 

PS: I tried to create a CodePen but it doesn't work due to BarbaJS, so I cannot showcase my problem there. I would have to purchace CodePen PRO to create a Project, but this is not possible. If the admins are okay with it, I can share my development website to showcase my problem better. Let me know if I can share :)

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.
×
×
  • Create New...