GSAP ScrollTrigger SVG Animation

[Seb1337]

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

[GreenSock]

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.

[Subby]

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. 

[GreenSock]

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!