Can this be achieved in Tumult hype, or do I need external tools/libraries?

Animation
1

Hello everyone, this is my first post on the forums, however, I’ve been lurking the forums and using Hype since 2018. I’ve took a break from banner building when I quit my job at a digital advertising agency, but now I’m going to start working at a new one this month, so I want to brush off my tumult skills.

So, I’ve got 2 questions basically, one regarding SVG’s and one regarding Timelines/Javascript timelines.

First question : From what I’ve understood from reading the forums, its not yet possible to import editable SVG files into Hype (yet). So, since I want to important existing SVG logo’s that are animated into Hype, I wondered what is the best pipeline for getting my JSON/CSS animated SVG’s into hype?

I’ve done some reading, and found these 4 tools.
• Keyshape
• Spiritapp
• Aftereffects + Bodymovin, with (or without) Lottie?
• Svgator

Does anyone have experience which one is the smallest (for ad purposes) and getting these exports into hype?

Second question : As I am not a programmer, I have little to no experience with Javascript. For a test banner I created I wanted 3 buttons in my banner that when clicked show the right color car, and slide away the cars not of that color.

Print screen.PNG
Print screen.PNG1651×524 96.3 KB

So, I tried to do this with creating 3 different timelines (1 for each color), that plays when the right button is pressed. At the same time I reverse the other 2 timelines of the other two colors so that the non-selected color slides away. So for example when I press the Brown button, the BrownCar timeplays plays, and the Black and Grey timeline play in reverse to slide out of frame.

However, this gave me the issue that when pressed atleast 1 car was spawned out of nowhere that wasn’t on the screen, and slides away. The same thing happens when the button is spammed, it just spawns cars (since its reverse playing the timelines of it coming in).

So what I did, as a Javascript noob, I’ve found GSAP and imported it into the banner due to the ability of animating with the gsap.to methods, so cars out of frame would stay idle, and only the correct car would be called into frame.

tlBlack
  .to(".CarBlack", 1, { x: '87px', ease: 'power2', })
  .to(".CarGrey", 1, { x: '-300px', delay: -1, })
  .to(".CarBrown", 1, { x: '-300px', delay: -2, })

 tlGrey
 .to(".CarGrey", 1, { x: '87px', ease: 'power2', })
 .to(".CarBlack", 1, { x: '-300px', delay: -1, })
 .to(".CarBrown", 1, { x: '-300px', delay: -2, })

tlBrown
  .to(".CarBrown", 1, { x: '87px', ease: 'power2', })
  .to(".CarGrey", 1, { x: '-300px', delay: -1, })
  .to(".CarBlack", 1, { x: '-300px', delay: -2, })

This works great, see the live working demo here:
http://mitchvdakker.nl/banners/tumult/index.html

Although this works great, I'd like to avoid using other libraries and coding as a whole, to keep time (for a coding noob like me) and a file size down. Eventhough GSAP is allowed by Google.

So any suggestions how I could achieved the same within just hype? (and as little coding as possible for a Javascript noob like me).

2 Likes
2

Maybe..

Using realtive timelines.. no code.

cars.hype.zip (148.3 KB)

5 Likes
3

To clarify, you can import .svg files in the same manner as an image - just drag a file to the scene editor. You can also paste SVG code into the inner HTML of an element.

It is just not possible to edit the SVG shapes/layers from within Hype. Hype's own vector shape tool does generate SVG code for the browser dynamically, but this is kinda a oneway street at the moment.

@MarkHunte's example is how I would do it too! Relative Timelines were intended for this very purpose.

1 Like
4

Maybe..

Using realtive timelines.. no code.

Thanks a lot! I wasn't aware of the relative timelines, this surely will help allot in the future.
I've read the documentation, but must of oversaw this feature :exploding_head:

Thanks for taking the time to setup a preview hype document!

5

I see, so it isn't possible as of right now to get an SVG logo of a client into hype and animate its elements in Hype. Since i'd prefer to make my end composition in Hype, I'd have to animate this for now in a software like Svgator, and then export the animated svg into a css code, and paste this into a HTML widget and position this on the timeline right? or would the Javascript export also work better into Tumult? Although I reckon that increases the file size more then the Css.

6

You cannot animate the parts of an SVG, but you can just export the parts you need as images SVG and recreate everything needed to animate into the logo as layers in Hype and then use the regular Hype animation tools. @Daniel wrote a nice article about that…

https://medium.com/@tumult/creating-an-animated-logo-in-tumult-hype-comparing-the-after-effects-bodymovin-lottie-workflow-b7808848f4ff

1 Like
7

Thanks Max, The more i read and see about Hype the more I love it. I'll for sure use hype as my main tool to create rich web infographics.

However, for the logo I've animted a long time ago in AE, it would be hard to recreate using the Hype tools by importing the svg's as seperate image elements.

Since I need to animate the stroke options for an example logo's like below, doing this into an external tool would seem the logical way right? then import it into Hype as Css in the HTML widget?.

BamBelo

1 Like
8

You're welcome. This seems rather simple to animate in Hype? Just use the vector tool and a line animation after retracing the "B" line. The letters just scale and fade up. The Transformation origin on the letters would be slightly offset to the bottom.

1 Like