ScrollTrigger: Trigger Start/End Markers Incorrect Position

Renson Ralph Bitara · April 21

Hey GSAP Team,

I have a concern regarding my implementation of "scrollTrigger". The Start/End marker of the triggers isn't aligning correctly with the top and bottom of the triggers.

Please focus on the ".services-content-heading-inner" element, as this is what I'm currently experimenting with.

My ultimate goal here is to animate this element once it enters the viewport. However, it immediately animates because of how the elements' start/end is positioned.

I tried changing the position to start: "center top", end: "center bottom". However, the position is still off and not really at the center of the trigger element.

I attempted to change the trigger to the parent element, but the story remains the same.

I really want to use scrollTrigger because it seems to be simpler compared to https://gsap.com/docs/v3/Plugins/Observer/.

I also tried using https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.isInViewport()/ by wrapping the animation in an if-else condition "ScrollTrigger.isInViewport(element)". However, it doesn't fire the logic inside the condition even if the condition was met.

I would appreciate your thoughts and expert advice on where I went wrong or missed. Thank you very much for any assistance.

See the Pen dyLQBPa by Akorn-Team (@Akorn-Team) on CodePen

Edited April 22 by Renson Ralph Bitara
Add spacing between greetings and 1st sentence

Rodrigo · April 21

Hi @Renson Ralph Bitara and welcome to the GSAP Forums!

There is a lot of code in your demo and we don't have the time resources to comb through all that and find what the issues could be.

After a quick glance I can see some issues in your code though.

What is this actually doing? What's the purpose of this?

window.addEventListener(
  "load",
  function (e) {
    init();
    setInterval(function () {
      ScrollTrigger.refresh();
    }, 100);
  },
  false
);

A setInterval will keep executing over and over. That doesn't look right to me, to be refreshing every ScrollTrigger instance every 100 milliseconds. I don't see the use of that particular code.

Then you have this:

gsap.fromTo(
  ".services-content-heading-inner",
  {
    yPercent: 100
  },
  {
    yPercent: 0,
    autoAlpha: 1,
    duration: 2,
    ease: easeInOut
  }
);

ScrollTrigger.create({
  target: ".services-content-heading-inner",
  start: "top top",
  end: "bottom bottom",
  markers: true
});

You are creating an animation, then you create a ScrollTrigger instance, but what's the objective of that ScrollTrigger? What is actually controlling? For what I can see nothing really.

Finally this:

ScrollTrigger.create({
  start: 0,
  end: "max",
  onUpdate: updateValues
});

By default this ScrollTrigger instance will work with the window element and scroll position, so that means everytime the user scrolls that function will be called. Again I don't see the use of this. If you want to know if something is in the viewport, why not create a ScrollTrigger instance for that specific element that can tell you whether or not that element is in the viewport?

I think you are overcomplicating things quite a bit and you should take a few steps back and go for simpler things first and then start adding more animations and complex stuff to your app.

Finally I suggest you to take a look at our getting started guide:

https://gsap.com/resources/get-started

and a closer look to the ScrollTrigger docs and demos in order to get a better grasp of how ScrollTrigger works:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/

Happy Tweening!

Renson Ralph Bitara · April 22

Hi Rodrigo,

Re-Iteration: Main problem is the incorrect position of the triggers' top and bottom markers. It should be aligned with the triggers' top and bottom edge instead of the documents/<body></body> top and bottom edge.

Answers

window.addEventListener(
  "load",
  function (e) {
    init();
    setInterval(function () {
      ScrollTrigger.refresh();
    }, 100);
  },
  false
);

Purpose: To refresh scrollTrigger coordinates due to layout-shift caused by images, fonts, and etc. (Assuming that these things causes an issue).

Reference topic:

Note: This is just an experiment since I don't have a specific condition to refresh scrollTrigger. However, this seems not to be a problem caused by layout shift.

Update: Removed.

===

gsap.fromTo(
  ".services-content-heading-inner",
  {
    yPercent: 100
  },
  {
    yPercent: 0,
    autoAlpha: 1,
    duration: 2,
    ease: easeInOut
  }
);

Purpose: To simply animate the ".services-content-heading-inner" element.

===

ScrollTrigger.create({
    target: ".services-content-heading-inner",
    start: "top top",
    end: "bottom bottom",
    markers: true
});

Purpose: To animate the ".services-content-heading-inner" element once it is in viewport.

Note: ".services-content-heading-inner" scrollTrigger; I separated this from the animation itself to test if it will solve the triggers' start/end markers incorrect positioning. However, problem still insists which means it is not a issue with the animation.

Update: Merged to corresponding animation above.

===

ScrollTrigger.create({
    start: 0,
    end: "max",
    onUpdate: updateValues
});

Note: The idea is to identify the distance of ".services-content-heading-inner" top edge from the top of the viewport and if the ".services-content-heading-inner" is in viewport (true/false). Got it from this demo,

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

Update: Removed.

I apologize, for the confusing code. I have removed all the unnecessary lines and cleaned it up for you.

Let me know if you have further questions.

Edited April 22 by Renson Ralph Bitara
Add Image

Renson Ralph Bitara · April 22

Case solved

Cause: Incorrect syntax.

Change:

ScrollTrigger.create({
    target: ".services-content-heading-inner",
    start: "top top",
    end: "bottom bottom",
    markers: true
});

To:

gsap.fromTo('.services-content-heading-inner', 
            { 
  				yPercent: 100 
			}, 
            { 
  				yPercent: 0,
  				autoAlpha: 1,
  				duration: 2,
  				ease: easeInOut,
                scrollTrigger: {
                  trigger: '.services-content-heading-inner',
                  start: "top top",
                  end: "bottom bottom",
                  markers: true
                }
			} );

Thank you!

Rodrigo · April 22

Great to hear that you were able to fix it! 🥳

Happy Tweenig!

Notifications

Messages

ScrollTrigger: Trigger Start/End Markers Incorrect Position

Recommended Posts

Renson Ralph Bitara

Link to comment

Share on other sites

Rodrigo

Link to comment

Share on other sites

Renson Ralph Bitara

Link to comment

Share on other sites

Renson Ralph Bitara

Link to comment

Share on other sites

Rodrigo

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members