Share Posted July 24, 2015 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 post Share on other sites
Share Posted July 24, 2015 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. 2 Link to post Share on other sites
Share Posted July 25, 2015 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. 2 Link to post Share on other sites
Author Share Posted July 31, 2015 Great! Thank you both, very much. Link to post Share on other sites
Share Posted June 18, 2016 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. 5 Link to post Share on other sites