Marshmallow

December 20, 2016

Glad to hear that! Keep on coding

December 20, 2016

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.

December 20, 2016

tl.add("slindeMoves", "-=0.5");

*Magic* :mrgreen:

You are magic my good sir

December 20, 2016

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.

December 20, 2016

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

December 16, 2016

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:

See the Pen woRKGm by lavandongen (@lavandongen) on CodePen

Though addmitedly this is dodging the problem of the backgroundPosition bug in Chrome and other browser

December 15, 2016

Hello Marshmallow and Welcome to the GreenSock Forum!

When i inspect your code the only thing i see choppy is the background image position your animating with jQuery css().

jQuery is really bad at animating stuff. I would suggest that you dont use jQuery css() and use GSAP set() instead.

It looks like you are triggering animating it via the resize event that has jQuery css() to animate background-position-y. But that resize event will fire sporadically. You would need to also add a throttle or debounce type of resize event so it fires consistently and not when i resize is not needed.

Also i notice you are setting css properties like opacity transforms via jQuery css() instead of using GSAP to set your css properties using GSAP set()

GSAP TweenMax set() : https://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/

GSAP TimelineMax set() : https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/set/

Also take a look at the GSAP CSSPlugin Docs, it will help you better understand GSAP and CSS

GSAP CSSPlugin Docs: https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

GSAP TweenMax Docs: http://greensock.com/docs/#/HTML5/GSAP/TweenMax/

This way GSAP knows what you are setting, otherwise when you use jQuery css() GSAP has no way of keeping track of what you change outside it. You know what i mean.

For example another thing you can do in your tweens you can use autoAlpha instead of opacity for better performance:
autoAlpha
Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want.
//fade out and set visibility:hidden
TweenLite.to(element, 2, {autoAlpha:0});

//in 2 seconds, fade back in with visibility:visible
TweenLite.to(element, 2, {autoAlpha:1, delay:2});
Once you get used to the GSAP API .. things will become much easier.

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)

December 15, 2016

Thanks Jonathan!

I'll have a look at it

December 15, 2016

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

See the Pen jVQarX by lavandongen (@lavandongen) on CodePen

December 14, 2016

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

December 13, 2016

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

December 12, 2016

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

December 12, 2016

Hi Marshmallow,

Welcome to the forums!

If you create a demo of what you are trying to achieve, does the same issue occurs? I see nothing particularly wrong in the code you have posted so, it will probably be something else on your setup.

With a live demo we can see everything in context, making it easier to identify what could be wrong in the setup. Without the whole context, it is very hard to debug as we would be shooting in the dark. Here's how to create a codePen. And bellow the video with a walkthrough.

I have created acodepen that suffers from the same problem here:

December 12, 2016

I have created a codepen that has the same problem here:

December 12, 2016

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

See the Pen jVvYKa by lavandongen (@lavandongen) on CodePen

Notifications

Messages

Marshmallow

Posts

Joined

Last visited

Content Type

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by Marshmallow

Minimize weight of plugins in rendering

Minimize weight of plugins in rendering

Delay an entire label

SVG dropshadow filter animation with set()

Delay an entire label

Bad performance in Chrome

Bad performance in Chrome

Bad performance in Chrome

Bad performance in Chrome

Repetitive code reduction

Using $(this) in function onComplete

Slow animation start and Staggered Pause

Slow animation start and Staggered Pause

Slow animation start and Staggered Pause

Slow animation start and Staggered Pause