Jump to content
Search Community

Gsap.from with scrolltrigger

IndM test
Moderator Tag

Go to solution Solved by Carl,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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>


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!




  • Like 1
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...