Jump to content
GreenSock

jSwtch

Photomotion style parallax

Recommended Posts

Hello,

 

I am interested in creating photomotion style parallax movement (https://videohive.net/item/volumax-3d-photo-animator/13646883?s_rank=2)

 

I understand how to use image editing to isolate background mid and foreground, I am just not sure how to tie is all together with gsap?

 

Also about the distortion, should I create multiple instances of each (bg, mid, foreground) and use a stepped ease, or is there someway to use a black and white depthmap as a css filter?

 

Thanks for any pointers

 

EDIT: I am planning on using vue js, and gsap, and I am looking at pixi or p5js now

Link to comment
Share on other sites

It's not going to be easy to get it done in CSS, you can do it but you won't get that much detail.

 

 

Your best bet would be to use 3D model and load it using Three JS, you can use GSAP to animate it. Or you can simply create videos using that product and control it using same technique.

 

  • Like 6
Link to comment
Share on other sites

Hi @jSwtch, I've covered some basics of this in a previous post ... it might be helpful. It doesn't handle the distortion at all, but can give a sense of motion and depth. It may be a starting point.

 

 

  • Like 6
Link to comment
Share on other sites

On 7/27/2018 at 8:25 PM, Carl said:

That looks like an awesome tool.

 

Citrix / Redbull use a similar effect here: https://www.thenewmobileworkforce.com/all-season (click next / prev arrows)

 

no idea how they do it, but I suspect 3D canvas wizardry.

 

wow it's a really great effect, how can we make an effect like this, did anyone know ?

Link to comment
Share on other sites

Thread I mentioned shows basic example of parallax effect that responds to mouse movement. I looked up their website, they implemented it using Three JS. You can do that with HTML as well but you will need some practice and a lot more patience but effect will be slightly less immersive.

  • Like 3
Link to comment
Share on other sites

On 7/27/2018 at 10:03 AM, jSwtch said:

Also about the distortion, should I create multiple instances of each (bg, mid, foreground) and use a stepped ease, or is there someway to use a black and white depthmap as a css filter?

 

You'll need to use WebGL for a depth map.

 

Here's a pretty neat depth editor that uses PixiJS.

http://depthy.me/#/

 

It's open source, so have at it.

https://github.com/panrafal/depthy

 

They use some custom filters, which would probably need to be updated to work with the latest version of PixiJS.

https://github.com/panrafal/depthy/tree/master/app/scripts/pixi

 

I think three.js can do something similar using a MeshDepthMaterial.

https://threejs.org/docs/#api/materials/MeshDepthMaterial

 

  • Like 3
Link to comment
Share on other sites

2 hours ago, aydinvivik said:

How can we make slide transition?

 

 

That effect is not easy. Do you know any WebGL or related libraries like PixiJS or Three.js? If not, you should first get an understanding of the rendering process.

 

Maybe start out with something simple like animating a displacement map.

 

PixiJS transitions...

 

three.js transitions...

https://tympanus.net/codrops/2018/04/10/webgl-distortion-hover-effects/

 

  • Like 4
Link to comment
Share on other sites

@OSUblake that depthy looks great!

 

Here was the plan for the photomotion, although I think it can be used to generate a number of interesting "sweeping" effects.

 - I got way over my head (started learning pixi five days ago) so I might revisit it in a few months. 

 

Take a photo with clear foreground, mid, and background.

Create unique focus alpha channel maps of each (see attached)

Render as svg

Use svg morph to link into a smooth animation

Use this animated morphing depth as a mask for filter effects in pixi

Apply the animated filter masks back on top of the original photo.

 

I got as far as making the svg. However I think I might just animate the images in afterffects export as frames then use texturepacker to create a sprite sheet, and pixi for the animation & filter.

 

I have attached compressed images of foreground, midground, and background to help visualize.

 

 

FG.jpg

BG.jpg

MID.jpg

Link to comment
Share on other sites

I'm not sure I understand what you're trying to doing with the SVG.

 

Is the end result supposed to be something that looks like depthy, but animated using a tween instead of mouse movement?

 

I'm kind of interested in this because I researched it several years ago, but the project I was working on changed, so I never got around to prototyping anything.

  • Like 1
Link to comment
Share on other sites

On 8/2/2018 at 2:30 PM, OSUblake said:

 

 

That effect is not easy. Do you know any WebGL or related libraries like PixiJS or Three.js? If not, you should first get an understanding of the rendering process.

 

Maybe start out with something simple like animating a displacement map.

 

PixiJS transitions...

 

three.js transitions...

https://tympanus.net/codrops/2018/04/10/webgl-distortion-hover-effects/

 

 

Thank you @OSUblake I will try to learn pixi.

Link to comment
Share on other sites

1 hour ago, OSUblake said:

I'm not sure I understand what you're trying to doing with the SVG.

 

I was curious about that too. I export a lot of depth maps from Cinema4D to After Effects for additional compositing, but I'm not sure how to make that same process work well with SVGs. Though I've never really thought about it much. I think you could take the depth map into Pixi as a displacement filter and do some cool stuff.

 

I'll be interested to watch the progress of this project.

:)

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×