css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Gooey pagination effect based on a dribbble by Kreativa Studio: https://dribbble.com/shots/1676635-Page-scroll-concept


  1. I just love these filter blobs. I hate though, that they render as bitmaps in webkit and lose the hd (retina) support. That makes it look pixelated. A workaround is to double the size and then downscale it.

    Here's my fork: http://codepen.io/pixelass/pen/gftdJ
    I hope you like it and maybe you can apply the tweak to your version

    I also removed the javascript for these reasons.

    1. I felt like a pure CSS version could basically do the same or a similar effect
    2. I have no Idea what is going on in that javascript and couldn't find out which numbers to tweak to make it work after the downscale
    3. I'm too tired to look into tweenMax or write a plain JS version
    4. I really only wanted to show how to optimise the rendering quality
  2. @pixelass Hey, first of all thanks, glad you like it! Never noticed it looks pixelated on HD displays. Bummer. That's a good workaround, but I presume it also makes it heavier for non-HD displays then, no? Perhaps the scale could be multiplied by the actual screen DPI via JS then? Hm..

    I like your fork, and it certainly performs better, but I made this in JS because of a few details: - If you pay attention, you can see that the blob gets bigger as it gets closer to a dot, so to increase the, hm, gooeyness (???) of the blob. - The blob also stretches according to it's speed, not to a fixed value. - The little bounce is hard to replicate with CSS (at least, one that looks as good)

    It does perform worse though, and the code has to be ironed out. Also sorry for the messy code, it's just a prototype.


  4. @lbebber like I said I only wanted to show how to increase the quality and had problems adjusting the tweenMax stuff. I also added a scale effect though. the transition and animation are separated so they can be adjusted separately.

    I don't think the performance suffers from the JavaScript, it's really only related to the resolution.

    BTW. most of my stuff is also just prototyped. There are three reasons for me to iron out a prototype:

    1. I am happy with the result and want to clean the code so it can be used
    2. The snippet is too big to remember what's going on, so I clean and comment it
    3. I am too deep in spaghetti-land and it's either the iron or the trash bin ;)

    The third one rarely applies though. (luckily)
    In many cases I keep the prototype and start a new project/pen. I then clean the code when I really need the snippet in a production environment. That's also the reason why I like codepen so much and why I'm so active. It's just an awesome place to gather ideas.

  5. Amazing effect!

  6. Its very nice! I wrote another solution that uses JS to generate SVG's Path for geometric precision: http://codepen.io/Omelyan/pen/wMWbRV

  7. I like that!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.