Jump to content


Scroll Trigger - Morph SVG Gap

Go to solution Solved by GreenSock,

Recommended Posts

When you hover over the photos a svg morphs. Displaying a white shape over the bottom of the image. If you hover while scrolling there's a 1px gap below the svg and the bottom of the photo. I've tried adjusting CSS and some other JS tests with placement of the morphed svg. But can't seem to make the 1px gap disappear on scroll. Any advice would be greatly appreciated. Thank you!

See the Pen yLKNOxy?editors=1010 by bws_dan (@bws_dan) on CodePen

Link to comment
Share on other sites

  • Solution

Ah, the joys of browser rendering weirdness. 🙄 It's unrelated to anything with GSAP. Have you tried this in your CSS?: 

#smooth-content {
  will-change: transform;


  • Like 1
Link to comment
Share on other sites

That did the trick! Thanks Jack!

  • Like 2
Link to comment
Share on other sites

Really like this hover effect too btw. Very nice!

  • Like 2
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.