Animate Position + opacity in SVG using ScrollTrigger

[Milenoi]

Hi, 


i try to animate a svg when scrolling down. The svg contains 2 paths, both have a class. 
.detailed-pattern-01-rectangle-1

.detailed-pattern-01-rectangle-2


I want to change the opacity from 0 to 0.1 and move the path a few pixels. 



But it doesn't work with scrollTrigger, i have no idea what i am doing wrong.. 


It should work reverse, following scroll-direction. 


Maybe someone can help? 



Thanks a lot!






See the Pen bGWmwrL by milenoi-the-sans (@milenoi-the-sans) on CodePen

[akapowl]

Hello there, @Milenoi

 

When animating with GSAP it's usually best to also set your initial transforms with GSAP.

 

You've got a lot of transforms applied to the different elements of your SVG in your markup, and if I am not mistaken, espacially with SVG things can become sort of tricky in a case like that.

 

What I experienced, when I tried to move that one path to the left ( x: -100) and that other to the right ( x: 100), was that both actually moved to the left - which was not the case anymore, when I removed the transforms on those paths.

 

So best would probably be to set your transforms with GSAP from the start instead of having them inline in your markup.

 

But one way to workaround that here, if you can not get rid of those inline transforms, would be to wrap each of those paths you want to tween on in a group element and tween on that group instead then.

 

That seems to do the trick for me ( I set the start of the ST to 'top top' for better visibility)

If by move left/right you meant diagonally, you could add a transform on the y to the tweens (like in the commented out part in this pen)

 

See the Pen c2eb7bdb6931cf8a50586379cad4e392 by akapowl (@akapowl) on CodePen

 

 

Edit:

I am not the most versed with SVG, so I really hope I am not talking total nonsense here.

But I am sure somebody will jump in correcting me if that is the case.

 

[Milenoi]

Thank you so much!!

 

Now it becomes much more clearer to me!

 

To wrap all these paths in a group is an excellent way to deal with this issues. 

I will do that! Thank you..! 

 

 

I have another question: is it generally possible to avoid inline styles? (e.g. to avoid CSP problems) Would the GSAP CSS plugin help?

 

 

[OSUblake]

4 hours ago, Milenoi said:

is it generally possible to avoid inline styles? (e.g. to avoid CSP problems)

 

What is CSP?

 

And are you asking if there is way a to get GSAP to not add inline styles? That's what the CSSPlugin does, so you're already making use of it. There would be no way to animate elements without using inline styles because it has to override CSS styling.

 

[Milenoi]

See the Pen dyWgjWw by milenoi-the-sans (@milenoi-the-sans) on CodePen

 

Thank you! CSP is content security policy, but i just wanted to know if it is possible in general to avoid inline styling. it is totally okay for me to know that this is not possible. Further Questions: 

 

i  made a new pen. Some svg paths now transform and get opacty styling. works perfekt. 

The svg  gets its final positioned status when 50% of the parent container reaches 50% of the browser window (end: 50% 50%). 

I wonder if it possible to "revert" the timeline when i scroll  down then? scrolling further on should move the paths back to the left and right and opacity should fade to value 0... 

 

Why could i realize that? another scrolltrigger? Chaining animations? 

Edited August 6, 2021 by Milenoi

[OSUblake]

25 minutes ago, Milenoi said:

CSP is content security policy, but i just wanted to know if it is possible in general to avoid inline styling. it is totally okay for me to know that this is not possible.

 

Oh, I'm not familiar with how CSP works. Wouldn't it just block inline styles that are initially in the HTML on the page load? Or does it block GSAP from working?

 

40 minutes ago, Milenoi said:

I wonder if it possible to "revert" the timeline when i scroll  down then?

 

What do you mean revert? And toggleActions don't work with scrub.

[Milenoi]

3 minutes ago, OSUblake said:

 

Oh, I'm not familiar with how CSP works. Wouldn't it just block inline styles that are initially in the HTML on the page load? Or does it block GSAP from working?

 

I will try that and tell you!

 

3 minutes ago, OSUblake said:

 

 

What do you mean revert? And toggleActions don't work with scrub.

 

My svg reaches its final state when the parent container is in the middle of the browser. Then i scroll further down. 

I thougt it would be a nice effect if the animation of the svg now will start again. It should fade out an move back to the right and left

You can see it in my codepen. Nothing else happens when i  "leave" the section2 and it scrolls over the 50%... 

 

[OSUblake]

Maybe you can get the behavior you want by manually animating the progress of the timeline.

 

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

 

[Milenoi]

Wow @OSUblake THAT's really an impressing Solution, many thanks!! 

 

Meanwhile i checked out CSP Issues and youre right (again ;)- no problem. 

 

Thank you so much! (Read you at my next problems