Tried :I have tried using the class adder finesweet tool, using custom code to change the positioning of the background of the text and move it to half way. (Text background clipping) = but to no avail.
Know : I can see from inspection that there is a scaling interaction happening as the interaction plays.
Question : is it possible to have two divs (BG :white and pink) and then have the text layered on top but transparent, therefore letting the colour of the divs be seen through ?
Thank you Thank you ! I am having fun trying to figure this one out
Give one the position relative, with 17rem of height, and a background color (gray in this case), add a heading inside of it and give it an absolute position to the bottom, give it 12 rem of font size with white color
Give the other div block 5 rem of height, with an effect of Blending âdarkenâ, a background color #fdd6d5
That should do it, for the animation itâs called paralax animation, webflow has a video on it
If youâre trying to also get the âtypingâ effect of one-character at a time, James is using several libraries for that including split-type, GSAP, and scroll-trigger.
It would take a bit of work to unpact the positioning and timing of the elements, and combine that with the parallax color effect that Yakubâs identified, but you might have some fun with that.
Give the âDiv Block 4â, black background, overflow hidden
Give the âLeft Alignâ, position relative
Give the âDiv Blockâ 3 a height (or it wont appear in the published site)
You will have to play a bit with the CSS to have a perfect aligned blocks and heading
For the animation:
Select âSection Headerâ, create the while scrolling in view animation, and do exactly like this, (you have to put at 63% because thats the start of your website i donât know why)
I got it !!
Anyone wondering, I just did as Yakub said on the first reply by: giving greater z index to the pink div so it sits on top of Text, and then applying : Blending (darken) to the Pink div.
