Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Ajar

Simple Animation test

Recommended Posts

I've made a small animation test, trying to mimic this simple effect  My code is available here and this is a screen-capture recording the results. 4 browsers from left to right:

IE11 - a complete mess, not web worthy... then Microsoft Edge 13 - notice a round circle is a bit too much to ask... I used border-radius. Then comes the mighty Google chrome - notice how the animation elements are pixelated during the animation to achieve "performance"... and last is Firefox which is the only browser that delivered a sharp result although the movement was a bit jumpy lacking smoothness and elegance. I've used GSAP which uses a css plugin to animate the css properties via JS. Someone please tell me how this site is looking great even on IE11? It uses the same GSAP animation library as mentioned here... 

Any thoughts on techniques they may have used to improve the appearance of these animation?

 

Footnote - I didn't add codepen since it didn't run my code correctly. I tried.

Link to post
Share on other sites

Hello Ajar, and Welcome to the GreenSock Forum!

 

Do you have a live code example so we can see your code in context?

 

That type of effect should be really straight forward, especially with GSAP. Not sure what your CSS, HTML, and JS code looks like, and that will be hard to know what your doing based on those static examples you provided above.

 

Here is a video tut on how to create a codepen demo example. This way we can test your code live to better assist you! ;)

 

 

Thanks :)

  • Like 3
Link to post
Share on other sites

Hey Jonathan,

Thank you for responding so quickly but it looks like you haven't really read my post. 

I took the bother of linking to a Gist with all of the code, did a screencast showing the result, added relevant references and explained why I did not use codepen.

Please review my post references and content again if you will.

Cheers

Ajar

Link to post
Share on other sites

Thanks Ajar, I do appreciate you providing those screenshots and various html, js, and css from various places. ;) But I did read your post and looked at your static examples. But in order to properly test its best to have code we can test live. Since it will be hard to try various things without a live code example.

 

Codepen is easy to setup and makes sure we are able to properly assist you, so we don't just shoot in the dark with code we cant test live. Especially when trying to debug various browsers, where making a slight change to the CSS or JS can help fix things due to the various browser behavior and browser bugs. You will find that we are very quick to reply and quick to help in the forums. And its a big help to us, if we are provided a live code example which helps us focus on the GSAP related issue, so we can rule out or fix any browser bugs and behavior.

 

For example some things you can do is not animate the CSS properties top and left. It is better to animate x and y instead so you animate on a sub-pixel level, and can take advantage of animating using the GPU (hardware acceleration). CSS position offsets like top and left will trigger layout causing jank (lost frames), and only animate on a pixel level making your animation choppy and less smooth. CSS position offsets are only good for the initial position of your elements. And then you would animate using transforms x and y.

 

There are other things you could do, but a codepen demo example will help us help you! Thanks again! :)

  • Like 2
Link to post
Share on other sites

Hi and welcome to the forums,

 

I have to agree with Jonathan, code in a gist is not something we can easily troubleshoot and collaborate with (edit, fork, share).

I pasted your css, js, and html into a codepen and it seems to work: http://codepen.io/GreenSock/pen/WrJKba

 

I took the liberty of hosting your deer.svg in our account (but in the future you can host it on your own server and pull it in).

 

My guess is that you are getting some odd scaling results of the deer in IE may be due to the way it is handling an svg without a set width and height. 

 

As you noticed, Chrome gets performance by sacrificing visual integrity and FireFox does the opposite. Unfortunately, GSAP does not control how browsers choose to optimize. In general though I would recommend not scaling divs with border-radius. See what even CSS animations look like in webkit browsers: http://codepen.io/GreenSock/pen/obdMzZ

 

That chekhov site is awesome. Thanks for sharing. I did a quick look in dev tools and it looks like they are using a mix of canvas, svg, and dom. I imagine they did a considerable amount of research to find which one performed best across browser for each effect.

  • Like 2
Link to post
Share on other sites

Ajar, The closest thing i could come up with to that google circle animation, without spending too much time to recreate what you have was this.

 

Keep in mind that this is just a quick setup of it, minus any icon images or animated text

 

Full version in codepen:

 

See the Pen qbYyba by jonathan (@jonathan) on CodePen

 

And the live editable version in codepen:

 

See the Pen qbYyba by jonathan (@jonathan) on CodePen

 

Maybe you can use this to build your example from?

 

Also i noticed in your code on Gist that you are using a GSAP timeline (TimelineLite) but you are using the delay property on your to() tweens instead of the GSAP position parameter. Check this page for more info on the GSAP position parameter,

 

http://greensock.com/position-parameter

to( target, duration, vars, position )

 

Thanks :)

  • Like 2
Link to post
Share on other sites

You know, it's threads like these that show what a unique and cool place the GreenSock forum really is. :)

 

There was another poster a couple days ago that thought Carl was just trying to sell a Club membership instead of showing a way to solve the problem without a plugin. In that case a Club plugin would have solved his problem quickly and easily and it truly was the best solution. I've been around here for awhile and I've never seen any hard sell of a membership. Instead, I see posts like this one. Jonathan has presented a lot of great information and Carl, as usual, has gone above and beyond by creating a CodePen for the OP and providing more solid information. Club members and non-members get the same great service and attention. I think that needs recognizing once in awhile. Truly cool you guys. 8-)

 

My measly two cents worth on the problems Ajar is seeing: everything above is great information and I'd definitely second what Carl is saying about IE and the non specified size of an SVG. IE is major pain with SVGs. One thing that has helped me a few times is the Padding Hack. Here's a great article about it and more about making SVGs responsive.

http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/

 

Happy tweening.

  • Like 5
Link to post
Share on other sites

Awesome demo Jonathan.

 

Craig, thanks for all your support. It means a lot. Your 2 cents are never measly.

  • Like 3
Link to post
Share on other sites

Here is another fork from my example above, where i added an SVG to scale as well. Tested in IE11, Firefox, and Chrome (Windows 7 64-bit)

 

See the Pen xZjaJa by jonathan (@jonathan) on CodePen

 

You will notice that i start off with an SVG that is already at the largest size i will be scaling to. And then scale from 0 to 1 (0 to 100%) scale factor. This way you don't get a blurry SVG in Chrome which is webkit based.

 

Webkit based browser have a anti-alias bug when scaling passed a scale factor of 1. I am also adding force3D:false on the SVG element tween, to help with other webkit blurry anti-alias bugs, and since SVG does not support 3D transforms at this time.

 

You could use any SVG file. I didn't use your dear SVG since i would have to resize it bigger since it was too small. But for time sake i just used one of my own SVG elements. Also note you can always bring your SVG file inside Adobe Illustrator or a vector editing program, and resize the SVG to the full size you need.

 

You will also notice in my example that I am only scaling the blue circle so its just big enough to expand the main container. You dont want to use high scales like a scale factor of 12, unless needed. Since if you look at the browser inspector you will see that a large circle / element will still cause repaints on the screen for all the space it takes up, even when at position absolute. So you should only need enough scale factor to pass the main container, since that main container will have overflow: hidden and it only needs to be expanded to fill the main container. This will help in better performance since you wont have to needlessly scale items larger than whats need for the effect you want to achieve. ;)

 

Happy Tweening! :)

  • Like 2
Link to post
Share on other sites

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.

×