Jump to content
GreenSock

Seb1337

GSAP ScrollTrigger SVG Animation

Recommended Posts

Hey Everyone,

i'am trying to Animate a Group inside of an SVG based on if the Path is scrolled past the Point.
Currently the Point is getting visible once the Page loads. But it should only appear or disappear if the line has moved past that Point.
I've tried to put it into the Timeline but it didn't seem to work. It should be linked to the ScrollTrigger as the Path animation.

Thanks in advance for the help! 

See the Pen RwQmwOY by Seb7331 (@Seb7331) on CodePen

Link to comment
Share on other sites

I noticed a few problems:

  1. You weren't putting the tween into the timeline at the appropriate spot. It was just firing immediately.
  2. You were tweening the "fill-opacity" which is an attribute instead of simply "opacity" which is a CSS property. 
  3. You weren't starting out with the opacity (or fill-opacity) as 0. The default is 1 so if you animate to 1, it won't really do anything.

I assume you wanted something like this?:

See the Pen KKQLaWY?editors=0010 by GreenSock (@GreenSock) on CodePen

 

And here's a version with quite a bit less code using DrawSVGPlugin (members-only plugin): 

See the Pen VwQOPWz?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I hope that helps.

  • Like 1
Link to comment
Share on other sites

22 hours ago, GreenSock said:

I noticed a few problems:

  1. You weren't putting the tween into the timeline at the appropriate spot. It was just firing immediately.
  2. You were tweening the "fill-opacity" which is an attribute instead of simply "opacity" which is a CSS property. 
  3. You weren't starting out with the opacity (or fill-opacity) as 0. The default is 1 so if you animate to 1, it won't really do anything.

I assume you wanted something like this?:

 

 

 

And here's a version with quite a bit less code using DrawSVGPlugin (members-only plugin): 

 

 

 

I hope that helps.

Searched for a Solution for that aswell. 
Is it possible in anyway to attach some HTML Elements like text or images to the SVG Point ?
So its displayed underneath it.
Sorry if thats off topic maybe. 

Link to comment
Share on other sites

Yeah, that's not related to GSAP in any way so it's not really something we address in these forums. But sure, it's possible. The biggest challenge is mapping coordinate systems because inside the SVG, the coordinates are totally different than the HTML document outside. SVGs can be scaled in various ways and of course the internal coordinate system would get scaled along with it. 

 

You might want to look into the MotionPathPlugin.convertCoordinates():

https://greensock.com/docs/v3/Plugins/MotionPathPlugin/static.convertCoordinates()

 

Or getRelativePosition():

https://greensock.com/docs/v3/Plugins/MotionPathPlugin/static.getRelativePosition()

 

Or in this case it may be just as simple to leverage element.getBoundingClientRect() to do the conversion yourself. The goal is to figure out what x/y you must set the HTML element to in order to be right under (or near) the SVG element. 

 

Good luck!

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