Overlap Infinite Marquee Animation

penguinchilli · March 14, 2021, 8:49pm

Hey guys,

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.

Can you help?

Here is my public share link:

https://preview.webflow.com/preview/penguinchilli-staging?utm_medium=preview_link&utm_source=designer&utm_content=penguinchilli-staging&preview=9a63e5d3f802ae10379b1220223ba693&pageId=604e0e2f2582aa2fe4e9dc59&mode=preview

Sorry if it’s a bit messy; it’s my first Webflow site - infinite animation needs to work on “Section Work Preview” (After Section Brand)

Thanks in advance!

miekwave · March 14, 2021, 11:19pm

@penguinchilli
see solution below

penguinchilli · March 14, 2021, 11:18pm

Hi @miekwave

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.

Link to the published version: Penguinchilli Portfolio

Any idea what could be the cause here?

miekwave · March 15, 2021, 4:23am

@penguinchilli

Open incognito. Open inspect console. Choose Lighthouse.

Choose Desktop and Run Report

Your screen is gonna do a bunch of weird stuff. Wait about a minute.

I believe particles min is the culprit. YOu may need to redo your particles js settings to redule opengl processor usage.

When done hit CTRL+T duplicate

Select loop container div block so we can listen to it

You’re animating approx 4 MB in assets in one slider.

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.

so two things

Reduce particle js load
reupload to assets panel optimized images for your slider

miekwave · March 14, 2021, 11:52pm

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.

reduce your nodes here

heres the FPS differece between values of 560 and 220 so you get an idea

penguinchilli · March 15, 2021, 12:14am

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

miekwave · March 15, 2021, 4:36am

@

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.