roakin

I'm working on a ScrollTrigger animation https://dev.webfeeling.at/bouvier/ueber-uns/philosophie-geschichte/ The animation is fine, but i cannot get two things to work as expected: - due to the sticky header the animation doesn't start smoothly but jumps to its' desired position - the end of the animated contend is always cut on the very end of the horizontal scrolling section and the content underneath the animation scrolls into the animation section Since i'm running out of ideas on how to solve i'm thankful for any support

i think because of the background pattern. so any png i put on top of the floral background would break the pattern - i think

this would how the final design should look like, i think that makes my explanation a bit clearer

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

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?