I was close to finishing my first website. All the animations (hover effects, page load) worked fine until I filled in the last content. The last case study has 2 videos in it. I used “background video” for them. The videos work perfectly but my page load animation doesn’t work anymore (does nothing and suddenly everything appears) and also all the hovers in my menu don’t work anymore.
While working in the designer everything is fine. When changing to Preview mode suddenly everything gets super slow (scrolling even). When publishing the animations load super slow or not at all.
The funny thing is that the other two category pages (same structure but no videos) have the same problem. Only the “Homepage” and the “Imprint page” seem to be still fine.
I already tried to delete the videos and even deleted the whole page where the videos are on but nothing worked. The other two category pages still had the same problem.
I would be super happy if you could have a look and tell me if I just have too much data in total on my website? Or maybe you have an idea what else could cause the slow behavior.
As you can see your loading animation has missing elements. Overall try targeting classes instead of elements in your interactions to keep things from being messed up.
Thank you for checking! But do you think that this is the problem?
I know these are old layers and I deleted them but nothing changed. And also the hover effects don’t work anymore.
Right now I am going back in the Backups because 5 days ago everything was still fine (with the same page load animations).
I had only 2 case studies per page back then. I guess it’s just too much content to load. I think it is loading all 3 case studies (because they are in tabs) when the page is loading.
I really need to go online soon so I will stay with only two case studies (two tabs) per page for now.
But I would be super thankful if someone has an idea.
Maybe there is a way that the page only loads one tab at first?
But thank you @dram! I am going to try tidying up my animations!!
I think this is an issue with fullpage.js. If you open chrome devtools you will see a lot of errors in there. Try disabling that library and checking what happens.
I already tried it this morning but it didn’t change anything.
I’ve disabled the page load animation now and 2 of 3 pages are working.
The UX/UI page is just too loaded. It was a mistake to structure everything in tabs.
My plan is to restructure the whole Website. Make separate pages for every case study to reduce the elements per page.
It is hard because I thought I would go live today but I guess this has to wait until after my next client project.
Yes, it’s a good idea creating separate page for each case study if they are actual studies not just short description and link. In the long term this was good idea so you did the right thing anyway deciding on site restructuring.
