kith+kin

Thanks @ZachSaucier. At least it sounds like I'm thinking about it the right way round. This was my concern also. If I create separate timelines the elements would get out of sync with each other when allowing the user to jump about / between them. I think in this instance it would be better to animate it all out in one long timeline from start to finish, then figure out if it's possible to loop the animation at the required points, but allow the user to jump past those set loop on command. Is it easy enough to loop certain segments of an animation but allow the user to jump past the loop?

Hey everyone, I've not had to give too much thought in the past to how I structure timelines, but I think it's going to be important on an upcoming project so would like some advice on how to tackle it. The animation is broken in to three steps, it should play but loop at the end of each step (almost in a passive state) until the user chooses to proceed to the next step. The user can also choose to play one of the three steps of the animation via navigation / buttons. All elements of the animation exist within a single provided SVG. Each scene will need to do different things to those same elements. So for example in step one I'll fade a key element in, in step two that same element might move off to the side. What would be the best way to tackle this? I've had two thoughts on how to approach it. Single Timeline Create a single (huge) timeline. Then add timeline labels at strategic points which should allow me to control which portion of the animation to play. Then figure out how to loop the last portion of each section until there is a user interaction such as clicking a 'next' button, or allowing them to choose a different step like above. Multiple Timelines Create a single global timeline. Then add separate timelines for each 'scene'. This should allow me the same control as above but keep the file cleaner as I can break the animation in to smaller chunks. Which of these is the better pattern to take, or is it worth doing it completely differently? Does anyone have examples of something similar? I've been looking around and found some examples but nothing seems to be quite like the above. Any help would be appreciated! Thanks Sam

It's weird - I don't have an example to hand, but I basically dropped in some (non-plugin based) GSAP2 code I had previously used in to a new Nuxt project the other day, which worked great on local but after being compiled through the 'generate' command just wouldn't work, that was both transpiling and not. I changed the code to the new syntax, and it started working. I probably should have done the same thing here rather than just assuming. Is it a better idea to use gsap/all? Is it more useful because everything can be imported from it? are there other benefits? Thank you for your help again.

Ahah! That's great thanks Blake. So I'm positive I did it the same as what you did (via the transpile method), although I think what might have been breaking it is I used code from GSAP 2, which as you've pointed out wasn't right. I've just ported this over to my in-development site and it's worked. Really appreciate the assistance.

https://codesandbox.io/s/gsap3-nuxt-premium-plugins-ju3go Here's a link. I've tried a number of different strategies, so you might find it's a bit of a weird mix... Any help would be appreciated! Thanks, Sam

Hi @OSUblake and @mango-nyc, I've been going in circles, I hope you can help. I'm also trying to get the plugins working inside Nuxt. GSAP3 itself runs just fine as a normal import, however when trying to get the premium plugins working I'm getting stuck. I've added gsap to Nuxt via Yarn (./gsap-bonus.tgz), and imported gsap and MorphSVG from the folder. If I try import from the non-dist folder (with build / transpile setting as above in the nuxt config ), I get an error : _toArray is not a function If I import from the dist folder (UMD?), as above, I get a window error. I've encountered this before and understand it's because the SSR side doesn't have a window. If I then wrap the imports in the (process.client) check (to force client side), and convert them to requires instead, I still get a window error. Cannot assign to read only property 'window' of object I've created a CodeSandbox with the zip inside to demonstrate, I will happily paste the link if that's okay. It'd be great to get a definitive boilerplate setup for these issues. I feel like I've tried all the advice I've seen, but am still getting stuck. Thanks for the support.