Jump to content


Background translation and SVG

Moderator Tag
Go to solution Solved by OSUblake,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi there, I'm a bit new in using GSAP.


Recently I have made an animation with high def images and svg shape morphing. I think i'm doing something wrong because this animation is really laggy when I use delays between each elements.


If I play them together at the same time it's really smooth but it's not the effect I want.


Any advice here ?

See the Pen NNLwvm by Awea (@Awea) on CodePen

Link to comment
Share on other sites

Hi awea,


Welcome to the forums!


My first question would be what is it that you are trying to achieve? I had a look at your code, looked at the animation it produces and could not stop myself from thinking you might be using a sledgehammer to put a picture up on the wall.


More often than not, jank will be caused by the browser trying to paint and/or reflow too many things at once. But, some cases, it might be because it is trying to calculate and recalculate too many variables on top of each other.


To me, it feels you don't need all that code to create a simple stagger animation with masked images. It really should be, like, ten lines of code. One of them only the GSAP code. Your compiled JS code is running at 132 lines.


I say all of that because you report the animation running smoothly without the delay. So, assuming that's the case, I would hazard, there's way too many lines in your code.


Note that I could be completely wrong - as I have zero experience with coffeeScript. And the jank is because you are trying to manipulate high def images and SVG morphing - two things that do cause a lot of recalculations. Specially because you seem to be trying to animate the background position.

  • Like 4
Link to comment
Share on other sites

Hello awea, and Welcome to the GreenSock Forum!


I didn't have time to go through all your code. You might want to make a simple limited codepen example with just a couple tweens and elements describing the problem. Since it will take awhile just to figure out what your doing since you really didn't describe the full issue your having. Like what browser you see this on, and how to reproduce the issue? And what elements you are seeing this on.


Regarding delays.. You might want to look into using the position parameter instead of the delays your using.





And here is video tut on sequencing tweens in GSAP:




  • Like 3
Link to comment
Share on other sites

Hello Dipscom and Jonathan,

Both of you thanks for your answers :)

I'm sorry to haven't made my issue clear enough so let me start again.

I'm currently working on a Cordova application using Crosswalk as webview (chromium based) for a Samsung galaxy view. I have to follow a guideline to animate it, all the animation are like this one, but it's the only wich cause me trouble actually. So the testing context is a bit hard to reproduce if you don't have the device.

I'm making some try with the stagger actually, It's more readable and smoother. Any chance to use something like this on my svg arrays ?

Link to comment
Share on other sites

Like i advised above you should get rid of your delay property on your tween, and use the position parameter instead. You will have greater control than using delay. You could also change opacity to use autoAlpha which is part of the CSSPlugin.


autoAlpha is part of the GSAP CSSPlugin



  • 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.x

How to use autoAlpha:

//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});

Basically if you just want to learn how to do something in GSAP.. you should just setup a simple tween without your trying to achieve. We really dont need everything else in your code. Just the GSAP specific tweens. Otherwise it will be difficult for use to debug your code, since we would need your exact testing environment just to debug and looks at a couple of tweens your having trouble animating.


We are more than happy to help you but all we needed is just the tween your trying to animate. It is better to isolate your issue outside your project. Chances are its something within that environment that is causing the bottleneck or performance hit. GSAP is very performance driven. 


Also make sure your not mixing GSAP with CSS transitions you have on the same element, parent or child your animating with GSAP. CSS transitions can cause issues like jank and weird behavior for animations the browser tries to do with JS. So make sure to remove those transitions or set those transitions to none so they don't affect elements your animating with GSAP.


GSAP performs really well on Samsung Galaxy or Android devices.. sometimes emulators or web runtime emulators might not render like an actual browser on an actual android device.



  • Like 2
Link to comment
Share on other sites

Thanks for your advices Jonathan, I've updated the codepen to be more focus on what I want to achieve.


I hope it's more clear now. Can I order animations on each elements by using something else than .eq ?

Link to comment
Share on other sites

  • Solution

First off, you don't have to use .eq. That's jQuery's way of doing a square bracket []. Just think of a jQuery object as an array. It's not an actual array, but it's array-like, so it has numbered indexes and a length property.

// This is the same...

// ... as this

That means you can put the order of stuff in an array, and use a loop to create a lot of your animations. This would create a staggered animation. 

var order = [5, 6, 4, 2, 1, 3, 8, 0, 7];

order.forEach(function(index, i) {  
  tl.to($diamonds[index], 1, { x: 100 }, i * 0.25);

Related thread on using loops...



Using Cordova can be real slow. Animating SVGs can also be real slow. Not a good combination you got going on there. Somebody had a similar issue in this thread...



And my response...



I modified my demo to do something similar to the effect you are trying to do, so this might help you out.

See the Pen 36de37e36e7d3359204cdbecc2023bef?editors=0010 by osublake (@osublake) on CodePen


About Cordova's performance, I'm not familiar with Crosswalk so I can't comment on that. If you're not locked into using it, you might want to check out Cocoon. It has an accelerated Webview, and I've used it in the past to bring my animations up from 10-15fps to a consistent 55-60fps. It's definitely worth checking out.



When it comes to animation on mobile devices, I like to use Pixi.js. It uses WebGL, so it's super fast. Don't know if you're allowed to use something like that, but animating masks like your demo is doing would be a breeze.




  • Like 4
Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.