Jump to content
Search Community

Animations (with ScrollTrigger) auto-triggered when refresh to middle page

Black Ducas test
Moderator Tag

Recommended Posts

Hi

I've some simple animations on some texts that are triggered when the elements appear in the viewport.

 

  let texts = document.querySelectorAll(".section__head, .section__text");

  texts.forEach(text => {
    let parentSplit = new SplitText(text, { type: "words", wordsClass: "text-parent" });
    let childSplit = new SplitText(text, { type: "words", wordsClass: "text-child" });

    gsap.from(childSplit.words, {
      scrollTrigger: text,
      y: "100%",
      duration: 0.75,
      stagger: 0.05,
    });
  });

 

It works very well, but if I refresh the page in the middle of the page I noticed that the animations previous in the page are automatically triggered. The next animations instead are triggered normally when scrolling down they appear. Scrolling up I see the previous animations already finished. I need to avoid this.

Any ideas? Thanks

Link to comment
Share on other sites

Hey @Black Ducas,

 

This could be a 'job for toggleActions':

 

toggleActions String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

 

In the DOCs is an example too:

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

.

 

Happy toggling ...

Mikel

 

 

Link to comment
Share on other sites

Hi @ZachSaucier

added limitCallbacks

 

  ScrollTrigger.config({ limitCallbacks: true });

  let texts = document.querySelectorAll(".section__head, .section__text");

  texts.forEach(text => {
    let parentSplit = new SplitText(text, { type: "words", wordsClass: "text-parent" });
    let childSplit = new SplitText(text, { type: "words", wordsClass: "text-child" });

    gsap.from(childSplit.words, {
      scrollTrigger: text,
      y: "100%",
      duration: 0.75,
      stagger: 0.05,
    });
  });

but it's as before. Scrolling up the animations are already complete.

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.
×
×
  • Create New...