ScrollTrigger Issue

[Danclp]

Hi there,

 

It seems like I am still unfamiliar with ScrollTrigger. When working with a website similar to the previous one, the problem occurs every time. This is my third time checking out with you guys. Hopefully, you can continue to assist me. Please read through my brief introduction below to understand my problem. Thank you.

 

I will have an auto-run animation when the website loads (this is set in JS lines 10 to 25). Once the animation finishes, the user can scroll the site to push out the Home's contents and call in the next section, the Intro (this is set in JS lines 27 to 85). It works just fine before I insert the lines for calling the "Intro" section (Home: JS lines 27 to 57, Intro: JS lines 59 to 83).

 

I understand that I may be able to combine the ScrollTrigger command into one big chunk of action, from Home to the last section. However, I remember someone advised me not to make the command lines so complicated and to do it section by section. So, what is the correct way if I do it section by section? And most importantly, what could be my problem this time?

 

Thank you, and I look forward to all your assistance and advice.

 

See the Pen jORvrRR by danclp (@danclp) on CodePen

[mvaneijgen]

GSAP is smart and will calculate all the end positions (or start) on page load and then when things need to animate it can purely focus on animating, this makes it blazingly fast! But this means that if you want to animate the same thing twice, they both calculate their respective starting values on page load, but in your case you want the second animation (ScrollTrigger) to get its values when the first one is done, right? To do this I would create the whole timeline/ScrollTrigger combo in enableScroll() and not half (timeline) already,  and then the other half (ScrollTrigger) on complete.  Also when working with a timeline/ScrollTrigger combo it is best to view it as one and I find it much easier to create the ScrollTrigger inside the timeline, so there can't be any confusion when coming back to the project in a year what controls what. 

 

When wanting to fix FOUC https://gsap.com/resources/fouc/ all you need is visibility: hidden; and autoAlpha: 1. I would not also set display: none; the browser does a lot of things different when setting display: none; and it is also not a property that you can animate, it's either one value or the other, there is no in between.

 

Now I'm only not sure what your last animation should be doing, but I hope this already gets you in the right direction. Happy tweening!

 

See the Pen MWRqvgg?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Danclp]

@mvaneijgen

 

Thank you very much for the response.

It seems like different people have got their references.

Nonetheless, there is no right or wrong.

However, I am more towards your direction on day one, too.

 

After studying through your refined codes and cleaning up mine, the visual final shows.

However, I have another question.

If you look at my JS lines 32 and 33, we previously used.

It no longer works after I inserted more lines (refer to JS lines 55 to 61).

So, I used the "clamp" to solve the issue.

Do you have any idea, and can you enlighten me why?

 

See the Pen oNOPEWm by danclp (@danclp) on CodePen

[Rodrigo]

Hi,

 

I don't have time to go through all your HTML and CSS, but I believe that is creating a problem where not enough scrolling is generated to accommodate all the animations you want to create, that's why using clamp in the end configuration object forces the animation to be completed in that amount of scroll:

let scrollHome = gsap.timeline({
  scrollTrigger: {
    trigger: '#main',
    start: "top top",
    end: 'clamp(+=5000)',
    pin: true,
    markers: {
      startColor: 'green',
      endColor: 'red',
    },
    scrub: 1
  }
});

 

You might want to have a look at this video @Cassie made on the subject:

 

Hopefully this helps.

Happy Tweening!

[Danclp]

@Rodrigo

 

Thanks for picking up the call.

Yup, I learnt the technique from her video.

I was trying my luck to see if I could hear a second opinion.

Anyway, thank you so much for all the patience and help.

Hopefully, I will be strong enough to be the next contributor soon.

And teach people what I have learnt.

Take care, mates.