Jump to content
GreenSock

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

Objects disappear and appear while scrolling. Using ScrollTrigger and LocomotiveScroll

Go to solution Solved by nico fonseca,

Recommended Posts

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

Link to comment
Share on other sites

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" 😂

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

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

Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

  • Solution

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 😂

  • Like 2
Link to comment
Share on other sites

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 👍

 

  • Like 2
Link to comment
Share on other sites

🙌 🙌 🙌 

Keep doing the "el scroll loco" 😂

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