Skip to the content
Foundry44
MagneticProButtonsText ScrambleTextRolling NumberTextMarqueeProTextTilt CardProCardsSpotlight CardCardsLine RevealTextWord LoopTextCursor LabelProCursorsClip RevealImagesImage ParallaxImagesHover ListProNavigationSection WindowProImagesCompare SliderProImagesSticky HeaderHeadersPage WipeProTransitions & loadersElastic LineProDividersSplit FlapProTextPreloaderProTransitions & loadersFrame IntroProTransitions & loadersDot RepelProBackgroundsDockProNavigationStack CardsProCardsPixel TrailProCursorsScroll ExpandProImagesGlass ButtonProButtonsFlowing PathsProBackgroundsPath HoverProCardsCurtain MenuProNavigationRing CarouselProImagesDrag CanvasProImagesLiquid HoverProImagesMesh GradientProBackgroundsContainer ScrollProImagesWord FillTextExpanding PanelsProImagesOrbit TimelineProNavigationHorizontal ScrollProImagesWave LinesProBackgroundsColor GridProBackgroundsGlyph FieldProBackgroundsHalftone WordmarkProTextEthereal ShadowProBackgroundsFluid TrailProBackgroundsElectric MistProBackgroundsASCII DriftProBackgroundsASCII PlanetPro3D ObjectsASCII GlobePro3D ObjectsElastic GridProImagesSwipe CardsProCardsFooter RevealProFootersVelocity DistortProImagesParticle TextProTextGlow OrbPro3D ObjectsShelf FlowProImagesGlobe GalleryProImagesLayout MorphProImagesMega MenuProNavigationDawn ButtonProButtonsInvert CurtainProTransitions & loadersLean StackProCardsAscent TimelineProNavigationCard TrailProCursorsEcho TiltProImagesSheet TransitionProTransitions & loadersFlicker GridProBackgroundsScan RevealProImagesCallout LinesProImagesTilt SheetsProTransitions & loadersKick TagsProTags & BadgesPixel Fill ButtonProButtonsFlow ButtonProButtonsStack ButtonProButtonsState ButtonProButtonsBloom StripProImagesCurl GalleryProImagesRing IntroProTransitions & loadersArc GalleryProImagesIso StackProImagesLetter ScatterProTextTab StackProImagesLumen ButtonProButtonsDepth GalleryProImagesRise MenuProNavigationGlow NavProNavigationTask RailProCardsStretch TabsProNavigationInvert CursorProCursorsFrame TransitionProTransitions & loadersFling TransitionProTransitions & loadersConverge TitleProTextEcho WordProTextClock WipeProTransitions & loadersRole RibbonProImagesSpin SlitProImagesArch SplitProImagesPhoto WordProTextWord RingProTextParting ListProTextRoster TitleProNavigationScatter LineProTextFold RowsProTextWave ListProTextPixel LanesProTextHover FanProCardsMarquee RowsProNavigationGrid IntroProTransitions & loadersTile ZoomProTransitions & loadersText RingsProTransitions & loadersTilt ClustersProImagesGlitch IndexProNavigationHelix StreamProImagesTorn RevealProImagesHatch MenuProNavigationBand MenuProNavigationWordmark FooterProFootersGlyph SeamProTransitions & loadersRidgeline FooterProFootersSwarm FooterProFootersGoo TextProTextRebound FooterProFootersGradient RiseProFootersBulge ExpandProImagesRipple SwapProImagesDiagonal ReelProImagesFrame ListProNavigationStep GridProImagesFisheye GridProImages
Get started

Library/ 34 container-scrollProImages

Container Scroll

A product screen leans back, then rises to face you.

A Pro component: the live demo and the code come with Pro.

Settings

Pro
  • tilt
  • scale
  • end
  • smoothing
Tune it live with Pro

What it does

Container Scroll is an image animation ready for your AI assistant, React or plain JavaScript, with no dependencies. Also called container scroll animation, 3d scroll card or tablet scroll.

A framed screen starts tipped back on its bottom edge and a touch smaller. As the reader scrolls it straightens, grows and settles flat, and lies back down on the way up. Reduced motion simply shows it flat.

With Pro

The AI prompt, the React component, the plain JavaScript file and the embed come with Pro, along with the live demo. Every setting is optional: with none, you get the effect as the preview shows it.