Google inspect animations

[RobbieC]

I did some searching online before deciding to post the question here (had no luck searching).

 

My question is; is there anyway to Google Inspect JS based animations?

 

I've used Google inspect animation before in the past for CSS animations but when I tried to use it last night it seems its doesn't record the animation. I'm guessing because its a JS based animation.

 

Can anyone shed some light on this?

 

I guess this would lead me into my next question, What do you guys use for debugging on your projects?

[GreenSock]

I assume you're talking about Chrome's Dev Tools, right? Yeah, that only works with CSS (and maybe WAAPI?) - I think it'd be impossible to do with JS-based animations since they're so much more flexible. 

 

What exactly do you want to accomplish in terms of "debugging"? You're a Shockingly Green member, so you already have access to GSDevTools which adds a scrubber to your animations, lets you speed up or slow down, isolate individual animations by ID, etc. Hopefully that'll give you what you need. 

 

Thanks for being a member!

[RobbieC]

Sorry I should of been more specific, yes Google Dev tools. 
 

I totally forgot about the GSDevtool, that looks awesome I’ll try it out tomorrow.

 

I do have some of my GSAP animations triggered with ScrollMagic, will I still be able to use GSDevTools correctly?

 

 

[GreenSock]

ScrollMagic isn't a GreenSock product, so I can't say for sure but I can't think of any reason why it wouldn't work. 

 

Insider tip: we're working on a new tool for scroll-based animations (like ScrollMagic...but hopefully even better)   The goal is to launch within the next month. 

[RobbieC]

7 hours ago, GreenSock said:

 The goal is to launch within the next month. 

That’s the best news ever!! I’m so excited, someone else had mentioned something was in the works on a different post I posted last week. I love your guys work, so I have no doubt it’s going to be an amazing tool!

 

As soon as you guys release it I’m going to rewrite my entire personal project! 

[PointC]

On 5/9/2020 at 6:44 PM, RobbieC said:

What do you guys use for debugging on your projects?

What is this debugging of which you speak? All my code works perfectly right out of the gate. 

 

Yeah, DevTools is great for scrubbing and fine tuning all those little details that happen too fast at regular speed.

[RobbieC]

2 hours ago, PointC said:

All my code works perfectly right out of the gate.

Your a lucky man! My code is 100% ALWAYS the issue!

 

I guess the reason I said Google Dev tools is because before I started using GSAP I would use Dev tools to see the "timeline" of the animations and be able to fine tune them and have a visual timeline of when they are playing, order, etc.

 

I'm actually reading the docs for GSDevTools right now, we will see what happens - It looks like a fun tool.

 

I put my project on the back burners right now since i'm going to do away with ScrollMagic once you guys release your new tool and re-code everything accordingly. Which will most likely cut my js file in half, I have this feeling that i'm not coding my timelines/scrollmagic correctly.