Jump to content
Search Community

Whenever I do a scroll, it shows me a white screen for no reason.

Sadness7311 test
Moderator Tag

Recommended Posts

Whenever I scroll to my .container element, it sometimes works fine and sometimes show me a white screen. I am totally annoyed by it. Please help me.

let scrollTween = gsap.to('.head2, .para2', {
    xPercent: 100,
     ease: "none",
     scrollTrigger: {
         trigger: ".container",
         pin: true,
         scrub: 1,
         end: "+=3500"
 });//My Code
Link to comment
Share on other sites



Please provide a minimal demo. There is absolutely nothing we can do with the snippet you posted. We have no clue of how the HTML/CSS  of that particular section looks like.


Please provide a demo that has just a few elements (not your entire project) in codepen so we can take a better look.


Happy Tweening!

Link to comment
Share on other sites

See the Pen QWVQyVq by Sadness7311 (@Sadness7311) on CodePen

I have created this pen, but my issue is not showing here. What I have guessed is, that when I scroll, it takes by container element very down and a space is created between them, this causes me to see whitescreen. I have tried doing pinSpacing: false but it won't help.

Link to comment
Share on other sites

As Rodrigo wrote, there must be a site link, codepen, video, etc., for us to see the problem.
but if I'm guessing correctly, you want the selected element to be created/appeared in X orbit when scroll.


You can add the code below. and add "animate-on-scroll" class to your element. but don't use "container" class. because container have 100vh it can cause trigger issues. 

     if (document.getElementsByClassName('animate-on-scroll').length > 0) {
            gsap.utils.toArray(".animate-on-scroll").forEach(x => {

                var tler = gsap.from(x, {

                    ease: "sine.inOut", y: 50, duration: 0.75, autoAlpha: 0, scrollTrigger: {
                        trigger: x, start: "10px 80%", end: "+=100", //only to down
                        toggleActions: "play none none reverse", end: "top 100%",



I think this part of your code seems very problematic. it may not make sense to use such a high value:

" end: "+=3500""

Link to comment
Share on other sites

sawacrow, you didn't understand what I am trying to do. I am not making a animate on scroll animation. I was making a kind of parallax scroll effect. Which I have done so. It is not looking good on codepen because nothing loaded. But its working great as hell on my page! 

See the Pen QWVQyVq by Sadness7311 (@Sadness7311) on CodePen

The new codepen, Thanks for trying to help!!!

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.
  • Create New...