Snail

Oh yes, that's exactly what i was looking for ... wouldn't have guessed i could morphSVG from a class name to another class name. Best library ever! (I promise to learn to use codepen ... it's just firefox obfuscates referrers and these embeds cause all kind of warnings, so i'm somewhat reluctant, but that's my problem to solve.)

Dear supports, I would like to animate a svg clipping path that is applied to a html element by css clip-path:url(#xxx). Basically i have this code, made of a HTML element with the first path #Curve1 applied. This works statically. The reference by ID is required, as css clip-path can't do bezier curves in the direct shape declaration. <div style="clip-path: url(#Curve1);"> <img src="img.jpg"> </div> <svg width="0" height="0"> <defs> <clipPath id="Curve1" clipPathUnits="objectBoundingBox"> <path d="M 0,1 L 0,0 L 1,0 L 1,1 C .75 .8, .25 .8, 0 1 Z" /> </clipPath> </defs> </svg> <svg width="0" height="0"> <defs> <clipPath id="Curve2" clipPathUnits="objectBoundingBox"> <path d="M 0,1 L 0,0 L 1,0 L 1,1 C .75 .95, .25 .95, 0 1 Z" /> </clipPath> </defs> </svg> The second svg element #Curve2 would be the target shape of the animation, tweening between them over a timeline. Basically, just two numbers are different, 0.95 instead of 0.8: C .75 .95, .25 .95, 0 1 So question is how can i animate between these two shapes? Is it possible with this syntax or is any other needed instead (that would have to work with beziers though)? I have all the tools and plugins available that come with gsap premium. (My final goal would be to do this animation on scrolldown, and with an inertia rubberband effect on it, but i'll cross that bridge when i get there.) Happy for any directions ... Unfortunately i couldn't find some forum post with this specific application of clip-path.

sorry, i was too unspecific about that "header video" pinning situation. What's in the briefing is this: We have a section as the start of the page (it contains a video, but that's not really specific to videos), it's height is the viewport height. When scrolling down, the video scrubs trough on a scroll distance of 3 times its height. The video should stay visually fixed in its place for that long, not moving upwards. The sections coming next should be displayed visually in front of that video and scroll by it. So the video becomes like a background animation then. Currently i have a display:fixed container w with subzero z-index that contains the video in the background. And there's the rest of the page that is natively scrollable (in my case: with scrollsmoother), that scrolls past that background container independently. So if i wanted to change that to be gsap-transform-pinned instead of css-fixed, the actual question is: Can i make pinned elements stay in place, even while follow up elements in the same container scroll by in front of it? Or do follow-ups naturally "push" the pinned element away? (I understand how pinning technically works, by adding padding below the element to keep the follow ups out of view as long as specified. I think i'd acually need ... negative padding?) Thanks a lot for your patience (should i create one thread per problem, or is it okay to run this in one "Snail's beginners questions" thread?)

Thanks ... i'm aware of the encoding with keyframes and have read the threads above, and am doing that with ffmpeg command line (no idea if this is the optimum yet): ffmpeg -i input.mp4 -vf scale=960:-1 -movflags faststart -vcodec libx264 -crf 20 -g 1 -pix_fmt yuv420p output.mp4 It's running very very fine on faster Desktops / Laptops (like imac 2019, thinkpad T16 2022) fowards and backwards, but still gets a bit choppy on slower pcs and mobiles. I'll try to experiment ... – on smaller pixel dimensions for those devices (instead of scaling them) – negotiate a cutdown the number of videos on the page (maximum curently is 7 scrub-by-videos, most in the lenght of 120-180 frames on one page) – dynamically load/unload them on viewport-intersection intead of having all of them "ready" same time? A special case is a big 100vw/100vh header video (very similar to the apple headphones animation) that is fixed in the background, while the rest of the page scrolls above it in a scrollsmoother container ... i'm rather sure doing it with fixed position and other content scrolling by visually in front of it is a performance killer, but have not found a way around it yet to keep it in position. Pinning within the scrollsmoother? (This is where i started that specific journey, and that part of the project may be even worse skill quality than the rest of it) Thanks for that helper function for a canvas draw though – i have not seen that helper yet and it might make things easier to handle and save me for at least some of the "videos" if the other things fail to perform. So much for "computers are fast enough for anything in 2024" ...

That's a good idea to make it feel like it's "closing in" without actually doing it logically. I'll give that a try to see if that is "good enough".

Okay ... i understand the logic and implication with the element moving relatively to the background better now. As "enough elbow grease" is not within my skills set yet, and the priority for this detail is low, i'm going for the "not possible" answer and still enjoy the rest. Thanks for your fast and competent feedback ... Now onwards with that dreaded mp4 scrubbing mobile performance optimization, that our project lead sold so happily to the client

Dear Supporters, thanks for the amazing gsap library, it's a real joy to work with this, making mistakes and yet progress every day! Currently i'm hunting down a small detail, nothing essential but would be nice to have: I do have a page where scrolling is smoothed by ScrollSmoother, so scrolling feels smooth, independently on the input device. That's fine. I currently have a section in that page that is pinned by scrolltrigger and pin:true. So the overall pagescrolling pauses there to play that timeline within the pinned element, then goes on. Fine too. But the stop when the pinning kicks in is abrupt, it's not "smoothed" like the rest of the scroll down motion. It would be cool if the pinned element slows down when it's closing in to it's trigger mark, and stops then, and after it's unpinned it starts to move on again with that "smoother lagging" effect. Is there a way to do that? My current project is a mess generally, if required i may be able to construct an example. But maybe it's just a "not (yet) possible" answer so i can stop looking for a solution. thanks for you input Snail

Thanks @Rodrigo and @Cassie for the replies, both are of value for me to understand things better. Regarding Tweening of non-numeric css value: So i understand right that GSAP is able to tween something like background-image:url('img1.png') and due to the stepped ease, this happens in full numbers from 1 to 12. That's great I immediately broke this by having a folder name with a number in it that tweened too: background-image:url('images1/img1.png') but that's something that can be avoided of course in production projects. Regarding manipulating the tween number (like applying a remainder funktion on it etc.): i get it that would be a bad idea now that i understand the principle better. Repeat is the way here definitely. Thanks for the offer looking at a minimal demo, but as i'm just tinkering at the moment, it would be too much effort just for me learning basics ... I'm sure i'll be back with more practical questions (and a club greensock subscription).

gsap.registerPlugin(ScrollTrigger); var frame_count = 12, offset_value = 100; gsap.to(".viewer", { backgroundImage: "url('img/img"+ frame_count +".png')", ease: "steps(" + frame_count + ")", scrollTrigger: { trigger: ".scene", start: "top top", end: "+=" + (frame_count * offset_value), pin: true, scrub: true } }); Sorry for this total beginners question - i'm trying to wrap my head around a prototype, non production gsap scrolltrigger scrubbing animation, while getting to know gsap as a whole. Love it already, but it's a bit like magic happening under the hood with very little code to write, making it hard to trust it as a beginner or dig in to understand it below the hood. I have ... – the gsap main library and scrolltrigger plugin – a very simple html structure with a scene that is 100vh 100vw, (and some header above and below that). – a div that is centered in that scene, that has a background image named "img1.png" – the javascript / gsap code above, adapted from one of your examples, that scrubs through that animation in 12 frames, exchanging the img1.png for img2.png for img3.png etc. until img12.png each step. – (i do understand canvas or sprites are smarter in production, i just want to keep it very simple for now.) This works perfectly, i'm happy! End of story ? But i don't get it ... Where in that code is the variable frame_count updated to the new number between 1 and 12? – I have set the img1.png in the initial css, so far so clear. – I understand that with gsap.to i define the end-state of an animation, so the resulting img12.png is clear to me too somewhat. – But: where do the numbers 2 – 11 in between come from, and how do they get into the css background-image? I understand that for numeric values this is done when tweening, and is one of the purposes of gsap after all. But does it the same in the string url('img/img"+ frame_count +".png') automagically by looking for a number in the string and changing that through time, or is the variable frame_count somewhat registered to be the changing element of that otherwise static string? Extended academic question: I by now know this might be better done with a timeline repeat, but just for understanding it: My initial academic idea in my prototype was to have only 12 images numberned 1 to 12 to cycle through, but have 24 steps in the animation (positioning / rotating it additionally). So the images would cycle through twice until the end of the animation (like a clock cycling through twice a day). After the 12th step, i would run out of image files with the approprate number. I then wanted to wrap around the counter, and reuse img1 for step 13, img2 for step 14, etc. – calculating the remainder with frame_count % 12 and reference the matching image file to the remainder then, like this: url('img/img"+ frame_count % 12 +".png') This does not work (and i'm not surprised it doesn't, there's not clue it could, in the given position in the code). Question is: would there be a way to inject some custom counter function in the loop / tween / however it is called? thanks for any enlightment :-) Snail