Scroll Trigger all occurences of onEnter fires at once

[OniricSunset]

Hello,
I have pretty simple markup - couple full height sections witch Scroll Trigger attached to each one that fires timeline animation.
When I start browsing page from top of the site (first section) everything works good but when I open url such as mysite.com/#section6 I can see that all events from onEnter method fires at once. Is there any workaround to avoid that behaviour? 

For example I have animation that I keep paused on init and want it to be played during scroll to section 2 but when start viewing site from position of section 6 this animation (section 2) is being played.

See the Pen vYmvLmY?editors=1111 by spacemind (@spacemind) on CodePen

[OSUblake]

Hi Oniric!

 

You could make a flag to check if it's the first run. This seems to work.

 

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

 

[OniricSunset]

Hi, thank you for your reply.  With that solution when I scroll from the first section indeed it is being blocked from playing but that is not my intention.
I've corrected my codepen to visualise problem.

See the Pen vYmvLmY by spacemind (@spacemind) on CodePen

When I open page at section #s4 and scroll top to section #s2 I can see that animation has been already played instead only when I reach to that section so it fills my viewpoint.

It is hard to explain on codepen but here is visual explanation:
I'm starting on load of page here:


Scrolling top to section S2

[OSUblake]

There are other callbacks you can use to control the behavior, like onEnterBack, onLeave, onLeaveBack, onToggle, etc. This would reset the animation when go scrolling up.

onEnterBack() {
  productsShow.restart();
}

 

[OniricSunset]

I know but first of all I don't want it to be played on initial load - that is my problem. Animation productsShow from section 2 fires when I open page on for example last section #s4 while linking from subpage to that section. 

 

EDIT: I think I'll end up with using onUpdate >0 However I think it is not the best solution

[GreenSock]

I may not be understanding you correctly, but maybe you could just check to see if the gsap.ticker.frame is less than 60 (or whatever). The goal is to just sense if this is an immediate page navigation on load. Here's a fork that uses a gsap.set() scrollTo to simulate the jump: 

See the Pen MWmZvor?editors=0010 by GreenSock (@GreenSock) on CodePen

 

A few other tips:

1. If you're not actually doing any animation that's attached to a ScrollTrigger, there's no point in creating a timeline:

   // unnecessary
   let section1Timeline = gsap.timeline({
         scrollTrigger: {
             trigger: "#s1",
             scrub: 1,
             markers: true,
             toggleActions: "play none none reverse",
             onEnter: () => {
                 console.log('s1');
             },
         }
     });
   
   // shorter:
   ScrollTrigger.create({
     trigger: "#s1",
     markers: true,
     toggleActions: "play none none reverse",
     onEnter: () => {
       console.log('s1');
     }
   });

    

2. You can't have scrub AND toggleActions - those are mutually exclusive. And both are totally useless if you don't have an animation attached to the ScrollTrigger.