roakin Posted August 20, 2021 Share Posted August 20, 2021 i need to fill a can with a image as filling based on scrollTrigger. Since i'm completley new to gsap i'm totally lost. i have prepared a codepen. the goal is to fill the empty can with the background while scrolling. Can you pls provide some hints how to achieve this? See the Pen dyWxgJe by roakin (@roakin) on CodePen Link to comment Share on other sites More sharing options...
iDad5 Posted August 20, 2021 Share Posted August 20, 2021 First a question: Do you want your can to be fixes (stay in place) while scrolling, or should it scroll with the page? Also It would be good to know if anything else happens while the can fills and if the Page has other content one can scroll to unter/after the can. If I was you I would first try to build a timeline or a tween the animates the filling of the can. You have to decide if you can work with a PNG on top that has a 'hole', or if you need to work with a mask. That depends on the design you have in mind. Both is possible, working with a mask is (in my opinion) slightly more komplex, but not a big deal at all. I don't know ehat you skill-level with html/css/svg etc. is, but that might have an influence on how to tackle it. Link to comment Share on other sites More sharing options...
roakin Posted August 20, 2021 Author Share Posted August 20, 2021 the can should be fixed while scrolling. in addition after 20%, 40%, 60%, 80% of filling additional text-icon combinations should popup, but i guess that should be pretty easy once i've figured out how to control the filling. the revealing has to be done by using a mask, because with a png on top i'd also hide parts of the cans frame. My skills in html/css are pretty decent, but i've never worked with svg masks before. Do you know if there's a sample i could use as starting point? many thanks in advance Link to comment Share on other sites More sharing options...
roakin Posted August 20, 2021 Author Share Posted August 20, 2021 this would how the final design should look like, i think that makes my explanation a bit clearer Link to comment Share on other sites More sharing options...
iDad5 Posted August 20, 2021 Share Posted August 20, 2021 I'll see what I can find. But actually I don't understand why you cannot work with a png... Link to comment Share on other sites More sharing options...
roakin Posted August 20, 2021 Author Share Posted August 20, 2021 i think because of the background pattern. so any png i put on top of the floral background would break the pattern - i think Link to comment Share on other sites More sharing options...
Cassie Posted August 20, 2021 Share Posted August 20, 2021 Hey there @roakin I would probably look into an SVG mask or clip for this - Here's a great article to get you started. https://www.motiontricks.com/svg-masks-and-clippaths/ 3 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now