Streaming live at 10am (PST)

Craft animations that build as you scroll - how can I rip an image into pieces and place them back?

I am trying to put together my first website, and “Craft animations that build as you scroll” would look perfect there. While scrolling the page, I want an image to be built up with its ripped pieces coming from different directions.

Its section is on URL:

Are there any tutorial videos about that?
Thanks!


Here is my public share link: LINK
(how to access public share link)

Hi Laura, did you ever locate any tutorials on this? I’m looking to do the same thing. Thanks. ~Tracy

No, unfortunately not… tested out lots of ways/possible solutions, but no success. If you happen to find, please let me know too!

Hi,
Thanks for the reply. I’ll share if I find the solution.

1 Like

I’ve searched all education material for a tutorial on how to do this one, but strangely enough, it doesn’t exist even though it’s promoted and used in the education material feature. All other animations have guides attached. :frowning:

https://kajabi.com/ uses it on their front page.

Yeah! That’s exactly what I’ve been looking for. I never found a solution to that, thus kind of gave it up :pensive:

I only used webflow for a few weeks, so my approach might not be the best one.

But I went ahead and tried to build it myself.

You can see the result here: Webflow - Launchr

I would love any feedback if this could have been done in a better / smarter way.

I love the colors there - dark blue and pink combo and the nav is nice & simple. Logo has the cool rocket img in it.
The first sentence, is it meant to be half across the gray line or fit within the lighter area? Atm I’m looking only at the desktop size, because it looks like you haven’t gone over to the tablet size yet… right? The tablet and further definitely need the font and menu burger sizes.

Yes, haven’t done any responsive work yet. I was just playing around with the animation that was mentioned here. Was this what you were looking for?

Didn’t see anything responsive with this “art-in-pieces” effect