- This topic is empty.
-
AuthorPosts
-
November 2, 2017 at 3:50 pm #262151drone4fourParticipant
I found a really terrific background gradient animator web app.
It looks easy but when I attempt to replicate the code in a pen, it looks nothing like it should. Here is my pen: https://codepen.io/Angeles4four/pen/qVbVaB
I’m sure what I’m missing is rather trivial. Can anyone please lend a helping hand? How do I make my pen behave like it should in the demo on the original website/web app?
Thanks for your attention.
November 3, 2017 at 12:11 am #262171Paulie_DMemberWorks fine in a div
https://codepen.io/Paulie-D/pen/RjrYbL
You just have to give the element a height
November 3, 2017 at 5:26 pm #262192drone4fourParticipantThank you @Paulie_D. Your modified demo runs well.
I’ve since added some Lorem Ipsum placeholder content and played around with some of the CSS property values and I’ve noticed a minor glitch. Now the two backgrounds don’t transition very gracefully at the bottom of the webpage. Here is my modified test case: https://codepen.io/Angeles4four/pen/BmKpBL
Take note that the parsed HTML/webpage looks good at the top, but if you scroll down as far as you can go, the blue background has a sharp horizontal artifact as it meets the second background (green) as the engine struggles to transition between the two.
I noticed that if I increase the background size value from 400% to 40000%, the issue changes slightly to become a sharp flicker. Still a problem.
My question: Do any of you know why the transition effect is misbehaving? Anyone know how to fix this?
The animation timing values on my production environment will be closer to 30 seconds but I’ve deliberately set it to 5 seconds for the sake of the test case to demo the issue.
November 4, 2017 at 2:26 am #262196BeverleyhParticipantI’m not seeing any issue here. Is it only on a particular device or browser? I’ve had issues in the past with full-screen background animations flickering only in Firefox. Then again, it could just be that some devices are less powerful and struggle to handle the large repaints caused by animating the background-position. In my case, I fixed the problem by making much larger background elements that were positioned offscreen with negative values. I then animated their positions with
transform: translate3d();
which are less costly for performance. My use-case didn’t need to be cross-browser/cross-platform friendly though because it was for digital signage (everyone sees it through one device, via one browser).November 4, 2017 at 10:17 am #262202drone4fourParticipantThank you @Beverleyh.
The issue is present on Edge and Chrome on mobile and on my Desktop it’s present in Firefox and Chrome. The browser window has to be half the screen or narrower, not full screen. And then you have to scroll down. Here it is: https://imgur.com/a/pmQ4C
The sharp edge moves up and down.In my case, I fixed the problem by making much larger background elements that were positioned offscreen with negative values. I then animated their positions with
transform: translate3d();
which are less costly for performance.I’m not sure what you mean.
translate3d()
looks like a function, right? Is that JavaScript? I’ve never seen brackets inside a CSS rule like that. Whether it is JavaScript or indeed CSS, Beverleyh: would you be able to adapt my existing Pen to work as you suggest?Thanks for your attention.
November 4, 2017 at 10:25 am #262203drone4fourParticipantYikes! I see “functions” in CSS are indeed common. Here is
transform3d()
on MDN. Usually the property functions in CSS have parameters so seeingtransform3d()
without any values was throwing me off a little.
@Beverleyh: Would you still be able to adapt my pen to integrate your suggestion?Thank you,
November 4, 2017 at 10:34 am #262204drone4fourParticipantThe issue is present on Opera on my Desktop as well.
November 4, 2017 at 11:41 am #262206BeverleyhParticipantI don’t even know if it would work for your case, and I sadly don’t have the time to adapt anything for you to test. Here’s some info about it though so you can explore the possibility at your side http://blog.fofwebdesign.co.uk/37-css-animations-performance-gone-bad-and-how-to-fix-it It’s mainly the part under the “improving performance of the snow” heading.
November 4, 2017 at 6:17 pm #262216drone4fourParticipantHey Bev: I took a look at your blog post. Point taken. CSS animations (to say nothing of JavaScript) can eat up a tremendous amount of system resources if implemented harshly. It takes skill to do animations properly. I kind of have a general sense as to how your code refinements to the snow and the christmas lighting animations are better than the originals, but it’s mostly over my head.
I found someone else’s gradient animator demo. It’s called, “Pure CSS3 Animated Gradient Background” by Manuel Pinto. It runs great in a Pen but on my mobile device there is tearing and the transition is coarse and abrupt, worse than the original test case I’ve been working with.
I’ve found a third test case which I would like to play with now. Check out Kahoot. The development team behind Kahoot has managed to animate background gradients by keeping a low profile on CPU and ram. It also runs well on mobile. If you view the source for the CSS, it looks elegantly simple. I copied it into a third Pen. It parses, but it’s just a solid color. I’m overlooking something. Might any of you be able to get my third Pen to animate like it does on Kahoot’s website?
Thanks again for your attention.
November 4, 2017 at 6:36 pm #262217ShikkedielParticipantLooks like you got the animation for the loading spinner there. I think this is what they use for the background:
November 5, 2017 at 7:58 pm #262242drone4fourParticipantThank you, thank you, @Shikkediel!
This is precisely what I need to work with. I’ve played around with your pen and I have a few more questions. I’ll return here in a few days.
Thanks again.
November 6, 2017 at 5:00 am #262244constharperParticipantHi! This animation looks great.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.