Immersive Section Transition

A media element that animates to a full-screen block, before transitioning to the next section of content.

How to

Use this component to create an immersive transition between two sections, where a media item is scaled up to take the viewport dimensions before moving to the next content element.

Here's how the component HTML looks like:

<div class="immerse-section-tr js-immerse-section-tr">
  <div class="immerse-section-tr__media js-immerse-section-tr__media">
    <div class="container max-width-sm">
      <figure class="immerse-section-tr__figure js-immerse-section-tr__figure">
        <!-- your asset element here - video/img -->
      </figure>
    </div>
  </div>

  <section class="immerse-section-tr__content bg-transparent padding-y-lg margin-top-lg js-immerse-section-tr__content">
    <!-- your content here -->
  </section>
</div>

When using this component, some restrictions apply:

• the .immerse-section-tr element must contain only two children, the .immerse-section-tr__media and the .immerse-section-tr__content; additional content must be placed outside it;
• the .immerse-section-tr__media cannot have a top padding and/or margin (it will be overwritten in JS); you can apply those top padding/margin directly to the .immerse-section-tr element.

Background Color #

The .immerse-section-tr__content element does not have a background-color applied (we use the .bg-transparent class to set its background to transparent).

The bg color effect is created using an overlay layer (::after and ::before pseudo-elements) that has a bg color equal to --color-bg.

If you want to apply a different bg color, the best approach would be to create a color theme (e.g., a dark theme), set --color-bg equal to the new color you want to apply and add the data-theme attribute to the .immerse-section-tr element.

You can find more info on creating color themes in CodyFrame on our Colors documentation page.

Figure Aspect Ratio #

We have been using two different media elements (with different aspect ratio) according to the viewport size:

<div class="immerse-section-tr padding-top-md js-immerse-section-tr">
  <div class="immerse-section-tr__media js-immerse-section-tr__media">
    <div class="container max-width-sm">
      <!-- asset visible on small devices -->
      <figure class="immerse-section-tr__figure immerse-section-tr__figure--3-4 hide@sm js-immerse-section-tr__figure">
        <video src="../../../app/assets/video/immersive-section-transition-video-1.mp4" autoplay loop muted playsInline></video>
      </figure>

      <!-- asset visible on bigger devices -->
      <figure class="immerse-section-tr__figure immerse-section-tr__figure--16-9 display@sm js-immerse-section-tr__figure">
        <video src="../../../app/assets/video/immersive-section-transition-video-2.mp4" autoplay loop muted playsInline></video>
      </figure>
    </div>
  </div>

  <section class="immerse-section-tr__content bg-transparent padding-y-xl js-immerse-section-tr__content">
    <!-- your content here -->
  </section>
</div>

The first one has an aspect ratio of 3/4 (.immerse-section-tr__figure--3-4 class), while the second has an aspect ratio of 16/9 (.immerse-section-tr__figure--16-9 class). You can modify those aspect ratio values in the component CSS or use one of the aspect-ratio utility classes available in CodyFrame.

Effect disabled #

The immersive transition effect is not visible if the height of the asset element is bigger than the viewport height or if (viewport height - asset height) is bigger than 600px.

Additionally, the effect is disabled if the reduced motion setting is on.

---

🌄 Video credits:

• video by Oleg Magni on Pexels
• video by Adil on Pexels

Categories

• Effects > Scroll

Bug report & feedback

Component Github page ↗