Is it possible to create a similar swipe-up effect inside principle like the one in this gif?
I believe it would need to be an animation activated based on scroll position. In webflow development, we call it “scroll into view”.
Hi there,
That’s easily achievable using Drivers, drivers is a separate animation timeline that is controlled by the positioning of a scroll group.
In this case, if you have several images within a scroll, I would have each image inside a group as well and with clipping activated, this way you can attach the height value of that clipping group to the positioning of the scroll and add keyframes to every one individually.
Before adding any breakpoint, change the height value of those out of view to 0.
Like so:
As we open the drivers panel with those image groups selected we can click in the + icon and select the height property, this will add keyframes in that specific scroll value (presumably the scroll start position)
Now drag the top timeline to the right so the scroll value increases until the moment where the next group should appear on screen, and click in the + icon next to the group (image 3 in my example) that needs to show up, this will add another keyframe but only for that group.
That’s the starting point for that group animation, now advance the scroll a little bit and add another keyframe but this time, also change the height of the group to the final height.
Now do the same with all the other images.
Final drivers timeline should look something like this, where you can see all different image groups having its starting and ending keyframe at different points in the scroll vertical value.
So final result is what you are looking for.
Just note that drivers is a 2-way link, so it will do the same in reverse as you scroll up again, think of drivers as a way to scrubbing through an animation.
Hope this helps, as always here’s the .prd file if you need to check inside:
2 Likes
No worries! Glad it helped.
I also learned thanks to the community and their tutorials so just trying to give something back 
2 Likes
That is still triggered by scrolling, meaning it stops if you stop scrolling. Would be really cool if you could add triggers for instances in the drivers view
1 Like
Agreed but from what I’ve read on the forums its a feature request that we have to wait for… I guess going with scroll is best case scenario for now.
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.