icdindia
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by icdindia
-
-
Hi All,
Thanks for the priceless time that you have spent on your input. I come here to give you some good news.
I have been able to solve the problem for at least iOS devices and I just couldn't have done this without everyone's input.
The issue was mostly with the HTML CSS and not a lot with javascript.
So, when it comes to mobile, resources are limited and I had a lot of dom elements and a lot of css position fixed.
The final solution was many fold :
1) Reducing 22k dom elements to 6k dom elements,
I had 12 svg images. The need for so many svg elements was to have a crisp image on all devices and do minor svg animation using css. Removing most of the svg images and replacing them with 2x GIF images, reduced the number of dom elements to 6k approx. The size of the GIF images was also considerably less than SVG images.
2) Replacing position fixed with position absolute
Position fixed was leading to increase memory usage and was not working well especially on ios devices. I did not go into the depth of the reason behind it but moving to position absolute improved the performance quite a bit.
3) Using display none for inactive html blocks
I have a single page application without the use of any ajax or angularjs. So, when I use autoAlpha to hide the blocks, it leaves the dom element active on the page. Making display none, it removes the element from the browser memory and it does not increase the memory usage. Again I did not have time to go indepth of how this is working but basically by turning on an off parts of the html, the performance has improved dramatically.
4) Reducing GIF animations
Although GIF animations are one of the core elements on the website, but they lead to reduced FPS and increased load on memory. Reducing the number of GIF animations have improved the performance but we have not eliminated them completely. There still are a lot of GIFs on a single page but they are necessary for the product and worth the sacrifice.
I hope people who come to read this article, learn from my mistakes. I will put up a blog entry in a few weeks, with supporting articles.
Thanks again for your support. The website will launch in a few days and we will submit it for showcase on your website. It will be an honour for us, if it is selected to be displayed on showcase list.
-
2
-
1
-
-
@OSUblake thanks for the input.
Also, I found that position: fixed was causing a lot of trouble on mobiles. After removing it, the project is much faster. I will look into the bugs that you have pointed out and will try to resolve them. Starting afresh is not an option due to time limitation but thanks a lot for your help.
I will let you know how I was able to finally resolve all the issues. Thanks for your time.
-
1
-
-
2 hours ago, OSUblake said:
The purple areas of the graph show when the browser is rendering. It's constantly rendering, even when there is nothing really moving around on the screen. I don't know what it's rendering, but it sure is busy. Probably dealing with those 22,000 nodes your app created. Where or what those nodes are doing is beyond me, but they're most likely coming from that huge memory leak shown on the blue lines with the garbage collection. When you see sawtooth or steadily increasing patterns in your memory timeline, that's a good sign you have a memory leak.
thanks for pointing me in the right direction. I did some reverse engg and found that the high number of nodes was due to the SVGs that I had used in the website. After removing the SVGs it has come down to 9k(max) from 42k(max) but still this is a lot. I have not updated the code on the server so you wont be able to see the effect but I am still working on it and will get back to you as soon as I have more data.
Currently my focus is to reduce the js heap which is at 20mb at the moment. If you can provide some input how I can find which line is leading to the js heap, i would highly appreciate it.
Thanks a lot for your time. It is highly appreciated.
-
12 minutes ago, Jonathan said:
Just my observation and two cents
Thanks a lot for your observation and it really does help. Yes the gifs are important and is required by the designers.
Removing them does improve the performance a bit but the website is still crashing and memory leak is still at large.
Though I will look into reducing the size of the gifs to reduce the overall load on the website.
Thanks.
-
wow
great input.
Thanks a lot for your time and the details. I will plan how to move forward n will let you know if I am able to find a solution.
Will it be too much if I were to ask you for a suggestion for an architecture that will allow me to go back and forth and calling the correct animation instead of loading all the animations at the same time.
Should I be using jquery click function to call different tweens for each page instead of playing one timeline?
Or should I have one timeline for each chapter?
Do let me know what you think is the best way to go forward.
Thanks a lot again. I really enjoyed working with GreenSock and I would recommend it to every other developer I meet.
-
2
-
-
Dear Carl,
Thanks a ton for the input. I really do understand what it takes to go through someone else's code.
- I have tried removing all custom ease and still the website crashed,
- I have tried to remove the timelines for most of the chapters and still the website crashed,
- it really doesn't matter which Chapter I remove, the website crashed under all circumstances. I am not able to pin point any specific reason.
This begs me to wonder if something is wrong with the way I am using GSAP.
Can you please provide some more input on which other tweens might be responsible for the excessive load on the processor?
Also, is there any way to debug or identify what is causing the excessive cpu / ram usage? Is there any other tool that I can use to debug the website?
Would you like to suggest a format that would be much less cpu intensive but give the same result?
Thanks again for your effort. You are a life saver.
-
Hi,
I am aware my question is not complete but I need help to help you help me
Do let me know what more I can provide to find a final solution.
We have created an entire website using GreenSock animation. There is one master timeline. Other timelines only perform certain animations.
We are using TweenMax along with eraser.js, howler.js, slick.js, splittext.js, jquery-ui.js.
The issues is that the website keeps on crashing on mobile devices, including iPhone 6s plus. This is because website is alot RAM heavy and does not work well on any device which has less ram. It includes iPhones, iPads, most android smartphones. It works flawlessly on devices with good ram (OnePlus3). I have used all browsers on the phones on which the website crashed. It is impossible to find the issue as I do not get any error log on crash. I have reach the conclusion that the issue is RAM based on the observation that after restarting the phone the website works fine for a few minutes before crashing again.
I have tried to debug it using chrome inspect element but have not been able to reach any conclusion.
Following are the elements that I have looked at.
- svg animation, I only have 1 single svg animation in the beginning of the website,
- dom elements. The number of dom elements was too much because of splittext which is not resolved,
- using x and y instead of left and top for better performance,
- using scale in only one animation
- using autoAlpha everywhere instead of opacity
I kindly request you to provide me more details on how can I debug my website. Following is the link : www.icdlabs.in/final
If you require any specific part of the code, I will post it here, please do let me know.
Thanks in advance. -
-
4 hours ago, Robert May said:
Thanks for your response, I've been playing with the code pen for a while. When I added ".add(pause)" to your code pen it would no longer tween from start to end or end to start, should that be a problem and if so, is there another way to pause the timeline without interfering with tweening the timeline?
Hi,
You can easily pause a timeline by using .addPause()
https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/addPause/
To jump to next label, use:
var nextLabel = getLabelAfter()tl.tweenTo(nextLabel)See the Pen aWExEE by vikrant-icd (@vikrant-icd) on CodePen
-
3
-
-
Hi,
I have added all tweens to one timeline and my life is much easier now.
Thanks for the tip.
-
Hi,
Thanks. This is exactly something that I was looking for.
But the next button stops working if you click anywhere else on the screen.
Any suggestions?
-
Hi,
masterTl.seek(label) jumps to the label without playing any animation.
but i tried
masterTl.play(label)
and it works but it is skipping a few slides.
If you see the code pen below, it will skip the second slide and go directly to slide 3.
Please see if you can help me resolve this issue.
See the Pen xdYpxg?editors=0010 by vikrant-icd (@vikrant-icd) on CodePen
Thanks
-
Hi,
Actually I was talking about the same issue. I have nested timelines to smoothen out the workflow.
The addPauses are added so people can read the content on the different slides.
Now I am not able to play the nested timelines using a single function so the user can just tap on the screen and go from one page to the last.
Please suggest how can I can use pause in nested timelines and still play them again on click function .
Thanks
-
Hi
I have gone through a lot of posts and found that tweento(getlabelafter()) will take me to the next label.
But the issue is that it doesn't allow me to skip any tween and jump to the next label.
Can you please have a look at the codepen n suggest a way to skip a tween so i do not have to wait for the tween to be over before going on to the next label
See the Pen Lyeaex?editors=0010 by vikrant-icd (@vikrant-icd) on CodePen
-
Hi,
I have the same issue.
Following is my codepen. Please suggest the best way out.
See the Pen gWoqMP?editors=0010 by vikrant-icd (@vikrant-icd) on CodePen
-
hmm.. thanks for the input.
I'll get back with a codepen soon.
Thanks.
-
Hi,
First of all thank you for developing such an amazing lib and it has made our lives much simpler.
We are developing a major website using greensock where all the animations are being handled by various timelines.
it is a single page website so there is no page refresh.
The top navigation helps navigating between timelines by tl.play().
These timelines also have a loop of flickering text set to repeat -1
The issue arrises when we load a new timeline and go back to the previous timeline. Then the loop starts running twice and the page crashes.
I wish to kill all timelines on the document whenever a new timeline is loaded.
Because there are like 20 chapters, it would be very very tedious to kill all animations on every click.
I tried using TweenMax.killAll();
this abruptly kills all animations ( even if i have an animation playing ) and the next animation doesnt play.
I tried using chap2.kill();
this works nicely but is not expandable. There are going to be 20 chapters which will make developer's life miserable.
My code :
chap1 = TimelineMax
chap1.to(something)
chap2 = TimelineMax
chap2.to(something)
// option 1 (not working)
//click on chap1 in top navTweenMax.killAll();chap1.play(0);//click on chap2 in top navTweenMax.killAll();chap2.play(0);// option 2 (working but tedious)//click on chap1 in top navchap2.kill();chap1.play(0);//click on chap2 in top navchap1.kill();chap2.play(0);Can you please help me out over here. How to use killAll to enable a seamless display of animation.
I was short on time so didnt make a codepen. If my query is not clear I will make a codepen n provide the details too.
Thanks for your product. I hope it will keep on becoming better every day.
Performance Issues on Mobile
in GSAP
Posted
thank you all for your support, it is highly appreciated. Please have a look at the final product. I would suggest using an iPhone 6 or better along with your headphone for the best experience.
www.theministryofutmosthappiness.com
Please consider posting our website as a showcase on your website. In case you require any further details, you can write to me at vikrant at icdindia dot com