I’m new to Webflow but have learned a lot in just the past two days, kudos to the Webflow team for creating such an intuitive tool!
I’d love some advice to check if my thought process for this idea makes sense, or if you’d say it might be too ambitious for a beginner.
Here’s what I’m trying to achieve: I want to stack several images in the center of the screen, overlapping each other and covering a piece of text hidden behind them. As the user scrolls down, the images would scale down and move outward in different directions, gradually revealing the text. By the end of the animation, the images would form a circle, similar to the Noura cloneable (Google:noura template supply webflow). When scrolling back up, the animation would reverse.
Would this be achievable using GSAP interactions within Webflow? My plan was to create a timeline for each image, where each one has its own start and end positions, scaling, and perhaps some extra animation like a label to the image or fade effect at its end state.
Any advice or suggestions on whether this is the right approach (or how to simplify it) would be greatly appreciated.
I’ve finally figured out how to set this up, but I’m stuck on the last part, getting the animation to look smooth and final positioning.
I’m not really sure how to fix this.
When I scroll, the transition isn’t smooth at all, it jumps straight from the starting point to the images quickly spread out, instead of easing into it. I know it’s probably because of how I set up the timeline, but starting it at 0% is too early. I want the animation to trigger only when the laptop is actually at the centre of the screen. I’ve tried all sorts of things: adjusting the smoothness (currently at 80%), playing around with when the animation should start, but nothing seems to fix it.
At the end of the timeline, the section is off screen, I don’t know who best to deal with this so that at 100% the section is in full view. I’ve tried adding padding 400px to the section so that the 100% in the timeline is delayed but that’s maybe me clutching at straws.
I’d really appreciate any advice, I’ve been battling with this for a few hours now!
After many hours of trying to figure this out, I found the solution to fix this. For those learning, like I am, watch this video from Timothy Ricks, it explains how to apply this “stickiness” really well.
