Jump to content
Search Community

Animate SVG path - fix/pin to top

Ritch.b test
Moderator Tag

Go to solution Solved by Ritch.b,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey,

 

I have a timeline, on the end of which I want to move a SVG path "#combine" to;

 

  1. Move to a specific point on the page. Or preferably ---
  2. Pin to the top of the viewport.

I've tried using:

.to("#combine", 2, {top:"910px", ease:Power2.easeInOut});

and aslo ScrollMagic's setPin

.setPin('#combine')

Any ideas where I am going wrong?

 

Thanks

See the Pen rLyajL by Ritch (@Ritch) on CodePen

Link to comment
Share on other sites

Hello Ritch.b, and Welcome to the GreenSock Forum!

 

I am not near my computer but..

 

You might want to look into the GSAP ScrollToPlugin.

 

See the Pen AsLfc by jonathan (@jonathan) on CodePen

 

Just make sure that when you animate to #combine, that you either use ScrollMagic or animate it with a GSAP to() tween. This way you dont call both on the same element, use either or!

 

The GSAP ScrollToPlugin would do it like this:

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/ScrollToPlugin/

.to("#combine", 2, {scrollTo:{top:910}, ease:Power2.easeInOut});

// even better would be to animate using 'y' instead of 'top' for sub-pixel rendering

.to("#combine", 2, {scrollTo:{y:910}, ease:Power2.easeInOut});

Even better would be to animate using y instead of top for sub-pixel rendering using hardware acceleration.

:)

  • Like 3
Link to comment
Share on other sites

Thanks for the y tip Jonathan. Unfortunatley the suggested method hasn't had any effect on moving the SVG to where I need it to go.

 

The ribbon shape transforms into a background for a menu, which I then need to be able to pin to the top of the viewport, so it becomes fixed, behind the navigation/logos etc... 

 

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