Categories
animation image layout Playground smooth scrolling thumbnail

Thumbnail to Full Width Image Animation

The other day I stumbled upon this fantastic animation by Akram Khalid which he also coded up as part of a tutorial on page transitions with React Router and Framer Motion. The GitHub repo can be found here. It’s a really beautiful design and I wanted to have a go on experimenting with it and animating the initial thumbnail view to a full image (with article), using only scale transforms. I also wanted to add some smooth scrolling and on-scroll animations, so I’ve used Locomotive Scroll. The beautiful images are by DeMorris Byrd. This is highly experimental and it turned out to be a complex process. But I hope it gives you some of sort idea and entry point of how to pull off these kind of animations without touching the width and height of an element. The main idea behind this technique is to scale an element and then counter-scale the child. Paul Lewis and Stephen McGruer show how to do that on a menu using expand and collapse animations. Avoiding animating the width and height of an element helps keep performance in check. So what we do is to initially set the scale of the content__intro wrapper to a value that will make it shrink to an exact size. Then we set a counter scale to the image. This will make the image maintain the same size as before. Then, we add another scale to the image, shrinking it also the to the target size. <div class=”content__intro content__breakout”> <img class=”content__intro-img” src=”img/1.jpg” alt=”Some image” /> </div> Having the initial width and height of an element and also the target dimensions, we can calculate the scale values of the outer wrapper based on this: let introTransform = { scaleX: imageSettings.imageWidthEnd / imageSettings.imageWidthStart, scaleY: imageSettings.imageHeightEnd / imageSettings.imageHeightStart, y: (winsize.height/2 – introRect.top) – introRect.height/2 }; We also move the element to be centered on the screen (y). We define these initial (start) and target (end) dimensions as variable in our CSS: body { … –image-height-start: 555px; –image-width-end: 260px; –image-height-end: 320px; } Our starting width is 100% of the viewport width, so we don’t need to set that here. The image will then have the following scale applied: gsap.set(this.DOM.introImg, { scaleX: 1/introTransform.scaleX * imageSettings.imageWidthEnd / this.DOM.introImg.clientWidth, scaleY: 1/introTransform.scaleY * imageSettings.imageHeightEnd / this.DOM.introImg.clientHeight }); 1/introTransform.scaleX is the counter scale of the outer wrapper. The second value that we multiply makes sure that we scale…

Read the rest Thumbnail to Full Width Image Animation

Read at the original Source: codrops.

Categories
button effect hover magnetic Playground

Magnetic Buttons

It has been a long time since we explored some button styles here on Codrops! But after seeing a really nice one on Cuberto, I wanted to explore some ideas and share them with you. The main idea of these buttons is that they are magnetic and follow the mouse pointer. Along with that, there’s lots of room to play with some interesting hover animations. A very nice thing to explore is the motion of an additional element like a shadow or another line. The parallax effect created by moving the button’s elements differently, gives a nice twist to the animation. Here we play with a border animation. This circular button fills with a solid color. A shadow element creates some depth. I really hope you like them! Can’t wait to see your ideas Share them with us @codrops or @crnacura. The post Magnetic Buttons appeared first on Codrops.

Read the rest Magnetic Buttons

Read at the original Source: codrops.

Categories
animation distortion filter hover image menu Playground

Exploring Animations for Menu Hover Effects

Last week I showed you how we can create a fancy menu hover animation with images. Today I’d like to share some of the interesting effects we can achieve with that technique. Tuning some variables, timings and filters, the possibilities are really endless, so I invite you to explore some of the things we can come up with in the these couple of demos. Don’t forget to move your mouse along the link to see some jazzy motion and filters in action I really hope you enjoy these playful animations! The post Exploring Animations for Menu Hover Effects appeared first on Codrops.

Read the rest Exploring Animations for Menu Hover Effects

Read at the original Source: codrops.

Categories
animation glitch grid hover magnetic Navigation Playground slideshow

A Glitchy Grid Layout Slideshow

I love experimenting with irregular layouts. I wanted to try to take this custom “background” grid one level further and add a stack-like navigation effect. I liked how it turned out but there was some Jazz missing. It was calling for some dramatic effect, like a glitch animation! So I added it and it was the missing bit indeed.

So, here it is: a glitchy grid layout slideshow with a magnetic link effect and a quick, stack-like animation when navigating.

Here’s the initial view:

When clicking on one of the navigation buttons, there’s a quick stacking animation:

When hovering over the “Enter” button, a glitch animation happens on all the images and texts. This is how it all comes together:

I really hope this comes in handy as a starting point for your ideas! Let me know what you think @codrops or @crnacura 🙂

The post A Glitchy Grid Layout Slideshow appeared first on Codrops.


Source: codrops

Categories
distortion fluid hover ogl Playground webgl

Mouse Flowmap Deformation with OGL

Mouse Flowmap Deformation with OGL




Following Nathan’s article on how to create mouse trails using his minimal WebGL framework OGL, we’d now like to show some demos based on his mouse flowmap example. The concept of this effect is to deform an image based on the mouse position and velocity. In this article, we’re not going to explain how to initialise and use OGL. Nathan’s article, Crafting Stylised Mouse Trails With OGL, is covering all of this, so we’ll rather focus on the creation of this effect and assume you already have your OGL setup ready with a renderer and a plane with its texture. Getting started In order to deform our image we need to use one of the many extras provided by OGL: Flowmap: import { Flowmap }…


Read the rest of the post Mouse Flowmap Deformation with OGL

Categories
configurator distortion fullscreen image liquid Playground three.js webgl

A Configurator for Creating Custom WebGL Distortion Effects



A Configurator for Creating Custom WebGL Distortion Effects

Check out some more great posts over at: codrops

Categories
brutalism filter mix-blend-mode mousemove Playground trail

Image Trail Effects



Image Trail Effects

Check out some more great posts over at: codrops

Categories
animation background-image layout Playground scrolling smooth scrolling

Smooth Scrolling Image Effects



Smooth Scrolling Image Effects

Check out some more great posts over at: codrops

Categories
animation blotter.js distortion effect Playground

Text Distortion Effects using Blotter.js



Text Distortion Effects using Blotter.js

Check out some more great posts over at: codrops

Categories
audio canvas Playground visualizer

Creative Audio Visualizers



Creative Audio Visualizers

Check out some more great posts over at: codrops

Categories
animation effect Playground scrolling typography

Scrolling Letters Animation



Scrolling Letters Animation

Check out some more great posts over at: codrops

Categories
animation background-image image Playground reveal

Slice Revealer



Slice Revealer

Check out some more great posts over at: codrops

Categories
animation layout Playground template

Outdoors Template



Outdoors Template

Check out some more great posts over at: codrops

Categories
animation gradient organic Playground shape

Gradient Topography Animation



Gradient Topography Animation

Check out some more great posts over at: codrops