billy nugz

Wanted to add my 2 cents as I stumbled across this thread in my own search for help with gsap/barba. So far this seems to work for me. Still in dev so no warranties on production level code here var tlLoader = new TimelineMax({}); //Using timeline in my project var FadeTransition = Barba.BaseTransition.extend({ //define the transition in barba start: function() { Promise .all([this.newContainerLoading, this.fadeOut()]) //when new container is loading run you transition animation .then(this.fadeIn.bind(this)); }, fadeOut: function() { var deferred = Barba.Utils.deferred(); //define deferre so you can wait for transition to complete tlLoader.set('#loader',{y:'0%'}); //run your fade in tweens here I'm Morphing a svg over my content but you can do whatever you wish tlLoader.to('#loader-bg-svg-path', 1, {morphSVG:'M 0 -5 L10 -10 L10 15 L0 20 Z',ease:Linear.easeNone, onComplete: function () { deferred.resolve(); } }); return deferred.promise; //return deferred to promise so we can move to fadeIn step }, fadeIn: function() { document.body.scrollTop = 0; //this scrollTop might be redundant Im still in dev with this this.scrollTop(); var $el = $(this.newContainer); //run your fade out tweens here tlLoader.to('#loader-bg-svg-path', 0.7, {morphSVG:'M 0 15 L10 10 L10 15 L0 20 Z',ease:Linear.easeNone}); tlLoader.to('#loader', 0, {y:'-100%',ease:Linear.easeNone}); tlLoader.set('#loader-bg-svg-path', {morphSVG:'M 0 -5 L10 -10 L10 -5 L0 0 Z',ease:Linear.easeNone}); this.done(); }, scrollTop: function() { var deferred = Barba.Utils.deferred(); var obj = { y: window.pageYOffset }; TweenLite.to(obj, 0.4, { y: 0, onUpdate: function() { if (obj.y === 0) { deferred.resolve(); } window.scroll(0, obj.y); }, onComplete: function() { deferred.resolve(); } }); return deferred.promise; } }); Barba.Pjax.getTransition = function() { return FadeTransition; };

First off thank you for taking the time to write that. I really do appreciate it and would not be this far along with out the help. I poked around with things off and on today and think I came up with a solution for running this with multiple svgs/canvases/contexts. Take a peek and let me know what you think, its a little loopy (pun intended) but should work. Thanks again guys, *Bill sends virtual chest bump*

Hey guys, agreed, trying to jam to much jelly on the bread at once I have stepped away from it for the evening. The morphsvg stuff and canvas animation is new to me. From the little I know about svg and canvas I read there were a few performance/browser compatibility pluses to rendering to canvas. Thats why I chose this route. I'm guessing I should get the svg animating the way I like it then render that animated svg to the canvas. Currently I'm doing the reverse with some strange results. I will strip it down and take another stab at it and report back. Thanks again guys.

Ok guys, is there anyway to animate only certain paths on a svg? Also should you animate the svg then change context of canvas or create canvas context and then animate the specific paths? Take a look at what I'm doing on this pen, the 1,2,3 approach above is what I need to do (I think) but I'm falling flat on the animation part. My thanks in advance.

Hey, Yes thanks. A little bit to go before production but this is a great starting point thanks again for the info. Once done I will post the results.

Hey thanks for the response, sorry if I wasn't clear. Basically I wanted to use MorphSVG to animate 3 or more svg paths smoothly. I'm currently trying to pick apart this code pen. Its a little much for what I want to do but performance wise seems fine. I'm really just working toward a simplified version of this (code pen below) and was wondering about best practice as it relates to MorphSVG/TimelineMax. Is it better to use TimelineMax to achieve this? Worse? Why? Thanks again.

Hello, I'm trying to mimic the morphing effects found on this sight https://en.creddy.ru I started modifying some of the examples I found poking around the forums (code pen attached) but I cant seem to get the Timeline animations to be as smooth. The rough approach I want to take for this would be as follows: 1 Loop through all "image containers" find find svg 2 Loop through svg to find paths with class "morph" 3 Use the morph paths to create animation Step 1 and 2 I can solve for but I don't know enough about the MorphSVG plugin to make the effect smooth and via canvas. I assumed using TLM would be the best bet but if anyone has any pointers or suggestions on how to approach this better please let me know. My thanks in advance.

Hmmm looks like switching to alpha worked out. TweenLite.from(content, 1, {delay:0,css:{alpha:0}}); TweenLite.from(document.getElementById("myLogoImg"), 1, {delay:1,css:{alpha:0}});

Hey there, Im trying to set up a simple animation for a child and parent div set up like so; <div id="content"> <img src="logo.png" id="myLogoImg"> </div> The content div has a background that I would like to autoAlpha up from 0 then bring my myLogoImg up after a 1 second delay. The problem Im having is that I can only ever seem to tween one or the other not both. my tweens look like this TweenLite.from(document.getElementById("myLogoImg"), 3, {delay:0,css:{autoAlpha:0}}); TweenLite.from(document.getElementById("content"), 3, {delay:3,css:{autoAlpha:0}}); Am I going about this in the wrong way? My thanks in advance.