Scrolltrigger Events Fire Onload

[zimutes]

Hello,

I'm trying to get to know gsap and scrolltrigger, and I have this codepen I'm working on.
My question is: given that I set a start for the animation, shouldn't the onEnter event be triggered only when the section in cause comes into the viewport? It fires onload.


Thanks for your help,
Joaquim Azevedo 

See the Pen zYWPQgb by Zimutes (@Zimutes) on CodePen

[GreenSock]

That's because you nested the onEnter incorrectly - it should be in the ScrollTrigger object but you put it in the actual tween (as if you're trying to literally animate an "onEnter" property of the target): 

// BAD
gsap.to(..., {
  scrollTrigger: {
    ...
  },
  onEnter: init // <-- OOPS!
});

// GOOD
gsap.to(..., {
  scrollTrigger: {
    onEnter: init,
    ...
  },
});

 

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

 

It's also slightly odd that you're creating a tween that doesn't tween any properties. If you're only doing that because you think you need a tween in order to have a ScrollTrigger, that's not true - you can simply create a Standalone ScrollTrigger:

ScrollTrigger.create({
  trigger: '.sections-holder',
  pin: true,
  end: "+=3000",
  onEnter: init,
});

Good luck with your learning adventure! And thanks for providing a minimal demo. 👍

[zimutes]

Thanks a lot!

By the way, I'd like to hear your thoughts about what I'm doing. 
Consider the following version:

See the Pen NWYXYqa by Zimutes (@Zimutes) on CodePen

I need the "slides" section to change onscroll, being that those sections are absolute positioned. I obviously still have to work that out, since it's not working properly.
But more importantly, inside each section I need to have images rendered into a canvas, so that it creates an animation. "Slide 2" must come into viewport only after all the images of "Slide 1" are shown, the scroll animation reached the end. 

I'm not really sure If I whould try this using timeline, or containerAnimation, or the best way to go with this. How to make the slide change trigger only after all the images  of the previous section were shown? 

Thanks fro your help.
 

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "here is my list of requirements....please show me how to build it accordingly" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

 

It sounds like you just need to set up your ScrollTriggers to fire one-after-the-other, so set your start/end values accordingly. But I may be misunderstanding your goal.

[zimutes]

Thanks for your reply!
And sorry, didn't mean to go too far