Streaming live at 10am (PST)

Help me create a movement of blocks


#1

Hello. help me create a movement of blocks like on this page.

  1. Two blocks are opened. one of them on the left with the text. The second block with video is partially hidden.
  2. At the first scroll, the block on the left disappears, and the block with the video opens to the full screen
  3. When the second scrolling block with the video is shifted to the left, and the text block appears to the right

I tried it again, but I got only the following: http://nurture-6b6e05.webflow.io/

Read-only-in-webflow-link: https://preview.webflow.com/preview/nurture-6b6e05?preview=375ce08b5b89934c4070c00c0750b05d

The block with video and the third block with the text are opened at the first scroll simultaneously.


#2

Help!


#3

I think custom code is the only way to do this.


#4

In order to do a horizontal scroll first, and then a vertical, I need a custom code? Really? For webflow is such a difficult task? Other people create more complex sites in Webflow without any custom codes.


#5

There’s no horizontal scroll. There’s a page and there’s an overlaying section with a video. You should consider just a simple page and an overlay section that you change the dimensions of with scroll triggers. It’s not even on-scroll, it’s just a scroll trigger: 2 events to resize the overlay video. When that works, you can give more appearing/disappearing events to the title block, and appearing interaction on the body of text.

I think you can do all of this with even just Interaction Legacy.

edit: looking at it again, the title block can be part of the video section, as it’s on top of the video. So you have a normal page with the article body, and a section that’s fixed, containing title and video. And you animate all of this.


#6

Here’s what I did with legacy animation. Page “Untitled”. For some reason, the animation works automatically, and not with a scroll.

http://nurture-6b6e05.webflow.io/untitled

https://preview.webflow.com/preview/nurture-6b6e05?preview=375ce08b5b89934c4070c00c0750b05d


#7

I did it. Everything turned out to be very simple. Thanks, @vincent that showed me the correct idea about the site. in fact there are only two blocks. And need to animate only ONE BLOCK !!!))) But I had to do the animation in interactions 2.0 (not in Legacy). Animation by the way is so simple that even a child can do it. I failed it at first, because I misunderstood the site’s structure.

http://nurture-6b6e05.webflow.io/

https://preview.webflow.com/preview/nurture-6b6e05?preview=499719d018cf9448b88324b676d1cc5c

But I think this is not the end, and I probably will have questions with the animation of some other elements. And I hope that you will help me out.

Animation

These all the elements that I used

Thank you, again, @vincent Now you will be my teacher :blush:

@samliew as you can see, everything turned out without a custom code


Help me create animation like on this page
#8

Hello @Barsik

Sorry about that video I promise, here is another approach if you like to take into consideration.

Go to ‘Smart Scroll Section’:
https://preview.webflow.com/preview/testingplayground?preview=eaf772107fb9b54c77952adb2d2647e2

You just need to play around with delays and some easing settings.

Hope this helps.


#9

Haha kudos Barsik, glad I could help :smiley:
You used iX2 to have a control over the scroll/anim, but your example didn’t even require that. It only had triggers to start the animation, not a scroll hack per se.

I guess the result is almost identical anyway.

Good simple layout, I may try my hand at it one day :slight_smile:

Come back here to show us the finished site :slight_smile:


#10

Well, before the site is ready you will have to help me more than once :joy:


#11

Lol, that happens :smiley:


#12

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.