Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Clms

Mirrored Logo On Top Of Slider

Recommended Posts

Hello,


I am trying to think about a possibility on how to put a logo on top of a photo.

The logo should be "filled" with the photo but vertically mirrored.

 

If it was a static photo, I would put an SVG on top of the image and fill it with the mirrored version of the background photo.

 

In my case the background image is not static, it is a slider - so the image changes automatically.

I now want the logo on top always shows the vertically mirrored version of what is currently behind the logo. Kind of like "glass".

 

No matter what, I could not find a solution in my head.
Any idea on how to tackle this issue?

Attached you will find an exmaple on how I imagine the look.

 

Thanks a lot!

 

flip-example.jpg

Link to comment
Share on other sites

Are you asking if there is a GSAP plugin to help with that? If so, the answer is no. 

 

I'd probably clone the image, scale it to -1 and use a mask or clip-path to only show the heart shaped section. If you put together a demo we're happy to help with the GSAP related parts of your project.

 

Happy tweening.

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

Thanks a lot!
I thought there might be a plugin for that.

This solution is what I have had in mind as well, but how would it work with a slideshow?

That's my issue - I only can do it for a static object, not something that changes/moves in the background?

 

Thanks so much!

Link to comment
Share on other sites

It would just be a matter of moving the reflected image an equal amount in the opposite direction. Here's a basic example.

 

See the Pen eXQRbz by PointC (@PointC) on CodePen

 

Maybe that'll give you some ideas. Happy tweening.

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Ah, so easy. Thanks for your input, I think I can solve the problem now :)

  • Like 1
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.
×