Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
theolavaux

Animation starts before scrolling with ScrollTrigger plugin

Recommended Posts

Hello everyone,

 

I have this sample code using ScrollTrigger. What I would like to achieve is starting my animation when the top of the trigger hits 20% from the top of the viewport.

However, my animation starts as soon as the page loads (start and scroller-start markers haven't aligned yet).

What am I doing wrong ?

 

Thanks for help!

 

 

gsap
      .timeline({
        scrollTrigger: {
          trigger: '#Shape_1',
          markers: true,
          start: 'top 20%',
        },
        defaults: { duration: 3, ease: 'none' },
      })
      .to('#Shape_1', {
        morphSVG:
          'M444.239,541.067s40.3-121.4,159.974-144.755,269.965,102.054,325.809,96.962,85.237-35.216,107.394-63.625,15.222-63.424,60.1-144.222,91.31-203.185,247.544-270.913,377.391,0,377.391,0V1254.384s-111.423-231.317-274.635-212.318c-74.424,8.664-104.837-29.984-205,73.551s-81.466,156.257-220.354,255.989-198.62,52.431-335.2,142.94-243.031,238.335-243.031,238.335Z',
      })
      .to(
        '#Shape_2',
        {
          morphSVG:
            'M444.234,704.163S419.016,563.285,558.471,496.681s325.094-.4,349.826,0,72.922,3.938,117.53-48.514,98.559-121.687,98.559-121.687,153.234-173.038,309.25-201.607S1720.671,242.7,1720.671,242.7v854.01s-184.166-170.116-318.256-116.038-159.652,130.356-224.977,232.915-151.279,238.187-292.623,198.784C536.281,1306,444.234,1654.321,444.234,1654.321Z',
        },
        0
      )

 

Link to post
Share on other sites

It's pretty tough to diagnose without seeing it in context - would you mind providing a CodePen or something? I wonder if maybe you're not loading ScrollTrigger or forgot to activate it or something. Are you getting any errors in the console? 

https://greensock.com/demo

  • Like 1
Link to post
Share on other sites

Hey @theolavaux

 

I think this is related to your initial setup.

 

When the ScrollTrigger setup is being executed, the path you are targetting as the 'trigger' is not yet in the position that you initially tween it to, so the trigger is way more up the page, than you suppose.

 

You can work around this by either wrapping your ScrollTrigger-Setup in a delayedCall or even better in an onComplete-function of that initial tween you have there. Or another way - and probably the easiest - would be to simply just use the container-element of those SVGs as the trigger.

 

See the Pen GRqwJXe by akapowl (@akapowl) on CodePen

 

 

But how you do it really depends on where exactly you want to go with this.

 

 

Hope this helps though.

Cheers,

Paul

 

  • Like 3
  • Thanks 1
Link to post
Share on other sites

Thanks! With the onComplete function, it seems that I got it to work!

Link to post
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.

×