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.

Improve this question
8
  • hey guys please dont edit my post, upvote please.. i know what i am asking! Commented Jan 28, 2017 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: stackoverflow.com/questions/24199004/… Commented Jan 28, 2017 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 Commented Jan 28, 2017 at 11:17
  • @SanjeevK That has virtually nothing to do with post-initialization runtime performance. Commented Jan 28, 2017 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). Commented Jan 28, 2017 at 13:46
Related questions
4
How to optimize animation on canvas? HTML 5
13
CSS3 animations and performance: are there any benchmarks?
0
How is this In-browser lightweight animation done?
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.