Jump to content
Search Community

Animation ligh

Landrynadre test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

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

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.
×
×
  • Create New...