Objects disappear and appear while scrolling. Using ScrollTrigger and LocomotiveScroll

[PereCC 3 Likes (Newbie)]

Hello everyone! I express my deep gratitude to the community.

There is a problem when objects disappear and appear while scrolling (banner-big children). How can I fix this?

See the Pen zYzOvZj by PereCC (@PereCC) on CodePen

[nico fonseca 518 Likes (Leader)]

Hi @PereCC , the GSAP community is awesome, there are a lot of nice people here! 💚

About your issue, I don't know why but I don't see where it is 🙁 . Can you be more specific ? 

PS: I love the "locoScroll" variable name, in Spanish loco means "crazy" so i always read crazyScroll or "el scroll loco" 😂

[PereCC 3 Likes (Newbie)]

4 hours ago, nicofonseca said:

Hi @PereCC , the GSAP community is awesome, there are a lot of nice people here! 💚

About your issue, I don't know why but I don't see where it is 🙁 . Can you be more specific ? 

PS: I love the "locoScroll" variable name, in Spanish loco means "crazy" so i always read crazyScroll or "el scroll loco" 😂

Hi @nicofonseca 👋   "el scroll loco" 😂   sounds very cool!

 

This bug I can see in my Safari 13.1.3 (15609.4.1) I have created a little video from my screen you can see the video on youtube

[GreenSock 18,243 Likes (Superhero)]

Very strange indeed - it looks like a new Safari bug related to when a transform switches from a 3D value like translate3d(0px, 0px, 0px) to a 2D one like translate(0px, 0px). By default, GSAP will use 3D transforms during the animation and then switch back to 2D for performance and memory reasons at the end. 

 

Try adding this:

gsap.config({force3D: true})

Or you can make it false. The default is "auto" which does the switching. 

[nico fonseca 518 Likes (Leader)]

As @GreenSock said if you set gsap.config({force3D:true }) and add on the headline:

 

gsap.set('.banner-big__headline',{
  y:0,
})

every works fine 🎉
 

One curious thing is that if don't add anything and remove the overflow:hidden to banner-big, everything works normal 🤷‍♂️

Welcome to the new Internet Explore 😂

[PereCC 3 Likes (Newbie)]

10 hours ago, nicofonseca said:

Welcome to the new Internet Explore 😂

🤣 hah very nice nice joke 

@GreenSock @nicofonseca I Am really appreciated, thanks for helping 👍

 

[nico fonseca 518 Likes (Leader)]

🙌 🙌 🙌 

Keep doing the "el scroll loco" 😂