icdindia

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

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.

@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.

@OSUblake 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.

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.

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.

try this http://scrollmagic.io/docs/animation.GSAP.html

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) https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/getLabelAfter/ https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/tweenTo/ Hope this helps.

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. http://codepen.io/vikrant-icd/pen/xdYpxg?editors=0010 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