Need help with this animation
I am trying to get one animation similar to (https://martingarrix.com/) when the "+" icon scales and the other section enters but I have to move the below section up in the animation but by doing so, every section below will have to move up. Need help on how can I achieve it. Also, the image when scales up is distorted and not clear how to fix that too?
Read only: https://preview.webflow.com/preview/prac-layout?utm_medium=preview_link&utm_source=designer&utm_content=prac-layout&preview=51bfe57fab782f94c19e73f0533bd43e&pageId=664318bf7e06c0c8877b20a4&locale=en&workflow=preview
3 Replies
for image scaling - use clip path and/or svg to prevent the pixelation. You could use clip path bae here!
for the sections - you'll want to look into using position sticky to make the back content "stay" while scrolling.
animating clip path with gsap: https://webflow.com/made-in-webflow/website/clip-path-animated?ps_partner_key=a2VlZ2FubGVhcnk4Njcy&ps_xid=bmBs42noIaiuNz&gsxid=bmBs42noIaiuNz&gspk=a2VlZ2FubGVhcnk4Njcy
clip-path animated
clip-path animated - Webflow
learn how to animate clip-path with gsap to create a cool flipping switching image animation
position sticky animation with scaling content: https://youtu.be/t--IhKtYru8
Web Bae
YouTube
How to Build Grid Zoom while Scrolling in Webflow [EASY]
This interaction creates a grid zoom while scrolling effect in Webflow. These grid scroll animations are a great way to feature gallery content like portfolio work or products.
// CLONE IT (affiliate link)
👯♂️ https://webflow.grsm.io/cloneable-is-bae?sub1=grid-zoom-while-scrolling
// FREE STUFF
💪 My ULTIMATE Webflow Resource Library: https:...
Hi @Web Bae Thank you for the resources.
I have made a quick fix my setting my section below with blending as darken, it di the job for me. https://preview.webflow.com/preview/prac-layout?utm_medium=preview_link&utm_source=designer&utm_content=prac-layout&preview=51bfe57fab782f94c19e73f0533bd43e&pageId=667161da13f991927f03e522&locale=en&workflow=preview
But still the img is distorted
while scaling