Landrynadre Posted August 9, 2022 Share Posted August 9, 2022 Can I do such a light effect in gsap? (The last light effect on the car) Link to comment Share on other sites More sharing options...
Solution GreenSock Posted August 9, 2022 Solution Share Posted August 9, 2022 Sure, you'd probably need to have an SVG mask shape of the car, and just animate a semi-transparent white bar diagonally across that area. Good luck! Link to comment Share on other sites More sharing options...
iDad5 Posted August 9, 2022 Share Posted August 9, 2022 You could (in theory) also duplicate the image itself if it is png or webp with transparency and use it as a mask and animate the the shine inside with a background position or css-custom-properties. That way you wouldn't need an svg for every image, if you need more than one. Even with using the css attribute selector maybe.... As i mentioned it is a theoretical possibility, and probably only worth the (testing-) effort id you need to be able to change the image via CMS or other frequent means. If that's the case, I'd be interested in the outcome, and happy to elaborate on my conceptual idea - without any guarantees... Link to comment Share on other sites More sharing options...
Landrynadre Posted August 10, 2022 Author Share Posted August 10, 2022 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%" }); Link to comment Share on other sites More sharing options...
GreenSock Posted August 10, 2022 Share Posted August 10, 2022 Browsers don't allow you to access pseudo elements with JavaScript, so this is not valid: ".mask:after" If you still need help, please make sure you provide a minimal demo, like in CodePen. Good luck! 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