Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Replicating CSS gradient animantion

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #262151
    drone4four
    Participant

    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.

    #262171
    Paulie_D
    Member

    Works fine in a div

    https://codepen.io/Paulie-D/pen/RjrYbL

    You just have to give the element a height

    https://codepen.io/Paulie-D/pen/MOKqgN

    #262192
    drone4four
    Participant

    Thank 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.

    #262196
    Beverleyh
    Participant

    I’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).

    #262202
    drone4four
    Participant

    Thank 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.

    #262203
    drone4four
    Participant

    Yikes! I see “functions” in CSS are indeed common. Here is transform3d() on MDN. Usually the property functions in CSS have parameters so seeing transform3d() 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,

    #262204
    drone4four
    Participant

    The issue is present on Opera on my Desktop as well.

    #262206
    Beverleyh
    Participant

    I 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.

    #262216
    drone4four
    Participant

    Hey 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.

    #262217
    Shikkediel
    Participant

    Looks like you got the animation for the loading spinner there. I think this is what they use for the background:

    codepen.io/anon/pen/zPqyox

    #262242
    drone4four
    Participant

    Thank 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.

    #262244
    constharper
    Participant

    Hi! This animation looks great.

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.