Animate SVG polygon linear gradient on scroll

[sbraach]

Hi there, I'm relatively new to GSAP and the animation that I want is working, but it is running before the elements are in the viewport. I want to use GSAP ScrollTrigger but can't seem to get it to work. Not sure if I'm going about this the right way!

See the Pen poKZEWN by sbraach (@sbraach) on CodePen

[mvaneijgen]

Hi @sbraach welcome to the forum! 

 

You have animations build in to your SVG element. (I've never seen that before, I would love to know how you came about and build this)

 

These are not animations that GSAP/ScrollTrigger can control. With GSAP you build out animations and you then hook ScrollTrigger to that, but because your animations are build in to the elements with manual inserted times and durations they will just run on page load. 

 

If you want to use ScrollTrigger I recommend at least building one GSAP animation with a timeline, before you dive in to ScrollTrigger, otherwise it is kinda wanting to learn to run before you can walk. Check out the docs, the videos on there are great https://greensock.com/docs/v3/GSAP

 

I've copied your pen and loaded GSAP and ScrollTrigger (in the javascript settings panel) and updated your GSAP tween animation with a ScrollTrigger in it. As you can see the markers get loaded now. I've added a .trigger element around your #phases element, because it is not recommended to animated the element you want to function as your scroll trigger and have add a scale animation to show you how that works.

 

So now if you scroll you can see your element scaling up when you scroll. 

 

See the Pen ExRpNeB?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Rodrigo]

Hi @sbraach and welcome to the GreenSock forums!

 

The issue here is that you are using SVG animate which takes care of the animation. I think you might want to use a mask for all the elements and just animate that using ScrollTrigger, seems simpler IMHO:

See the Pen BaVPpaY by GreenSock (@GreenSock) on CodePen

 

Although take this with a grain of salt since SVG is not something I excel at, so there could be a better way to do this that I don't know of.

 

Let us know if you have more questions.

 

Happy Tweening!

[mvaneijgen]

I wanted to chime in again. I've removed all your animations from the SVG and wrote the animation with GSAP using a CSS clip-path. I've also sprinkled in some random other animations to show the the power of GSAP. If you check the code you can see I don't have to create any timings every animation is just played after the previous ones, that is the power of GSAP that you can just write your animations and don't worry about timing everything or update your timings when the frist one chances. 

 

Hope it helps and happy tweening! 

 

See the Pen LYrBxGR?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[sbraach]

Thank you for all of your help! This gave me exactly what I needed. I was looking for examples of what I was trying to achieve and the example I used had the animations built into the SVG element. I understand now why that doesn't work with GSAP and I appreciate you showing me the right way to accomplish it. Thanks!