Jump to content
GreenSock

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

Bug report: border disappears or flickers on scroll when using scrollTrigger "y: 0"

Go to solution Solved by ZachSaucier,

Recommended Posts

Hi,

 

I have had this issue in multiple sites where I am using scrolltrigger and animating the y property. This is what happens on an <a> tag for example (see screenshot). I have had this issue also appear on normal <div> that have border properties. I have also tried to replace the border with outline for example but same thing happens.

 

When I hover over it, the border corrects itself and looks fine after that. Also when you change some properties through "inspect element" in chrome for example. The error also occurs in Microsoft EDGE, but have not seen it in firefox or safari.

 

One fix that seems to work is to not use the transform property Y but the basic TOP property. I prefer to use the Y property however.

 

Does anyone know how to fix this issue?

 

This is my code:
JS

gsap.registerPlugin(ScrollTrigger);
setTimeout(function(){
  ScrollTrigger.batch('.animate-in', {
    onEnter: batch => gsap.to(batch, {autoAlpha: 1, y: 0, ease: "power2.out", duration: 1.6, delay: 0.15}),
  });
}, 100);

CSS animation:

.animate-in {
  opacity: 0;
  transform: translateY(80px);
}

CSS button:

.button {
  border: 1px solid $black;
  background-color: transparent;
  display: inline-flex;
  align-self: center;
  transition: all ease-out 300ms;
  padding-top: 15px;
  padding-bottom: 16px;
  padding-left: 22px;
  padding-right: 22px;
}


 

Screenshot 2020-12-29 at 14.40.42.png

Screenshot 2020-12-29 at 14.52.24.png

Link to comment
Share on other sites

  • Solution

Hey rubenmeines and welcome to the GreenSock forums.

 

A few notes:

  • You should set all transforms of elements that you animate with GSAP with GSAP. Not doing so is one of the most common GSAP mistakes
  • In general it's good practice to avoid animating the y position of the element that is used as your trigger. Doing so makes the logic of when to fire events more difficult. 
  • This definitely sounds like a webkit rendering bug. Have you tried using will-change: transform on the elements that you're animating?
  • It's always helpful if you create a minimal demo of the issue when posting here. Otherwise we're often guessing as to what the issue is and how to fix it :) 
  • Like 4
Link to comment
Share on other sites

  • 1 month later...

Thanks Zach! Sorry for the super late reply, but the will-change: transform did do the trick (just tested it now)!

 

I'm gonna pay some more attention to the best practises. Thanks again! Super nice.

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.

×