Landrynadre

I using car mask because its png. But i cant animate shiny effect using gsap. When i using css hover property all working. My code: Html: <div class="mask relative lg:right-32 px-6 md:p-0 w-full md:w-2/3 lg:w-1/2 overflow-hidden"> <img class="img-mercedes" src="~/assets/img/mercedes.png" alt="mercedes" /> </div> CSS: .img-mercedes { object-fit: cover; object-position: center center; } .mask { -webkit-mask-image: url("~/assets/img/mercedes.png"); mask-size: 100%; mask-image: url("~/assets/img/mercedes.png"); } .mask:after { content: ""; position: absolute; top: 0; left: -110%; width: 250px; margin: auto 0; height: 100%; background: rgba(255, 255, 255, 0.3); transform: skewX(-45deg); transition: 5s; } .mask:hover:after { left: 130%; } GSAP: let mainTl = gsap.timeline({ delay: 0.5 }); mainTl.fromTo(".mask:after", { x: "-110%" }, { x: "130%" });

Can I do such a light effect in gsap? (The last light effect on the car)

I have one more question. Scroll-behavior on html tag is ok? Or is it bad and works like for * tag..

Okey, thanks for help! I try fix all buggs.

Hello, I create portfolio in NuxtJS 3 SSR. I apend gsap to my project and animate only position and opacity. I test my page on diffrent phone. I noticed that on xiaomi my animation are lagging is not liquid. U can test it in my link. What could be the problem? Link to page: https://rucinskyd.netlify.app/ Code: Animate about section: gsap.fromTo( "#about", { opacity: 0, y: "+=200" }, { opacity: 1, y: 0, stagger: 0.2, duration: 1, scrollTrigger: { trigger: "#about", start: "top 80%" }, } ); Animate card: gsap.fromTo( "#additionalInfo .card", { opacity: 0, x: "-20px" }, { opacity: 1, x: "0", duration: 1, stagger: 0.3, scrollTrigger: { trigger: "#additionalInfo", start: "top 40%" }, } );

Hi, I try to nod my head but my animation is not natural as the neck is not stretching but moving in the Y axis. What can I use to make my animation smoother? I would like to make a short pause between the animations, i.e. the head leans forward returns, pauses leans back, returns and so on I will want to move my fingers and hands on the keyboard, would someone suggest what functions can I use for such things? And are there any tools that will allow me to click such an animation and then use gsap to animate it?

This is the "smoothness" effect I mean, I will try to extend it so that the text appears more randomly in the x-axis.

I would like the elements that go beyond the view to come back down, so that the effect would be that this text keeps going up all the time and never ends. Now, as you noticed, the elements will reach the specified value, so the animation restarts and there is a jump. If necessary, I can send a link to the page where I noticed that someone is making such animations without using gsap. Is there any way to avoid this re-starting you mentioned?

Hello, Recently started my adventure with greensock and i tryin do infinity animation my svg background text. I tried to edit other examples when carousel was horizontal but this animation doesn't work properly. I need smooth animation but my animation seems to reset every now and then.. I don't see problem in my code.. Would anyone have any comments that could help me?