How is this video scroll effect possible?

Ask the community
,
1

Question:
How is the video scrolling into the title? Is it possible to do it on Wix studio and how?

Product:
Wix Studio

What are you trying to achieve:
Please see the reference here: https://wearemotto.com/
Landing page: after the title, video scrolling into “Let’s brand your big idea”

What have you already tried:
I have watched the Wix studio tutorial but I am confuse on the technicality and effects needed.

Additional information:

2

You can achieve this by using following steps -

1 - Create a section with large height. I recommend using CSS grids. Add the video in it. Keep the initial size small. Sticky the video on top of the section.
2 - Add 2 different animation triggers like a shape or vertical line.
3 - Set the animation for video using the triggers. First triggers the expand on scroll while the other shrinks on scroll.
4. At the end of the section use the heading(use multiple headings)
5. Adjust the position of animated video using margin, padding, and animation controls.

2 Likes
3

This is a cool approach - flexbox might also be helpful to help organize the content and structure it.

For example:

  • Flexbox - with a container for each word, and the image in it’s own container too
  • Scroll animation on the image set to “Shrink” with it’s animation type to “In”
  • Scroll animation on the container of the image set to “Move” with it’s animation type to “In” and from the top
2 Likes