How would I go about replicating this?

[ajk9044 (Andrew Kim)]

In this website: Appart — Original in digital

Originally there are 4 CMS items (Vivaldis, Contekst, Jaringan, Il Granito) that only show a line of text.

Then as you scroll down it starts to show the image and some text of a CMS item, until you scroll through all of them.

How can I make a similar animation?

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[Lisa123 (Lisamay)]

1. Initial Setup:

   • Add a section for each CMS item.
   • Inside each section, add an image element and a text element.
   • Set the initial opacity of the image and text to 0 (fully transparent).

2. Create Scroll Trigger:

   • Select the section for the first CMS item.
   • Go to the Interactions panel and add a new scroll trigger.
   • Choose “While scrolling in view” to trigger the animation when the section is visible on the screen.

3. Create Animation:

   • Add a new animation step.
   • Select the image element and set the opacity to 100% (fully opaque).
   • Select the text element and set the opacity to 100%.
   • You can also add additional animations like moving the text from off-screen into position.

4. Repeat for Other CMS Items:

   • Repeat steps 2 and 3 for the other CMS item sections, adjusting the animation as needed for each.

5. Preview and Refine:

   • Preview the animation by scrolling down to see if the images and text reveal smoothly.
   • Adjust the animation timing, easing, and other settings to refine the effect.strong text

[Stan (justAnotherDeveloper)]

Please do not duplicate requests for identical issues.

How would I go about making this scroll animation?

Thank you but what I really need help is showing a part of a div initially, then show the whole div as you scroll down, and then show a part of a div after that. Is there anyone that knows how to do that?

@ajk9044

Is there really no one that knows how to do that?

What research have you done on your own so far??

[webdev (Jeff Selser)]

@ajk9044 - If you want to know how some Webflow animations are created you can use developer tools and inspect the project js file. First find the value of the elements data-w-id in the DOM and then search the JS file for that value. That will show you the JSON that controls the animation handled by the IX2 library used by Webflow. It is pretty easy to read but can take you some time to determine the whole animation.

Effectively this in this case this is really an accordion effect on .project-wrapper elements controlled by scroll. If you can’t build this stuff yourself you can always hire someone who can.