Search the Community

Hello everyone and TIA for all your support! I am making a landing page with GSAP, ScrollTo and ScrollTrigger plugins. As you can see from the Codepen, there is a simple scrolling animation with a specific duration on page load. The animation brings the user smoothly from A section to C section. While on Safari and Firefox (Win and Mac), the animation starts smoothly and correctly, on Chrome and Android browsers (Mi Browser in my case) it stops and it doesnt' run but after some seconds. It seems that duration in this case is read by Chrome like a delay and not the duration of the entire animation. The pen on Chrome explain exactly the problem, while on Safari or Firefox is running good. Anyone has an idea how to fix this strange behavior ? Thank you!

I will update this original post with the latest info as everyone shares their approach/technique: GreenSock Community, I just wanted to reach out and see what others are doing to help the animation speed/repaint/performance... I am pretty new to all this so I'm not sure what the best approach is... also as I search for solutions, sometimes, I find that I am starting to follow something that is not considered the best/latest approach. Here are some of the links I am currently looking at for information: See Below: If you have any other good reads/tutorials/ approaches I could learn from it would be much appreciated. All the best, ------------------------ Here are the latest links: ------------------------ BoostR - javascript utility for preconnect, preload and prerender - gitHub last commit 2 years ago Preload: What Is It Good For? - Smashing Magazine Post - 2016 ------------------------ Animation Performance ------------------------ animation with images - GreenSock Forum Post - codepen here Animating an image series *** Telling GSAP to preload animation properties *** Use the progress() method: https://greensock.co...neMax/progress/ -------------------------------- Spritesheets ------------------------------ Spritesheets - look at PIXI - http://www.pixijs.com/ Optimize spritesheets - TexturePacker https://www.codeandweb.com/ ------------------------------- Image Loading ----------------------------- PreloadJS PreloadJS LoadQueue Class Tutorial Preload Images : Image Gallery / SlideShow with GSAP Tutorial Imagesloaded jquery plugin tutorial from Petr Tichy - https://ihatetomatoe...loading-screen/ Imagesloaded demo http://codepen.io/mulegoat/pen/Zeyeoa ---------------------------- Image Optimization -------------------------- *** ImageMagic *** ( Will update after I research more) Imagine, GraphicsMagick or ImageMagic (similar solution to a service like Cloudinary without the expense - Note your hosting provider needs to allow command line tools ) For others reading this make sure to look at the Security Policy that should be implemented: https://www.imagemag...php?f=4&t=26801 https://www.imagemag...pic.php?t=29588 Here is Smashing Magazine Article about settings that will produce smaller and/ better quality images than Photoshop's settings: https://www.smashing...th-imagemagick/ *** TinyPNG*** http://tinypng.com/ *** pngOUT *** Ken Silverman's Utility Page http://advsys.net/ken/utils.htm OSX and Linux Ports http://www.jonof.id.au/kenutils *** ImageOptim and ImageAlpha by Kornel Lesiński *** https://imageoptim.com/mac https://pngmini.com/ comparison to other utilities - http://jamiemason.github.io/ImageOptim-CLI/ CLI -version https://github.com/JamieMason/ImageOptim-CLI ***jpegMini*** http://www.jpegmini.com/ ------------------------------- Caching Assets - CDNs ----------------------------- CDN that specialize in images - Cloudinary. CDN explanation and how-to video for Cloudinary https://www.youtube.com/watch?v=_lQvw2vSDbs Good article on caching other stuff using service workers. https://developers.g...15/11/app-shell Also, if you're loading a bunch of images, you might want to wait a little before you start animating. You can defer your animation by calling a function using setTimeout or requestAnimationFrame. Notice how this logs out B then A. http://codepen.io/os...40?editors=0011