ScrollTrigger markers laid in the wrong place

[Danclp]

Hi GSAP Fellows,

 

I have some problems with my GSAP implementation.

I understood that we should give a minimum demo every time we ask for help.

However, I mainly use SVG codes, which made the codes look huge.

Please tell me if you can help.

 

My first section worked tremendously; the rocket moved out of the screen as planned.

Regarding the next section, revealing the title text with the ScrollTrigger request, the markers remained in the first section.

I tried to remove the first section for debugging, and it solved the problem.

So, I am unsure what the problem could be with the two sections' ScrollTrigger request.

Could anyone give me some guidance on what I have done wrong?

 

Thank you all in advance.

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

Edited January 10 by Danclp
Add in screenshot

[Rodrigo]

Hi,

The issue here stems from the logic you're using for this, I noticed, while expanding the code area in codepen, that a resize event fixes the problem (try yourself), so this mostly is about when you run the logic to create that particular ScrollTrigger instances rather than something else. This seems to work the way you expect:

See the Pen RwdGoEZ by GreenSock (@GreenSock) on CodePen

 

Finally regardless the amount of code you can add an id to your ScrollTrigger instances and indent the markers so they can stand out from the rest, as shown in this demo:

See the Pen qBLRzVX by GreenSock (@GreenSock) on CodePen

 

Or at least indicate us the part of your code where the issue is happening. This time I was able to stumble upon it while resizing the code section in codepen, but I can assure you that it won't happen very frequently.

 

Hopefully this helps.

Happy Tweening!

[Danclp]

Hi Rodrigo,

 

First of all, I would like to wish you a wonderful year in 2024.

And my sincere apologies for all the inconvenience caused.

You are right, and the code has a resize event.

However, it is meant for the "SplitType".

So, the "SplitType" function will regenerate upon resizing the window.

 

After reading your response, I have been mongering the codes the whole day.

The ScrollTrigget event should not only happen when the window has been resized.

And the problem became worse after removing the resizing event.

 

Line 175 onwards is the code triggering the section I am struggling with.

However, above that are codes that call the rotation of the circles.

As well as the ScrollTrigger event for the top rocket part.

I hope I have given you enough information to help.

 

Until then, thanks a million for being patient.

 

 

[Rodrigo]

Hi,

 

Honestly I read your last post a few times and I don't know what the problem is. The issue here seems to be the order things are called. I played with your demo for some time and if you keep just the text ScrollTrigger everything works as expected:

See the Pen QWoKPVp by GreenSock (@GreenSock) on CodePen

 

Also removing the rocket animation works as expected as well:

See the Pen rNRMbbK by GreenSock (@GreenSock) on CodePen

 

Beyond that honestly I couldn't really tell you what could be the issue.

 

Hopefully this shed some light on this.

Happy Tweening!

[Danclp]

Hi Rodrigo,

 

I did some experiments after reading through your response.

The animation goes back to normal after the window is resized.

However, we can't just ask the visitors to resize the window to see the effect, right?

And, I am unsure what you mean by "the order things are called".

Assuming I am right, I moved the About section above all other animations.

However, the problem still occurs.

 

Then, I try to comment out the command lines one by one.

I noticed that as long as the "homePlanet" animation is not calling.

Everything will work just fine, as you showed me in your reply.

So, I started asking myself about my looping rotation and its speed.

Please see my codes below.

planet
  .to(".dot-line", {
    repeat: -1,
    rotation: "+=360",
    duration: 100,
    ease: "none",
    transformOrigin: "center center"
  })
  .to(".planet", {
    repeat: -1,
    rotation: "+=360",
    ease: "none",
    svgOrigin: "431.92 431.92",
    duration: 30,
    overwrite: "auto"
  }, 0)
  .to(".planet-ab", {
    repeat: -1,
    rotation: "+=360",
    ease: "none",
    svgOrigin: "566.76 566.76",
    duration: 60,
    overwrite: "auto"
  }, 0)

I am using duration to control its speed.

I wonder if it could be the duration that caused the issue.

 

This looping feature involved 2 sections, which you can see in the below codepen link.

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

The rotation works as a continuing animation, even after it has been scroll-triggered away in the first section.

You can still see the rotation animation available in the second section (the sliding text section).

Did I code correctly, or does it have another way of calling when we want it to animate continuously?

Also, should I use duration or something else when I want to slow down the rotation speed?

 

Can you give me some advice?

Thank you.

 

 

[Rodrigo]

Hi,

 

Perhaps I didn't phrased myself correctly with the order of things. What I meant is the fact that when you take the rocket scroll-controlled animation from the equation, everything works without the need of a resize event, so clearly that's what's causing this. So the rocket launch animation and ScrollTrigger should be created first, because that's the first thing in the natural order the user sees them:

https://gsap.com/resources/st-mistakes#creating-scrolltriggers-out-of-order

 

And that's perhaps why the resize event fixes everything, because the ScrollTrigger instances are refreshed after a screen resize.

 

Adding a ScrollTrigger.refresh() call to the triggerLaunch method helps, but only if the user doesn't scroll, because that method is called over 4 seconds after your code is initialized, that's why one of my first approaches was to hide the overflow from the document until that moment:

See the Pen RwdGoEZ by GreenSock (@GreenSock) on CodePen

 

function triggerLaunch() {
  gsap.set(hiddenObjs, {
    display: "block"
  })

  ScrollTrigger.create({
    trigger: ".home",
    start: "clamp(top top)",
    end: "clamp(+=1000)",
    pin: true,
    animation: launchTheRocket,
    // markers: {
    //   startColor: "white",
    //   endColor: "white",
    //   fontSize: "18px",
    //   indent: 10
    // },
    scrub: 1
  })
  ScrollTrigger.sort();
  ScrollTrigger.refresh();
}

This is more about the setup you have rather than a GSAP specific problem TBH. The only advice I can give you is to create the rocket ScrollTrigger instance before the texts ScrollTrigger instances and not wait until a specific timeline is completed to do that, it's just odd IMHO.

 

Hopefully this helps.

Happy Tweening!

[Danclp]

Thanks, Rodrigo, for your kind opinion.