Jump to content


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

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

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

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.