Search the Community

Hi there beloved community. I'm in the process of launching a new portfolio but there's a bug with my GSAP-based marquee which showcases my projects in a gallery. From what I can see it looks like my code doesn't calculate the proper width & height of all of the media's inside of the marquee. And sometimes on load it only loads some of the actual content inside. Another thing: the marquee height is clamped, and inside of my runMarquee function it looks like the height doesn't adapt when resizing. I use: SvelteKit (framework) Hygraph (GraphQL) Another issue I'm facing is that most of my content inside of the marquee's has different aspect-ratios, especially the videos doesn't load in the proper format. So please also look for a solution to this. Preview link of website: https://krause-ew9w4q45a-asgerkrause.vercel.app/ sometimes it works and sometimes it doesn't. I need it to be bullet-proof. If you have a stronger code for the same results, please let me know! HTML structure: <div class="marquee"> <div class="track"> <!-- Media will go here --> <video autoplay loop muted src={url} type="video/mp4" /> <img src={url} alt="" /> </div> </div> CSS: .marquee { height: clamp(18.75rem, 12.5rem + 16.6667vw, 25rem); position: relative; overflow: hidden; display: block; margin-left: calc(var(--space) * -1); width: 100vw; } .marquee .track { height: 100%; transform-origin: 0 0; display: block; position: relative; } .marquee .track > * { height: 100%; width: auto; padding-left: 4px; position: absolute; object-fit: cover; } JS: onMount(() => { function runMarquee() { const allMarquees = document.querySelectorAll('.marquee'); allMarquees.forEach((marquee, index) => { marquee.querySelector('.track'); const allItems = marquee.querySelectorAll('.marquee>.track>*'), proxy = document.createElement('div'); allItems.length; let totalX = 0, marqueeH = 0; marquee.offsetWidth; allItems.forEach((item, i) => { const itemW = item.offsetWidth, itemH = item.offsetHeight; (totalX += itemW), gsap.set(item, { x: totalX, width: itemW, height: itemH }), itemH > marqueeH && (marqueeH = itemH); }); const marqueeVal = gsap.utils.wrap(0, totalX), marqueeProgress = gsap.utils.wrap(0, 1); gsap.set([marquee], { height: marqueeH }); const stringX = `-=${totalX}`, animation = gsap.to(allItems, { repeat: -1, duration: 300, x: stringX, ease: 'none', paused: !0, modifiers: { x: function (x, target) { return `${(x = ((parseInt(x) - totalX) % totalX) + (totalX - target.offsetWidth))}px`; } } }); function updateProgress() { const dragValue = marqueeVal((this.deltaX / 2) * -1) / totalX, currentProgressAnim = animation.progress(), endProgress = marqueeProgress(currentProgressAnim + dragValue); animation.progress(endProgress); } Draggable.create(proxy, { type: 'x', trigger: marquee, inertia: !0, onDrag: updateProgress, onThrowUpdate: updateProgress }), window.addEventListener('resize', function resize() { animation.render(animation.time(), !1, !0); }), animation.play(); }); } runMarquee(); }); Thanks

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