Weird browser lag while animation runs
Hi! I've been fiddling with css animations recently and when the animation starts and ends theres a weird lag. Here is the link to the website! Do let me know the cause of the problem, thanks! (I've used transform: translate() btw)
https://floralwhite-goldfinch-146588.hostingersite.com
40 Replies
What animation are you referring to?
the uh cards sliding in
its only on PC since phones dont support scroll()
atleast to my knowledge
It's a scrollbased animation , im not sure what the lag is referring to since it's triggered by a scroll but guessing it has to do with the starting and ending points. The way it's currently configured the last card content never gets to it's place because the page isn't long enough for the current settings.
Although I may be wrong and "lag" could be referring to something totally different.
OP are you using an @supports and the scroll driven animations or using a library like GSAP ?
Can you share a screen capture video showing the lag that you are reffering to? I can't see anything strange.
As far as I can tell they are using scroll driven animations with this polyfill https://github.com/flackr/scroll-timeline
I couldn't see any lag, that is why I was asking if the OP was referring to something specific that I might be missing.
imma download obs and show yall a screen recording
that little jitter/lag is what im talkin bout
sorry that its low quality, discord limitations
What browser is that? Opera? If it is one that doesn't support scroll driven animations and is therefore using the polyfil it could well be due to the inevitable delay necessary for the JS to process the continual change of the scroll position.
On Chrome I don't get any lag (see video).
Actually, I don't get any lag on Firefox either and that is using the polyfill so it maybe something very browser specific.
huh, that's odd
also why does the third container have no text lmao
another bug i gotta fix
yall have any idea as to why this might be happening?
I thought it was intentionally part of the animation , on my side I saw the text of the third container on the right and thought it was desperately animated in , card first then text on top but that it wasn’t getting to its target because the browser window wasn’t long enough.
There is a lot more content after this last box. Aren't you seeing that content?
It does show the text on larger screens so it must be being removed by a media query or something
I see that you are still using the margins for positioning 😕
That is pushing it out of view
Then this is bringin it back again:
Far too many media queries here
It seems to depend on the browser. I have the text on safari and but no scroll animation , and on chrome I have the scroll and text off to the side. The content underneath the box is a section with an image “why you should work w us” then the footer “contact us”. The third card was barely in place on chrome when I scrolled to the bottom and I thought the text was supposed to follow it but wasn’t configured with the space available. Looks like the text is a separate issue, good find Chris
yeah unfortunately cuz of deadlines, i couldnt clean up all the code, my b
thanks tho, looks like this is the problem and I'll fix it after im back home
p sure safari doesnt support scroll() so that's prob why
or view() that im using
I’ve also got the donate button overtop of this text “A future without children to guide it, paints a bleak and grim reality. Play your part to secure the future of the country.“
Be careful with positioning and margins, as you can see they create trouble at one screen size or another. we have great alignment tools now that can accomplish what you’re going for
can you send me an ss of this please?
Oh I thought you were using a polyfill not relying on scroll driven animations and @supports. Firefox doesn’t support animation-timeline view() either but it sounds like it’s working there ?
i think i used polyfill somewhere
unless i deleted it later
Here’s the donate button issue
Then these other buttons have a blurry circle which idk if is intentional
its intentional
when you hover on it it encapsulates the whole button
copied and pasted from google
thats a big oof
is that desktop view on mobile or just a PC
The point of a polyfill is to fill in support , Chris found the scroll-timeline polyfill so I thought it should work on all browsers and was letting you know it’s missing on safari. But this is one of those features that’s an excellent candidate for progressive enhancement so doesn’t matter if it doesn’t work on safari if you’re not expecting it to. Would refactor all of this positioning so you can get rid of most of the media queries though that’s what I would prioritize
because of the limited time i dont think i can fix a lot of these core issues
need to submit it by today
unfortunately my limited css experience really shows here
Is this a mock site or a real website you’re trying to solicit donations ? If the latter I would def figure out the spacing and overlaps. Esp on sites where you want people to trust to use their card and payment info , your users lose some trust when things look wonky
this is my first real website so its filled with dumb decisions thay i would love to fix but cant cuz of the time
its a local NGO project my friends run, the numbers don't link to a payment portal or anything, its just a number that links to your phone app
or call app
You could have just copied the CSS that I did for you last week. That resolved pretty much all of your issues and would have saved you loads of time.
I understand that copying doesn't really help with learning but if your are short on time...
it had a few things i would change and i thought i already solved it but that was my hubris
and also, i don't wanna remove my entire code cuz the mobile website is now completely different, and there is some kinda weird shit that i did that makes display flex or grid and place items center not center the card text
but i have learnt a lot for sure
You can always submit and work on fixing it after it’s live too , on a staging site of course then push to production. If you’re short on time I would indeed take Chris advice and use the code he spent time helping you on. He’s literally one of the best developers I have seen in action
will definitely not make dumb mistakes like these next time
If anything avoid position absolute except in a few rare cases and when you know how to control it
for sure
i used position absolute like everywhere
but my friends are contempt with the website
theyll probably cancel the hostinger subscription
this is basically their way to make uni resumes more attractive from what I understand
ill try to atleast copy the code for the first container tho
or the hero section
Overlap is not very attractive tbh , the one thing you should do is make sure your content is readable. You’d be better off having no css and that users can see all your content then giving your users/friends a broken site. You have a few hours right ? Since you’re pressed for time I would recommend using Chris code he gave you then tweaking it where you need to for small screens. Or large screens if he worked on mobile. The layout isn’t that different , it’s all single col except that one section and that section is hidden on mobile anyway. If your friends are in contempt with it , then they probably won’t use it and it’s all for naught. Don’t you want to deliver good work? This static site you could throw on Netlify for free you don’t need to pay to host it.
(I have just updated my codepen version with the animated slide-in cards along with the polyfill incase you are interested)
yeah imma go and update it
tysm!
i tried to copy paste the code but there were just so many errors, undoubtedly because of some code that i forgot to clear out
i am doing this for free, so i think its good enough tbh
but your code is amazing and I've learnt a lot from it
definitely need to work on using ::before and ::after
btw, this is the polyfill i had in my code <script src="https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js"></script>
I’ve gotta say that attitude that something is good enough is not gonna get you very far. I’m not trying to be harsh and I assume you’re a very young person. It’s my personal belief that you should not be okay with subpar work , and if you just want to skate by with the bare minimum why even bother wasting your time in the first place.
You’re doing yourself a disservice to not learn how to do better next time and your client a disservice by handing your friends a broken website that’s gonna have a huge bounce rate when they are trying to get support for an important cause.
The css code was literally handed to you and you just had to copy and paste to fix it
Again please know it’s not my intention to be mean or make you feel badly ; a little dose of reality is that this will not fly when you get to the real world. There is a point where “it’s good enough” has a place when you’re a perfectionist and would spend way too much time improving something that checks all the boxes already but this does not. You should take pride in what you deliver and create, whether it’s for free or not.
Please take this experience and learn from it so next time you’re better than you were the time before. If I were you , I would rebuild this project from the ground up using Chris’ code as reference but typing it yourself so you can see how the properties behave and change the elements. Whether you want to deliver that to your friend or not , for your own growth would be a good exercise.
Overlapping content , overflow , negative margins pushing things over top of each other is not good enough and the users would be better served to just delete the stylesheet and use default browser styles so at least the content is clear and unobstructed. You have made a good start, you have lots to learn and it’s concerning you are debugging a scroll animation when the page is in its current shape.
Just some free advice. Practice , rebuild, watch Kevin’s channel from the oldest videos forward.
I'll be honest, I'm really tired from building this website. It's taken me two weeks and I've been tryna manage the website amidst exams and shit, and this website is a reason my marks were lower than usual. Not tryna toot my own horn or anything, but, I've spent like 30 hours on this website and I am tired. I don't wanna work on it anymore, and I can't find myself to delete all the code I've used. I know having this mindset that smth is good enough is not healthy, and I know a lot of it is my fault, but I've been in 24/7 mental stress and I just wanna stop working on this website asap. I've learnt a lot and plan to make better websites in the future. Maybe if I do find motivation in the future, I'll clean up the code a bit. Where the copy pasting stuff comes into play, when you have 2300+ lines of code, simply copy pasting wont really work, atleast not for me. I gotta go and clear every single mention of the previous code, and maybe still there'll be some weird declaration or statement that makes it all go to shit. I really value your advice, I do seriously. Thank you so much. And i think the version you saw of overlays and shit was a desktop view on mobile if I'm not wrong. Which I didn't really pay a lotta mind to and it's a super specific use case scenario that I don't think warrants a complete overhaul. I'll definitely keep everything yall taught me in mind for the future, thanks again.
And i can't just copypaste his code, since there are things that I would do differently, so simply copypasting it and making adjustments would take 2 days minimum atleast at my level. I have no idea about a lotta things Chris used, so I'll have to learn it all and it'll take more time and effort than atleast I'm willing to allot it.
obviously i have no stake in the outcome, just passing along some advice. try looking at your page in responsive mode from dev tools so you can see how the margins cause issues as the screensize changes. It may look right EXACTLY at your defined breakpoints but for the screensizes in between , those users wont get a good experience. i cant screenshot for you anymore because the link no longer works but just felt compelled to pass along the advice. burnout is real, which is why its important to learn to do it right from the start. 2300 lines for this one page is concerning. should be around 500-800. i sincerely hope when youre ready to code again that you take this example and the resource of what chris provided so that you learn something from the experience. layout is so important and we have so many great tools now to do it right, theres very few use cases to use position absolute and margins to create your layout. this is a good project to learn from since you haver the code on how to build it right so you can compare but if you want to learn css you need to know the fundamentals.
##KPow Playlists##
HTML + CSS Core Concepts
CSS Fundamentals
Flexbox Basics
CSS Grid
##Interactive Courses##
Learn HTML + CSS
HTML + CSS Crash Course
Learn Flexbox
Learn CSS Grid
YouTube
HTML & CSS Core Concepts
A collection of my videos that cover some of the most important concepts in HTML and CSS. Some of these videos cover essential information you can't live wit...
YouTube
Flexbox basics
A series of videos looking at the basics of how Flexbox works. First I breakdown the different flex container properties. These are the different properties ...
YouTube
CSS Grid videos
The CSS Grid is here, and it's awesome. This playlist is a collection of all the videos I do where I use the CSS Grid, whether it's a tutorial specific to us...
What will you build?
The next step of your coding journey starts here.
Wish you the best of luck!!! keep up the good fight!
prolly kinda late but pretty sure opera gx has a lot of lag issues, even when I'm scrolling through websites I notice choppiness in the scrolling so it's prolly just a browser issue
yeah, works fine on chrome
Thanks you for all the great resources, will be sure to take a look, cheers for all the help! And yes, I'll for sure learn from my mistakes and not make 1000 lines of useless code again 😬