Search the Community

When use chrome or edge the first few clicks have a super lag during the scaling of images (after DOM loading asset) using GSAP library. With firefox it doesn't happen, although I read around that the opposite often happens but I would rather do it in chrome to export it with electron. The image is very heavy but the use is thought to be in a local machine (no internet) and I need a high resolution 1. Is there any way to preload the GSAP animation avoiding this terrible initial snap? 2. Why on firefox does it not do this? Is it a browser or library problem? 3. With css it doesn't do it however I lose the control of positions Am i wrong with something? Can you help me with some suggestions? Thanks Here the demo https://animdrops.xyz/static/02-magnifier/ Here a basic example with the same problem: https://codepen.io/matt8629/pen/OJdJbXr

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