Streaming live at 10am (PST)

3d animation - tilted container overflow


#1

Hi everyone!
Thanks @webflow for showing me this forum!

Having a few issues with a tilted container overflow with a 3d animation . It seems to go over the edge of the page and create a long white space all down the side.

I've tried different ways of turning overflow off, but nothing has worked.

The other thing is the_ glitchy animation that happens when I hover over the iphone screens_. It just doesn’t look as smooth as webflow has in the demos. :frowning:

Really hoping I'm being foolish and that it's a quick fix.

Cheers!


Here is my public share link: https://preview.webflow.com/preview/joashdesign?preview=356028279b9a302280f370cd9c0b2ffa
(how to access public share link)


#2

Hi,

I had a quick look, couldn't figure this one out - although I am very much a rookie! As you've no doubt found out yourself, it seems like its the 3D animation itself that makes the overflow, and even turning every element to no overflow it doesn't abide by this once it rotates.

Sorry!


#3

Hey @jashsak great question! Lovely site too, spent some time browsing around and love your work. :smile:

To resolve this issue, set the main section to Overflow: Hidden.

Then also add the Children Perspective to something like 1000px or so (play around with it and the perspective origin).

​Please let me know if this solves the problem, if not, I’m happy to help further :slightly_smiling:


#4

Thanks for your reply @Waldo!

Changing the Children's perspective does indeed stop it overflowing. Cheers for that!

However it messes with the perspective, making it look rather skewed. Do I need to ensure that the perspective origin and children's perspective are the same in order to avoid having a strange looking perspective?

If this is the case, then issue I'm having is I can't set a perspective origin for the section?


#5

Hey @jashsak glad I was able to help with that overflow issue. :smile:

I took another look at your site and it looks like you're getting the perspective settings right. Maybe adjust the Top 30% style setting on the container to 10% or less?


#6

Cheers again @Waldo. That worked a charm! You guys are wicked.

Pertaining to the glitchy shadow hover animation that happens when I hover over the iphone screens. I haven't yet found a fix on the webflow forums. Am I'm structuring the animation or some of the elements wrong?


#7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.