0

If you do encounter opening this question and if you dont know the answer. please upvote it so that i and many others can get answers.. Please dont downvote anyone please!

I want to get the best performance i can on animations for my landing page of my project, I am trying GSAP and raw css and i think none are helping performance gets too laggy at times,

-> I have seen many websites using hardcore and way more complex with animations going sweetly silk continuously and supporting all platforms including mobile phones mostly as well, but my animations are chirpy even when running at PC,

I have been trying to get the solutions, have tried to

  1. remove all the other animating properties other than transform or opacity and
  2. have added css 3d transform hack ,
  3. Using Gsap as well none are helping,

and now i am out of ideas how to get it working, if anyone wants to see my site, this is the link :

webkrushers.com/test/template

Note:

the preloader animation (only css) lags sometimes while loading and the home screen animation as well (the stars are animated via gsap,the BG is moving through css transform and the world is rotating with css transform as well), when i am doing one more animation which is that i want to stamp the big logo and world and then fade it out, it just gets done in steps not smoot at all,

if we get through this i have one more place where animations are not going so well. Hope to get it all sorted and that someone else also learns something from the solutions. you can see it, its in development not so responsive, so open it up at 80% zoom on full HD screens and 67% on HD screens. I would really like help from anyone who can assist me along the way, if he/she feels so. I would also like some recommendations on bettering my UI if someone sees some improvement or replacement that can be made.

Should i try some other thing like, canvas,webGL or web animation API or anything else considering that i want full support till IE9 and mobile devices as well but i dont need the home animation on phones essentially just the loading animation is need in phones.

Vimal__Frontend web
  • 79
  • 12
  • hey guys please dont edit my post, upvote please.. i know what i am asking! – Vimal__Frontend web Jan 28 '17 at 10:38
  • Few suggestions, you have JS inline, make it external and minify it, add Modernizr, remove unnecessary scripts, like if using GSAP, use the one which is required, not all, this may improve the page loading as well as animations. here you get some tips: http://stackoverflow.com/questions/24199004/best-practice-to-organize-javascript-library-css-folder-structure – Sanjeev Kumar Jan 28 '17 at 10:51
  • not helping.. i have scripts inline for loader purposes rest of my files are external.. loading speed is not my concern right now i have ways i can do that later on, i just want to improve renderiing performance – Vimal__Frontend web Jan 28 '17 at 11:17
  • @SanjeevK That has virtually nothing to do with post-initialization runtime performance. – John Weisz Jan 28 '17 at 13:41
  • Your first line made me come in for a fight from the review queue, but IMO, it turns out the question is actually interesting -- although this is likely going to turn into a _discussion_ or a series of _suggestions_, rather than a clear question with a single clear answer. Achieving a perfectly smooth animation is not going to be easy _at all_, especially not with an already established code base. Especially when you need animations while you are loading/rendering something (I don't think this is possible on the web platform at all, without serious compromises). – John Weisz Jan 28 '17 at 13:46
  • More: the question certainly doesn't warrant a downvote, but I'm voting to close it as _Too broad_. Stackoverflow is simply not adequate at working out problems of this size and scale -- this is pretty much in the realm of requiring either a lot of time and effort on your part, or focused, paid professional support, something in the category of [hack.hands](https://hackhands.com/). – John Weisz Jan 28 '17 at 13:52
  • if someone could atleast give me some opinions or help me by seeing my code i would be happy to share it. – Vimal__Frontend web Jan 28 '17 at 14:24
  • if not the loader animation i have some animations in the landing page itself which are too slow at time..what should I do about them, and can canvas be used for the loader will it be a viable option considering responsive, and compatibility upto IE9 and performant as well ? and can i use webGL,i think this would be out of point for my animations as they are mainly for 3d animations and have less support as well, all in all i am trying to be very neat with my heavy presentable animations but they are not being performant! – Vimal__Frontend web Jan 28 '17 at 14:30

0 Answers0