Working smarter not harder with SVG's and scrolltrigger

[proof-of-sock]

I've been studying other people's codepens and found their code much simpler than my own. So I think I'm missing a step here...

 

take for example: https://greensock.com/forums/topic/24441-scrolltrigger-not-working-with-svgs/

 

The js code is very simple and just scrubs through animation of a phone case unfolding. 

 

How exactly is that svg made? It looks like it contains the transform and translate inside the <svg>. 

 

The description for the animation seems "baked in" to the svg file, and all that's happening is the animation is being scrubbed through. 

 

But I'm been struggling to find any definitive answers, ie how to properly, or optimally prepare an SVG to export for use with scrolltrigger and co. 

 

Overall I'm trying to make a tunnel effect using basic shapes: https://codepen.io/mldyu/pen/wvdMoKN

 

I did consider using masks, but I just want to understand how to optimally create/prepare svg animations for use with scroll trigger. Am I missing an obvious tutorial that covers this? 

 

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

[Cassie]

Heya pal.

So that SVG was almost 100% certainly made using a graphics editor of some sort. Probably Illustrator or Affinity designer.

The main steps to go from 0 to a scroll triggered SVG animation would be...

- Create an SVG in a graphics editor

- Export and tidy up that code
- Copy the code into codepen or your project folder
- Create an animation timeline with GSAP

- Hook that timeline up to scrollTrigger.

Let me know which of those steps you need more info on and I can direct you to the right places. ☺️

 

[proof-of-sock]

17 minutes ago, Cassie said:

Heya pal.

So that SVG was almost 100% certainly made using a graphics editor of some sort. Probably Illustrator or Affinity designer.

The main steps to go from 0 to a scroll triggered SVG animation would be...

- Create an SVG in a graphics editor

- Export and tidy up that code
- Copy the code into codepen or your project folder
- Create an animation timeline with GSAP

- Hook that timeline up to scrollTrigger.

Let me know which of those steps you need more info on and I can direct you to the right places. ☺️

 

 

Thank you so much for the quick reply, and confirming what I had thought.

 

I've been using inkscape for years for laser cutting, and last month been playing with Illustrator, but I didn't realise you could create animations inside .ai. I will have to look into it, what you describe is workflow I had been using/learning.

 

I had imagined a workflow with .ai and xd as I saw the greensock stuff works inside there, so that might be a better place to plan out complex interactions. 

 

To be fair I just want something pretty simple, so I just started playing around with pure css to make the shapes instead:

See the Pen yLbeVxa by mldyu (@mldyu) on CodePen

 

 

Just a bit stuck at where i was before, trying to scale up an object. The idea is to make a tunnel effect using triangles. So progressively scaling or moving a card in the z direction. I think I'm a potatoes throw away!

 

 

 

 

 

[Cassie]

Oh no - I wasn't saying you could create the animations in illustrator.

You just create the vector shapes in a graphics editor. Then you export those shapes as SVG markup and then animate with GreenSock.

You have mixed up syntax in your demo, some old TweenMax and some new  GSAP3. You also haven't linked scrollTrigger up to anything.

Let's step back - Here's a simple animation of an SVG shape using new GSAP3 syntax - this was handcoded as it's just a simple triangle but you could also draw it in illustrator (or inkscape) and then export it.

See the Pen 5cf8206ca99ba6310d2650cfc4b5df2f by cassie-codes (@cassie-codes) on CodePen

[proof-of-sock]

20 minutes ago, Cassie said:

Oh no - I wasn't saying you could create the animations in illustrator.

You just create the vector shapes in a graphics editor. Then you export those shapes as SVG markup and then animate with GreenSock.

You have mixed up syntax in your demo, some old TweenMax and some new  GSAP3. You also haven't linked scrollTrigger up to anything.

Let's step back - Here's a simple animation of an SVG shape using new GSAP3 syntax - this was handcoded as it's just a simple triangle but you could also draw it in illustrator (or inkscape) and then export it.
 

 

 

 

You legend. thanks for the replies.

 

"Then you export those shapes as SVG markup and then animate with GreenSock."

 

I have been doing that, but just unsure of the correct way of exporting from .AI illustrator. Is it inline style, or internal CSS is should use?

 

Thank you so much, I think I'm really close with it now, and getting a better grasp on scroll trigger. But still circling around the same problem, pinning something dead center, and progressively expanding scale based on scroll position. Just feels like i'm still going down a page: 

 

See the Pen vYmLxGy by mldyu (@mldyu) on CodePen

[Cassie]

54 minutes ago, proof-of-sock said:

I have been doing that, but just unsure of the correct way of exporting from .AI illustrator. Is it inline style, or internal CSS is should use?

Neither - I would say go with presentation attributes as they're lower specificity and easier to override.

I usually go with file > export > export for screens

Then choose the artboard I want to export and click on the little cog to change settings. These are mine. Object ID's Layer names is important to have ID's to hook into!

[Cassie]

In terms of centering and pinning something - phew, there's a lot of ways!

Heres an example

See the Pen 9504169aaeded21a2f4505ab01cdc2ef by cassie-codes (@cassie-codes) on CodePen

[Cassie]

I think your demo's broken because the dots aren't within the pinned container. Check your closing tags. ☺️

[proof-of-sock]

2 hours ago, Cassie said:

I think your demo's broken because the dots aren't within the pinned container. Check your closing tags. ☺️

I will do, I just started again from your code as a clean slate...

 

See the Pen LYyGjLN by mldyu (@mldyu) on CodePen

 

When you say check the closing tags, do you just mean the "pin: " is not set to anything? It's just set to true, having played around with yours I see it's got pin: '#svg', could that equally be the container like pin: '#section.small' and just trigger start/end based on entering into that specific container. 

 

I've definitely said this before, but I think I've nearly got it! The confusion part is started to ebb away thanks to your help!

 

I'm gonna re-read the documentation and see if I can find a decent video on using greensock/scrolltrigger, see if I can glean any insight there!

 

The whole exporting from ai properly is dream now thank you so much, I'm so excited to create some really weird websites!

 

[Cassie]

By 'closing tags' I meant the closing </div> tag in your HTML wasn't where it should be.

The pinned element by default will be the element that you're animating (if it's a simple tween) But you can also pass in selector text. Although in your case it would just be .small or .large no # necessary as you don't have any ID's to target - only classes

And it's a pleasure. Super happy to help.