Responsive layout, the smaller scenes display content outside the box


(Phil Smith) #1

Hi all, I have created an animation with 3 scenes to represent my screen break for tablet and mobile. This works fine on the website apart from the animation displays images outside of the animation box until the corect size has been met.

Can I do anything to prevent this? Is it a case of making everything tranparent until it’s in the animation?

Cheers

Phil


(Jonathan Deutsch) #2

Elements being shown outside the scene bounds it typically caused by having the flexible layout options to scale width or height of the scene turned on:

As it implies, this will cause the scene’s width/height to be 100% of its container (typically the body of the page). The purpose here is to then use the Flexible Layout system to control elements to change their position or resize. So you have a few options:

  1. Use flexible layout options to control element positions/sizes to better fit.
  2. Turn off flexible layout and instead only use the sizes defined by your Responsive Layout breakpoints
  3. Add your elements to a group, and set that group’s Content Overflow to hidden in the Metrics inspector.