Jump to content
Search Community

Seeking advice on Vue.js components inside SVG animations

thedamon test
Moderator Tag

Recommended Posts

I'm brand new to GSAP and starting work on a rather complex page that has animation elements shared between a number of 'scenes'... 

I'm using Vue.js for the page in general and I have a pretty good familiarity with it.

 

What I'm not quite sure about is how component boundaries would affect GSAP running its animations; and if it's likely to cause more problems than its worth and I should just keep each overall animation within one file and treat it as a contained system.

 

My temptation in my capacity as a front-end UI developer is to divide components of the SVG into parts that will generally be treated together: character, sky, setting, thundercloud, etc and make each one a separate Vue component (that way I can define behaviours for each of them and use them within different contexts (ie use the same weather effects in a different scene).

 

Before I get too deep into it though I want to appeal to those who may have worked in this way before (and probably React would behave much the same way given their similarity so experience there may be valuable), as I'm not sure if that will have unintended consequences on how I would write GSAP code, or how well it would work (given that Vue.js is driven by the virtual dom etc).

Link to comment
Share on other sites

I'm not the right guy to answer anything about how to structure things with Vue or React since those aren't in my wheelhouse, but as far as GSAP is concerned, it's very flexible and it doesn't require that you structure your DOM/Vue/components a particular way. Think of it as a high-speed property manipulator, that's it. You can literally have GSAP animate any property of any object. As long as that object exists and has the properties you want to tween, it'll do it. 

 

If you have any GSAP-specific questions, I'd be happy to help. Perhaps someone else will chime in with any advice as it pertains to structuring your stuff in Vue. 

 

Happy tweening!

  • Like 1
Link to comment
Share on other sites

+1 Sarah Drasner @sdrasner has done a lot of work with Vue + SVG + GSAP. She graced the forum with her presence in the below singular post which may give a little insight into the topic matter (you will quickly see its worth searching for things she has written, as she is so talented).

 

https://greensock.com/forums/topic/18486-tweening-via-vuejs-reactive-data-properties-gsap-becomes-limited-in-power-due-to-not-full-access-to-dom/?do=findComment&comment=85599

 

As mentioned by Zach she has a lot of related subject matter online concerning the topic, its easy to search and find.

  • Like 2
Link to comment
Share on other sites

+1 from me, too! Haha I took her frontendmasters course and have followed her on Twitter for a while.. she mentioned that she doesn't usually divide things up into components, which makes sense in most of her (and most people's) work since components are mostly for encapsulation in order to reuse... but since I'm working with an illustrator who isn't myself and am reusing elements between animations, I'm thinking my use case for dividing things up may be more than normal (she also primarily works inside codepen which doesn't lend itself to splitting out files 🤔) BUT svgs are kinda just themselves and given the sharing of xy coordinates i think separating that out could lead to confusion bc I always need to be grounded inside the overall viewbox (although if everyone's staying in the same layering position i guess they don't need to be part of the same svg...).

 

I think I'm just gonna have to find out by trying!

  • Like 2
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.
×
×
  • Create New...