Some Designer-Questions (no Developer)

1

I've been using Hype for some smaller animations for a while and now also have Motion.page for Wordpress. Both for me as a designer (not a developer) are very good and reasonably easy to use.
Now I would like to dive deeper into the subject of web animations.
Motion.page uses Greensock as javascript library - Hype uses its own - as far as I know. You can see a lot of great Greensock animations on the net, unfortunately little of hype. Many people around me say that I should do more with Greensock. Greensock animations would also be significantly more "lightweight".

But there is nothing like Hype for GS – that would mean that I would have to learn code, which I actually only want to do rudimentarily. So here my questions:

  • What are the big differences between these two? In which situations do I better use GS – and when do I go better with HYPE?
  • Are GSAP animations really significantly more small and faster to load than Hype?
  • Could/should I still run animations from both (Motion.page + Hype) on a WP page?

Sorry for my "newbie"-Questions – but I have to decide which way to go in future …

1 Like
2

The main difference between Hype and Greensock is that Hype is a visual tool and Greensock is a code-based tool. This means that with Hype, you can create animations without having to write any code, while with Greensock, you will need to write code to create your animations.

Greensock animations are generally more lightweight and faster to load than Hype animations, since Hype animations tend to be more complex and use more resources. However, this is not always the case, and it really depends on the specific animation.

You can run animations from both Hype and Greensock on a WordPress page, but it really depends on what you are trying to achieve. If you want to create more complex animations, Hype may be a better option, but if you want to create more lightweight animations, Greensock may be a better option.

Hype uses absolute positioning to create its animations, which means that the position of each element is determined when the animation is played. Greensock, on the other hand, uses any positioning, which means that the position of each element is determined based on its position in the code.

This can make a big difference in how the animation looks and feels. Absolute positioning on a "canvas" like area can create more complex animations, but it can also be more rigid when it comes to responsive design. Greensock is very versatile and can be used to create animations in conjunction with a wide variety of libraries, including Three.js and manipulate arbitrary values like attributes in SVG, and any other types of values. This makes it a great tool for creating broadly adaptable animations, but requires coding knowledge. It is certainly a good thing and even if it doesn't last forever, knowing how to use an animation library is good. The entire HTML5 stack is moving in that direction, offering more and more animation capabilities directly supported in vanilla JavaScript.

Motion.page is cool and I also use it on WordPress projects, but if you need something platform-agnostic using GSAP the Spirit extension comes in handy:

Another tool being developed in Berlin you should keep on your radar is …

They have been funded with 2 Million recently and are open source

Given you are a designer, Tumult Hype is a good choice and the learning curve is rather small if you stick to its capabilities. It solves most problems, but it certainly isn't the tool of choice when it comes to animated existing HTML outputted by WordPress.

4 Likes
3

Very cool!

1 Like
4

Thank you @MaxZieb for your honest and detailed answers (and not only looking through the hype glasses :wink: )
This will help me a lot for finding the right direction. In the moment, I think (for me) the best and practical way would be to use Motion.page on WP-Sites for "Site-Animations" – like Text, Menu, Imageanimations eg.
And Hype for interactive "complexer" animations – but also used in WP-Sites.
I will also go a little deeper into Javascript – this can't be wrong.

What do you think of using Motion.page (Greensock) and one ore two Hype-Animations together on one WP-Site? Will there be conflicts? is that advisable?
And … maybe an additional Lottie-File? Too much? :wink:

And thanks for the hint of "Theatre.js" … never heard of this. I will check.

1 Like
5

Hello @berndt, you are welcome. No, there shouldn't be any conflicts. You can even use Motion.Page on top of Hype as long as you don't embed them in iFrames. The animation engine of Hype is sadly limited to elements it knows about. Hence, any added HTML or external div's can't be addressed. The JavaScript API is also limited to a handful of properties vs. using the graphical user interface of Hype. The latter is consequence of they way Hype stores the scene information. It comes down to a reverse lookup that would bloat the runtime in its current form. For most that isn't a problem, as Hype has the emphasis on visual editing. This could be a great place for Hype 5 to innovate, though. Maybe Tumult could revise the way Hype stores properties, as they currently quickly bloats when repeating symbols and scenes. Either way…

Tumult Hype 4 Pro remains one of my favorite tools (and is still worth the fantastic price), and every problem that surpasses the capabilities can be or has been somewhat extended using JavaScript. The skill of understanding and reading JavaScript (apart from some Hype idiosyncrasies), is something that will serve you well beyond Hype! Make sure to learn vanilla JavaScript first, before using frameworks as they come and go.

3 Likes
6

A very clear reply MaxZieb, I too love Hype I use it for building websites (uses 20% code and instant load compared to Wordpress and of course no constant plugin updates). Complex animations for games and more.

I am from a designer/illustrator background with some coding knowledge, but you can add code (JavaScript/html) easily into Hype. Must confess I'm a cheat and even though I have used Hype since version 2 cut corners to produce the project quickly and I know there are better/cleaner ways to create the job (example: https://the-steam-packet.com), the drop down menu works but not created the way the 'professionals' would do it!

Thank you for the link to theatrejs, built with THREE.js. I signed-up to a training course over a year ago for THREE! It is amazing, the future of JavaScript. I just need more time to learn...

Theatrejs visual interface is a great help.

7

Welcome posting in the forum and hope to hear more from you and your projects.

ThreeJS I would say it not the future (maybe part of it). 3D has a great utility and shader can be used in 2D as well, but it still creates a canvas context not as suitable and accessible for regular web.

Theatre JS is a animation engine that can drive any values… it just so happens they have a plug-in to drive ThreeJS and use it in their use case. But it can be used on any JavaScript based API to drive value progression. That makes it very interesting.

8

I stand corrected, the course I signed-up for showed some amazing examples. I tend to use 3D animation software importing sprites into Hype (no coding and gets around iOS auto-loading issues).

Of course, I presume if built with with code would create faster/smaller files.

Thank you

1 Like