Gooey Pagination

A Pen By

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

Created August 09, 2014

<!--
Copyright (c) 2019 by Lucas Bebber (https://codepen.io/lbebber/pen/lFdHu)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->

Comments

Max G J Panas @Maximilianos on October 28, 2014

Iz nice!!

1 Love
⁣ Pro @000999 on October 28, 2014
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 Love
Graham Thomas @gthomas3 on October 28, 2014

Very slick

1 Love
Lucas Bebber @lbebber on October 28, 2014

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

2 Love
Riley Shaw @rileyjshaw on October 28, 2014

THIS IS AWESOME!!

1 Love
⁣ Pro @000999 on October 28, 2014
@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.
3 Love
Ming Ho @mrcow on November 5, 2014

Amazing effect!

Love
Dmytro Omelyan @Omelyan on December 23, 2015

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

Love
KakSdelatPravilno @kaksdelatpravilno on April 20, 2017

I like that!

Love

Comments

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