
billy nugz
Members-
Posts
9 -
Joined
-
Last visited
Recent Profile Visitors
1,101 profile views
billy nugz's Achievements
9
Reputation
-
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.