Jump to content
GreenSock

Landrynadre

Animation ligh

Go to solution Solved by GreenSock,

Recommended Posts

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

giiif.gif?fbclid=IwAR0hhBq28-RCcz30jsjWF

Link to comment
Share on other sites

  • Solution

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

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×