Gsap.from with scrolltrigger

[IndM]

When using a slide-in-down animation, the scrolltriggers are placed in the wrong position.
This leads to incorrect start from other animations under it.

I'm using a double scrolltrigger because I wanted to emulate a mirror effect. So when scrolling back up the animation will start again from the original state.

Am I using an incorrect way of scrolltrigger in combination with gsap.from or did I make a stupid mistake?
I've tried using scrolltrigger.refresh inside the onEnter but it still seems hacky and still not always correct after it.

See the Pen qByoXXR by indy-meermans (@indy-meermans) on CodePen

[Carl]

welcome to the GreenSock forums,

Thanks for the demo. Unfortunately, the code is a bit much to untangle quickly and I'm not really sure what effect you are going for.

However, my advice would be to make sure your trigger is not the same thing that you are animating. 

If you animate the trigger it can mess up all the measurements ScrollTrigger needs to make.

 

try something like this

 

<div class="triggerElement">
  <div class="targetOfAnimation"></div>
</div>

 

If that doesn't help please consider simplifying the demo by removing mapper objects, parsing functions and passing data around through functions like

 

scrollListner(element, anim1, animateOnce, mirror);

 

I understand it is probably an elegant and effective way for you to code but it causes first-time viewers additional effort to decipher. thanks!

 

 

 

[IndM]

Hi @Carl! The fix was indeed needed to put a wrapper around the element I wanted to animate.