Hi! I would like to be able to create an animation like this: https://absentagency.com/
I have a black rectangle as part of the background and I would like to fix it in the middle of the page temporarily and continue to scroll other elements. Could you help me?
- Fix the widget (use the point closest to the widget’s position). Widget will remain in place, regardless if you scroll.
- Add scroll animation. You’d need this to ‘do something’ with the shape (move it, add opacity, scale it…whatever you wanna do with it). Generally, Delay need to be apply if you need the shape to stick around for x amount of px and then trigger the effect you picked.
Hi, thanks for your reply! The problem is that in my case, unlike the reference, the black background reaches towards the middle of the page, so fixing it would be a problem.
The effect I would like to achieve is the following: scrolling the homepage at a certain point you arrive at a half-black section of the site, a black stripe enters from the right and stops halfway (it does not reach the other side as in the reference) . At that point the entire white/black background part freezes temporarily and by continuing to scroll a series of images follows one another upwards.
When the images end, normal scrolling of the site should resume.
I attach a photo of what it looks like now.
The way I would try this is:
- fixed the widget position,
- add on scroll with move
- add delay to the animation (this way, the black shape will enter at the page point you wish it to appear)
- if you need to do something else (move again or vanish), add a second animation step.