I’m currently building my portfolio & I’m having trouble creating an infinite marquee animation on one of my pages.
Basically I’ve been following this tutorial and in the video when he duplicates the content-holder div his content goes side by side, whereas mine overlaps. I’ve managed to do the animation (needs tweaking) but I can’t figure out why my divs are overlapping and have been stuck for two hours trying to get this to work.
Thank you so SO much for that! It works like a charm and is exactly what I needed - really appreciate you taking the time to go through how you did it!
There is another issue, however - I will likely start another thread tomorrow on this - but on the designer preview everything is smooth, however when published the animation is laggy and my MacBook Pro starts to get loud. Even the nav animation is super laggy. It seems to just be for this page as it’s not laggy when I tested it on one of my case study pages.
I have replaced all the images in the infinite marquee with smaller versions (they still need optimising as quality is very low) and I even tried disabling the animation completely but there’s still lag when tested on the nav menu animation. I’ve also tested in a chrome incognito window too just incase there’s anything causing the issue through plugins or cache/cookie related stuff.
I might suggest upoading
768w resized images, tiny png into the assets so CDN will serve better optimized images. GIF is easier to process if you can get those to under 20kb each as opposed to 2mb uploads you have in your assets folder. I do gif.64 or gif.96 whenever possible if fifdelity isnt affected. I bet a lot of these assets can do gif 64 or gif 96 without losing fidelity and youl safe over 1.5mb.
Ya particles js is defininately very taxing. Reduce your particle settings as low as possible to suit your needs. Consider removing it for optimzal performance.
This is so incredibly valuable @miekwave so thank you so much for all the help! I had no idea those tools existing in the inspect panel and looks like I will be using that frequently moving forward.
I had the particles display set to none but hadn’t realised it would still load so it makes sense why that is the cause of the issue. I think I messed around with the settings so much just playing with random sliders until I found something I like (typical designer!) and I guess it brought everything with it! I’ve replaced with rough but simpler particles (167 particles / 60fps) as a test and it’s working beautifully now in terms of speed.
In regards to images, I’ve been exporting straight from Sketch but I’m realising now it’s not the best in terms of exporting; it’s either too small and low res or just too large so it looks like I will give TinyPNG a shot.
Thanks once again for the help; I will sleep so much better knowing I don’t have this to deal with tomorrow
Just keep in mind, use incognito when using inspect performance tools. Because if you have chrome plug-ins enabled will severely interfere with performance scores and flag lots of false posative results from nonexistant resources from plug ins. So make sure you have all plug ins disabled on incognito mode.
