Marshmallow

Glad to hear that! Keep on coding

Honestly all I know is that if you use an external link the files are already minified. If you are using TweenMax instead of TweenLite see if you need anything included in TweenMax and if not consider using TweenLite which is a bit faster. Though any modern PC should have no problem processing the animations of GSAP. The only time I notice slow downs is on the duo core PC with 3GB Ram Pc at work.

You are magic my good sir

Hi there, calling functions is a bit wonky as I experience it myself. I fixed it by calling the functions within a function as shown below onComplete: function() {readSVG();}, onUpdate: function() {setLogoShadow();} Hope this fixed it for you p.s. keep in mind that calling a function with onUpdate keeps recalling the function, as to such depending on what you try to do it might try to do it 300 times. In this case it is no problem though.

Hi, I am (still) working on a big animation and am currently transferring all to a timeline because I didn't do so before. I now have three labels. 'titleOut', 'slideMoves' and 'titleIn' and I want everything with the label 'slideMoves' to start 0.5 seconds earlier instead of waiting till 'titleOut' is finished. Is there a way to specify that without adiing '-=0.5' to every single object? Thanks ~Marshmallow

I have worked out how to get it smooth in all browsers. I have removed the background image and replaced it with an image that is 150% of the width/height and applied overlfow hidden to it's parent. therefrom I just moved it with GSAP as I would any div and that works perfectly The working example can be found here: http://codepen.io/lavandongen/full/woRKGm/ Though addmitedly this is dodging the problem of the backgroundPosition bug in Chrome and other browser

Hi I've gone through the changes you've suggested. Though to no prevail. On Chrome it is still as choppy and with a low FPS As for the resize() trigger, that is only there to change the background-size and has nothing to do with the rest of the page. And since that ain't animated I am just changing it with css() (besides I tried it with set() just now but it didn't work so well)

Thanks Jonathan! I'll have a look at it

Hi there! I have been using GSAP for 4 days now and I have been trying to create a fullscreen slideshow of projects for a portfolio. So far I have all the animations and timing however in Chrome the transitions are really slow, sluggish and I get baout 10fps once it transitions. In IE however it runs flawlesly with little to no framedrops. I have already tried to add z: 0.01 to the animations and a few other tricks (as you might see in my codepen) but nothing seems to work. Could anyone tell/explain to me why this happens. How to control the slideshow: Swipe, Scroll, press up/down or use the black boxes to go up/down or back to the first slide. Thanks in advance. ~ Marshmallow

