GSAP + SWUP

[blopiblop]

Hello everyone, some guy of the team wanted to add Swup to our project.

Did you had to manage a project with both Swup + Gsap, if so how did you managed the animation layer of the project.

 

I thought about keeping the "arrival" animations actualy done on the timile gsap when the page load and then use swup only for the leaving animations, what do you think of this  (and how do you do it) ? Or do you use Gsap for both arrival and leaving effects and use Swup just for SPA effect + little transition animation between pages ? 

I can't find any topic on the web on how to use both of those tools.

[ZachSaucier]

Hey blopiblop. I haven't used Swup before but it looks like it does page transitions and has some built in animation support.

 

It looks like you can hook into Swup's events to do your own animations (like GSAP animations) if you want to. So you could do the enter or leave or both animations with GSAP. Or you could use GSAP for all the non-page-transition animations on your page. Or you could use a different tool like Barba which just does the content switching and then hook it up to GSAP for the animation part. Lots of possibilities. 

[blopiblop]

Thank you very much, I'm just starting using GSAP and I'm amazed by the product and also the availability of the community to help newbies like me. 

Wish you a good day.

[akapowl]

 

Hey @blopiblop

 

On the page for their js-plugin they even have a basic example of how to use it with GSAP - although it is an old example stillt using TweenLite:

 

 

Basic usage with tools like GSAP would look something like the following:

 

const options = [
  {
    from: '(.*)',
    to: '(.*)',
    in: function(next) {
      document.querySelector('#swup').style.opacity = 0;
      TweenLite.to(document.querySelector('#swup'), 0.5, {
        opacity: 1,
        onComplete: next
      });
    },
    out: (next) => {
      document.querySelector('#swup').style.opacity = 1;
      TweenLite.to(document.querySelector('#swup'), 0.5, {
        opacity: 0,
        onComplete: next
      });
    }
  }
];

const swup = new Swup({
  plugins: [new SwupJsPlugin(options)]
});

 

 

 

[ZachSaucier]

See the migration guide for info on converting the above to GSAP 3: