hey people.
i’m experimenting to archive this scroll effect you can see here on the presentation page from the iphone xs:
specially i mean this section
as you can see there (desktop only) the section somehow sticks and than the text left and right begin to come in in while i scrolling…till the last paragraph arrives and than the sticky section begin to moves again…
i cannot figure out how to do this. any ideas? would be a good challenge for the ext livestream maybe haha…
cheers
This is simple enough - create a fixed height section inside of which there is a position: sticky div containing graphic elements that are being targeted by the “while scrolling in view” interaction set on the outer section.
thank your for your fast reply dram!
i tried it that way but what do you mean with step 1 “create fixed height section”
do you mean to fix the height of the section to a certain value or to fix the position?
because if you mean to fix the height itself than we have a problem:
“Position sticky may not work correctly if any parent element has a set height” from here: Creating a sticky sidebar | Webflow University
and in fact i didnt worked…
The setup is on the scroll ix page.
I don’t know in which instances the fixed height parent would prevent sticky from working. It does work for me just fine but please check it out and let me know.
wow thank you for illustrating it!
one the apple page this effect has 2 parts:
1: the left and right iphone moving away out of the window
2: the text comes up from the bottom one after another
you illustrated the first one. i think the second one is also simple to execute if ones understood the basics of interactions BUT i’m not getting how we can prevent the sections below to scroll in…its like: the section is frozen till the whole animation is done and then the pageflow continues…
okay i think i’m figuring it out right now - lot of settings to consider…
will let you know soon what happend…
thx 
