Search the Community

'm trying to create a preloader animation using GSAP that resembles the one on ochi.design . It has a spinning circle that fills up a progress bar as content loads. I'm familiar with GSAP basics like timelines and tweens, and I'm considering using SVG for the circle and progress bar elements. Can anyone provide guidance on achieving a smooth spinning animation and progress bar update using GSAP?

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