Hey everyone, I’m looking to transition some of our simpler banner production from more experienced developers to our designers this year. The biggest hurdle I’m trying to overcome is getting around the extra size of including a js library. Our developers use externally hosted GSAP which doesn’t count against the size.
I’ve seen a few articles and post around including and linking externally to GSAP but it still involves writing JS. Hype would allow the designers to use a timeline based animation tool without having to learn to write HTML. Is it possible for Hype to leverage GSAP via the timeline?
you can execute a javascript via timeline. so you can trigger everything …
a couple of topics already exist. keywords for a forumsearch: TweenMax, GSAP
I know, sorry if I wasn’t clear. If you use the timeline it seems like a lot of unique js is written and I was wondering if you could use the timeline and have Hype use GSAP as the engine for tweens.
Hype is not an interface for GSAP since Hype has its own animation engine and writes out its own code for easing, animation, etc.
That being said, you could easily run JS functions (tweenmax, for example) as a part of the Hype timeline as a ‘timeline action’ but you would be unnecessarily using 2 animation engines at once.
It sounds like you are using a CDN with your GSAP animations to reduce the deliverable size. This can also be done with Hype’s libraries!
File > Advanced Export has an external runtime URL that can be set to a CDN:
https://cdn.jsdelivr.net/gh/tumult/hype-runtime
When you add this, you’ll see the “All Files” size dramatically reduced. This Also I’ll note the upcoming Hype 4 makes this a bit easier, as the URL is baked in.
Hype requires its own libraries as the editing environment is tightly coupled to the output, which lets Tumult build and deliver features that best address the needs and wants of Hype’s users.
Hype requires its own libraries as the editing environment is tightly coupled to the output, which lets Tumult build and deliver features that best address the needs and wants of Hype’s users.
Yeah I think what I was hoping to do is have Hype use GSAP as it's engine vs it's own to cheat the size requirements. I was trying to have my cake and eat it too. Thanks everyone.
Specifically in this thread I am saying that the same file size advantage of using a CDN for GSAP applies to using a CDN for Hype's runtime.
"activate animation with code" is a bit ambiguous on what you are trying to do as there are many ways to animate with code. Hype provides an API that allows manipulating timelines, and also has a setElementProperty API that can allow for transitions. You can always do CSS transitions or animations, or use the web animation API. If you want to use GSAP animations, then you must include GSAP. Of course, if you're doing all your animations in code, it does defeat a major reason for using Hype .
It depends on your code, but generally the way Hype captures animations into video isn't going to be easy to use code, as the "clock" for capturing frames is different than the real world clock. This is not related to using a CDN or not.
A CDN is simply an alternate URL to deliver the Hype runtime, and has no bearing on the smoothness of animations. For most cases, animating with Hype should result in animations that are 60fps, which is the general limit for web animations anyways. You're welcome to always send examples of poorly performing animations and we may be able to provide advice.
.