Jump to content
Search Community

Revolving doors - 3D rotation

fripi test
Moderator Tag

Recommended Posts

Hi folks,

 

hope everyone is doing well!

 

I'm working on a kind of "revolving doors" effect as the title tells.

If you look at my pen you'll see it almost works, but at moments you see parts true others, is there a simple way to fix that ?

 

I made it simple with only 2 planes subdivided in 2... but maybe I should use 4 and play with z-index during the rotation ?

Would there also be a way to kind of add some "lightning" or shadow zone when doors get in the back, I'm not sure how to fix that 🤔

 

Thank you for your help

See the Pen KKaoxbo by fripi (@fripi) on CodePen

Link to comment
Share on other sites

Hi,

 

so I did a new version where I use 4 "doors" and not just 2, seems more logic to play with z-index, but how ?

See the Pen MWJGJBe by fripi (@fripi) on CodePen

 

 

EDIT:

OK I just added some z-index and changed the animation to just rotate 90° and repeat forever, seems to work

now maybe just adding some kind of shadow, getting darker when it goes to the back and from dark to normal when it comes to the front

Link to comment
Share on other sites

16 hours ago, GreenSock said:

I suppose you could put a black <div> on top, and just animate its opacity (so 0 would be totally light, and maybe 0.6 would be dark). 

That's what I kind of started with the first "door", the one on the left going to the back :

I change the alpha of the door itself, without adding a div on top, as the background will be darker, works fine.

gsap.to($(".d1"), {duration: 3, alpha:.5, repeat:-1, ease: "none"});
 

BUT it doesn't work for the second door "d2" which is the one completely hidden in the back on start and appears on the right, there I used a from and I have a strange behaviour of the front and back faces

gsap.from($(".d2"), {duration: 3, alpha:.5, repeat:-1, ease: "none"});

 

See the Pen xxgzEGp by fripi (@fripi) on CodePen

Link to comment
Share on other sites

  1. There's no such thing as "alpha" - it should be "opacity"
  2. You don't need jQuery. You can pass those selectors right into GSAP.
  3. It'd probably be simpler to put things into a timeline that repeats. You could use defaults there too in order to simplify your code.
  4. You didn't implement my suggestion of a black <div> that sits on top and then you animate its opacity. 

This is the kind of thing I was recommending:

See the Pen cefe75685113f30856a36263cd6618dc?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that what you were looking for? 

  • Like 1
Link to comment
Share on other sites

thank you @GreenSock for this great looking example.

 

I didn't implement it yet because I tried to make it work just with the dark bg and less divs...

Also I work with a mix of Adobe animate CC and this 3D DOM on top, that's why I always use "alpha" as in animate "opacity" isn't recognised.

 

Transforming to Tl was my next step once the effect was ok 😀 I'm still learning the gsap way of doing it compared to tweenmax in the old flash ...

Link to comment
Share on other sites

10 minutes ago, fripi said:

Transforming to Tl was my next step once the effect was ok 😀 I'm still learning the gsap way of doing it compared to tweenmax in the old flash ...

No problem. Once you get used to the new syntax, you'll dig it. 

 

And you don't NEED to use a timeline. It just struck me as a bit more modular and concise, plus you could control the whole thing, like by animating the timeScale or pause() it or whatever. 

 

Have fun!

Link to comment
Share on other sites

thanks a lot @GreenSock

 

globally for my banners it works great!

 

But I have some visual glitch when I scale the container above 1.3, the words written on the doors are "in & uit"

the "&" sits a little lower as intended but when all scaled to 1.3, the first half of it, on the white "in" doors disappears on chrome, Safari and Firefox seems ok, a known bug of Chrome ?

 

See the Pen xxgzEGp by fripi (@fripi) on CodePen

Link to comment
Share on other sites

Hi,

 

still have some 3D rotation problems, but not really related to GS, but maybe someone has an idea...

Didn't want to create a new topic as it uses most of the code of the revolving doors.

 

The codepen below works perfectly in Chrome, Firefox, edge, brave... on mac and pc but not safari, in safari it reacts super strange

See the Pen abpXGxb by fripi (@fripi) on CodePen

Link to comment
Share on other sites

19 hours ago, GreenSock said:

Safari handles z-depth rendering differently. Try setting the "z" position of the back to 1 or something, just so that the two faces aren't directly on top of each other on the z plane. Seemed to work fine for me. 

well I learned a lot with this project :-D thanks

  • Like 1
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.
×
×
  • Create New...