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

[Sadness7311 0 Likes (Newbie)]

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

[Rodrigo 5,375 Likes (Superhero)]

Hi,

 

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!

[Sadness7311 0 Likes (Newbie)]

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.

[sawacrow 6 Likes (Newbie)]

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

[Sadness7311 0 Likes (Newbie)]

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!!!

[sawacrow 6 Likes (Newbie)]

i see,
If you link it to a domain that we can access, we can see it.
you must verify your codepen accounts email btw. for view in full screen