Please delete this post3

Please delete this post3

1 Like
  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

Please do not duplicate requests for identical issues.

https://discourse.webflow.com/t/how-would-i-go-about-making-this-scroll-animation/251323/4

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

@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.