Can SmoothState.js be replicated with GSAP?

[rhormazar 0 Likes (Newbie)]

I don't know if this is an adequate post, but I wanted to know the input from GSAP pros regarding SmoothState.js

 

http://miguel-perez.com/ (Click on the blog posts since they are the only internal pages. It seems like there is not a good demo about it)

 

It creates incredibly smooth transitions from one page to the other. Could the same be accomplished using GSAP? 

[djanes376 6 Likes (Newbie)]

From my knowledge, this is not something greensock would handle on its own. Being an animation platform it could handle the animation of the transitions but it looks like SmoothState.js is a mixture of html push state, ajax, and animation together. I would hijack the animation with GSAP for the performant animation but leverage the rest of smoothstate for the dynamic loading. 

[OSUblake 13,967 Likes (Superhero)]

If you're asking if you can use SmoothState with GSAP, the answer is yes. Just briefly looking over the README page, it looks like SmoothState is trying to control everything, including animations, so you're probably going to have to do something like @djanes376 suggested. There are other single-page application (SPA) frameworks that will probably work better with GSAP, so you might want to search around for something that gives you more control over the animations.

[rhormazar 0 Likes (Newbie)]

Great! Thank you both, very much. 

[chrisk2020 9 Likes (Newbie)]

Just as a footnote here - smoothstate doesn't control the transition animations and it is really simple to use GSAP to do so. The repo mentions using velocity.js, but you can leverage the power of gsap.

 

 

smoothState.js will not add page transitions to pages. You'll need to define the animations you want to run using the hooks smoothState.js provides.

• onBefore - Runs before a page load has been started
• onStart - Runs once a page load has been activated
• onProgress - Runs if the page request is still pending and the onStart animations have finished
• onReady - Run once the requested content is ready to be injected into the page and the previous animations have finished
• onAfter - Runs after the new content has been injected into the page and all animations are complete

 

Smoothstate has onStart, and onReady functions so at it's most basic you can just add your transitions in there:

        var $page = $('#main'),
        options = {
          debug: true,
          prefetch: true,
          cacheLength: 2,
          onStart: {
            duration: 500, // Duration of our animation
            render: function ($container) {
              // Add your CSS animation reversing class
              $container.addClass('is-exiting');
              
              TweenMax.to($container.find('.scene_element'), 0.5, {x: '-100%'});

            }
          },
          onReady: {
            duration: 0,
            render: function ($container, $newContent) {
              // Remove your CSS animation reversing class
              $container.removeClass('is-exiting');
              // Inject the new content
              $container.html($newContent);

              TweenMax.from($container.find('.scene_element'), 0.5, {x: '100%'});
            }
          }
        },
        smoothState = $page.smoothState(options).data('smoothState');

Obviously, you could get much more creative - use a reversed timeline or whatever.