3d pan/Is this possible with gsap

[Luckyde]

I've been trying to figure out an easy way to do this, but here's the gist 
I'm trying to figure out a way to do a camera pan effect with draggable. Normal panning works fine, but i'd like to have an ability to have a kind of z depth in it like in the after effects version of what i'm trying to remake


On my original attempt i had gsap tweening things with offsets to do a hacky verison of it, but that feels off still. So I wanted to ask does any one have any examples of css z-indexes combined with perspective and gsap to simulate a pan in sudo 3d? Please let me know it would be super useful!

Like this

Except with Y position instead of rotation

[Shaun Gorneau]

Hi @Luckyde, welcome to GreenSock!

 

This should be fairly easy to accomplish. If you cover the y rotation of the ground (as in visually obstruct it with a piece of paper or your hand), the rest is fairly straight forward horizontal parallax. Here is a CodePen kind of showing that ... not hooked into Draggable, and just yoyoing ... and also poorly executed  But the principles are there.

 

See the Pen NLGQPv by sgorneau (@sgorneau) on CodePen

 

 

[Luckyde]

Hi Shaun,

Thanks! Thats alright with a few elements but what i'm trying to do is more like create a scene around which i can zoom in and out instead of moving them individually(as well as the movement is vertical) , my concern is i dont want to have 50 elements moving around on y space as they're huge, and thats a lot of processing/conditions/offset calculation on mobile. I was kind of hoping i could somehow layer them in css z and move the 'stage' in and out, up and down and they would move as they would as they're stacks of paper resting on top of each other, with an offset you would get naturally if you were to do it in after effects or a 3d enviroment. I'll make a codepen shortly, i just cant use assets from work so i'll remake mine.

[Shaun Gorneau]

Ah, in that case ... I think you're looking for three.js ... specifically this https://threejs.org/examples/#webgl_camera_cinematic