Hi, I currently have a piece of code that works as a slideshow and on each slide it changes the values of some elements. However to keep the user from going to the next slide while the last one is still busy I have added a onComplete and onUpdate variable to every part of the animation to keep checking if the animation is done. However this has resulted in quite the long code. Is there any way I can use less lines here? my code: function moveSlideUp(w) { if(w.prev().is('.work-slide')) { w.toggleClass('active'); w.prev().toggleClass('active'); // Clearing all inline styles remove_style($('.title')); remove_style($('.subtitle')); remove_style($('.categories').find('li')); remove_style($('.case-button')); // Title animation TweenMax.to(w.find('.title'), 1, { left: -200, opacity: 0, onUpdate: function() {isUpdating = true;}, onComplete: function() {isUpdating = false;} }) TweenMax.to(w.find('.subtitle'), 1, { left: -200, opacity: 0, delay: 0.2, onUpdate: function() {isUpdating = true;}, onComplete: function() {isUpdating = false;} }) TweenMax.staggerTo(w.find('.categories').find('li'), 1, { left: -1000, opacity: 0, delay: 0.4, onUpdate: function() {isUpdating = true;}, onComplete: function() {isUpdating = false;} }, 0.1) TweenMax.to(w.find('.case-button'), 1, { left: -200, opacity: 0, delay: 0.6, onUpdate: function() {isUpdating = true;}, onComplete: function() {isUpdating = false;} }) TweenMax.from(w.prev().find('.title'), 1, { left: -200, opacity: 0, delay: 1.2, onUpdate: function() {isUpdating = true;}, onComplete: function() {isUpdating = false;} }) TweenMax.from(w.prev().find('.subtitle'), 1, { left: -200, opacity: 0, delay: 1.4, onUpdate: function() {isUpdating = true;}, onComplete: function() {isUpdating = false;} }) TweenMax.staggerFrom(w.prev().find('.categories').find('li'), 1, { left: -1000, opacity: 0, delay: 1.6, onUpdate: function() {isUpdating = true;}, onComplete: function() {isUpdating = false;} }, 0.1) TweenMax.from(w.prev().find('.case-button'), 1, { left: -200, opacity: 0, delay: 1.8, onUpdate: function() {isUpdating = true;}, onComplete: function() {isUpdating = false;} }) // Major movement below TweenMax.to(w, 1, { top: '100%', ease:Power2.easeInOut, delay: 1, onUpdate: function() {isUpdating = true;}, onComplete: function() {isUpdating = false;} }) TweenMax.to(w.prev(), 1, { top: 0, ease:Power2.easeInOut, delay: 1, onUpdate: function() {isUpdating = true;}, onComplete: function() {isUpdating = false;} }) TweenMax.to('.next-work', 0.5, { opacity: 1, cursor: 'pointer', ease:Power2.easeInOut, delay: 1, onUpdate: function() {isUpdating = true;}, onComplete: function() {isUpdating = false;} }) if(!w.prev().prev().is('.work-slide')) { TweenMax.to('.prev-work', 0.5, { opacity: 0, cursor: 'auto', ease:Power2.easeInOut, delay: 1, onUpdate: function() {isUpdating = true;}, onComplete: function() {isUpdating = false;} }) } else { TweenMax.to('.prev-work', 0.5, { opacity: 1, cursor: 'pointer', ease:Power2.easeInOut, delay: 1, onUpdate: function() {isUpdating = true;}, onComplete: function() {isUpdating = false;} }) } } } Thanks ~ Marshmallow

Hi, I was just wondering if it is possible to call upon a function with onComplete that would then use a tweenmax to create a new effect. But only for the object that called the onComplete, so I thought I'd use $(this) (so I can use the same function with different onCompletes) but that does not seem to work. So far I only have this: var titleAnimation = function() { TweenMax.to($(this), 1, { color: 'red' }); } Thanks in advance ~Marshmallow

I have it fixed, I gave the first commands order 1 were it should've been order 0. I guess it took a second to figure out I started it at #1 not #0

I have created acodepen that suffers from the same problem here: http://codepen.io/lavandongen/pen/jVvYKa

I have created a codepen that has the same problem here: http://codepen.io/lavandongen/pen/jVvYKa

Hi there, I am working on a way for divs to slide away on scrolling/clicking a button. That seems to be working just fine. However when I do this the first time it takes an entire second before the divs start moving. Every action after that is instantaneous. But for some reason when it starts the timeline it takes that entire second. Here is a gif of it in action, I click as soon as my mouse is on the black box. And here is the code of my timeline var tlWork = new TimelineMax({paused: true}); tlWork .to('.prev-work', 0.3, { opacity: 1, cursor: 'pointer' }, 1) .to('.yellow', 1,{ top: '-100%', ease:Power2.easeInOut }, 1) .to('.blue', 1, { top: '0', ease:Power2.easeInOut }, 1) .addPause() .to('.blue', 1,{ top: '-100%', ease:Power2.easeInOut }, 2) .to('.red', 1, { top: '0', ease:Power2.easeInOut }, 2) .to('.next-work', 0.3, { opacity: 0, cursor: 'auto' }, 2) ; $('.next-work').on('click', function() { tlWork.play(); }); $('.prev-work').on('click', function() { tlWork.reverse(); }); $(".content").on('mousewheel DOMMouseScroll', function (e) { var direction = (function () { var delta = (e.type === 'DOMMouseScroll' ? e.originalEvent.detail * -40 : e.originalEvent.wheelDelta); return delta > 0 ? 0 : 1; }()); if(direction === 1) { tlWork.play(); } if(direction === 0) { tlWork.reverse(); } }); Other than that I also have another question. Right now I have to add separate classes for each new box that would be added, costing me and the company a lot of time if we were to add new items. Is there a way to advance the animation by one step and then pause even if they all have the same class? Maybe a staggered animation can be paused in some way? Thanks in advance for your help. ~ Marshmallow EDIT: Link to Codepen http://codepen.io/lavandongen/pen/jVvYKa