Jump to content
Search Community

Animation starts before scrolling with ScrollTrigger plugin

theolavaux test
Moderator Tag

Go to solution Solved by akapowl,

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 comment
Share on other sites

  • Solution

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 316f9b7b5e194532f72c74c3187c0f48 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 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...