Jump to content
Search Community

Can SmoothState.js be replicated with GSAP?

rhormazar test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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? 

Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

  • 10 months later...

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.

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