• Home
  • Tactics components
  • Decorative
  • Animations
  • View transitions
Release 25.32.0
Tactics 2.29.1-alpha02
light_mode
dark_mode

View transitions

The concept of View Transition API in HTML, CSS and JavaScript is a feature that helps create smooth transitions between different views or states of a web application. This improves the user experience by making content changes more visually pleasing.

All universes

CSS : Betclic/_tactics/_common/_css/_components/_animation/_view_transition.scss
JS : Betclic/_common/_js/_animation/_view_transition.js

Basic transitions

On each device, a view transition is applied to the content component. Each example plays a very specific transition. A view transition is unique and requires a specific CSS declaration. If multiple view transitions are triggered on the same page, we will need to declare as many view transitions as animations.

In the examples below, the content component is animated with different transitions. A sticky block is injected inside and outside the view transition container to test the real behaviour. The bottom navigation bar is not animated.

The View transition API is managed by Javascript according to the MDN documentation.

To manage the direction of animations (for horizontal or vertical slide for example), it is important to indicate a direction to the 'keyframe' (left, right, etc.). The direction is set to '1' by default, it is possible to re-instantiate it to '-1'. To do this, via Javascript, you must redeclare the CSS variable '--viewTransitionDirection' and assign it a value ('1' or '-1').

Some elements are in sticky, absolute or fixed position. In these cases, the view transition is managed directly by Studio Web. The view tranistion is applied on specific class to cancel animation on these elements (ex: bottom navigation, custom smart banner, progressive betting slip, etc...).

The only CSS classes to injected are viewTransition_content and their associated classes is-horizontalSlide, is-verticalSlide, etc... All other view transitions are managed by Studio Web like header, customSmartBanner, etc...

To play the page view transition effect, you can click the back or forward arrow buttons on the top of each simulated device.

Default (fade) link

1
View transition page
2.1
2.2
2.3
2.4
Sticky element inside the view transition container
3.1
3.2
View transition page
Sticky element inside the view transition container
4.1
4.2
4.3
4.4
4.5
4.6
4.7
4.8
4.9
4.10

CSS content trigger class : viewTransition_content
Animation duration : 250ms

Horizontal slide link

1
View transition page
2.1
2.2
2.3
2.4
Sticky element inside the view transition container
3.1
3.2
View transition page
Sticky element inside the view transition container
4.1
4.2
4.3
4.4
4.5
4.6
4.7
4.8
4.9
4.10

CSS content trigger classes : viewTransition_contentis-horizontalSlide
Animation duration : 250ms

Vertical slide link

1
View transition page
2.1
2.2
2.3
2.4
Sticky element inside the view transition container
3.1
3.2
View transition page
Sticky element inside the view transition container
4.1
4.2
4.3
4.4
4.5
4.6
4.7
4.8
4.9
4.10

CSS content trigger classes : viewTransition_contentis-verticalSlide
Animation duration : 250ms

Scale link

1
View transition page
2.1
2.2
2.3
2.4
Sticky element inside the view transition container
3.1
3.2
View transition page
Sticky element inside the view transition container
4.1
4.2
4.3
4.4
4.5
4.6
4.7
4.8
4.9
4.10

CSS content trigger classes : viewTransition_contentis-scale
Animation duration : 250ms

Complex transitions

Morph link

The is-fullscreen CSS class allows to animate header, content and bottom navigation at the same time.

1
2
3

CSS content trigger classes : viewTransition_contentis-morph
Specific CSS content animation class : is-fullscreen

Combined link

This example show how to combine multiple view transitions on the same page.

1
2
View transition page
3
View transition page
4.1
4.2
4.3
4.4
4.5
4.6
4.7
4.8
4.9
4.10
View transition page
Sticky element outside the view transition container
5.1
5.2
5.3
5.4
Sticky element outside the view transition container
6.1
6.2
6.3
6.4
6.5
6.6

CSS content trigger classes : viewTransition_contentis-morphis-horizontalSlideis-verticalSlide
Specific CSS content animation class : is-fullscreen