Jump to content



Recommended Posts

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.

Link to comment
Share on other sites

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. 

  • Thanks 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites


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)]




  • Like 3
Link to comment
Share on other sites

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


  • Like 1
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.