New to Hype ( as of yesterday) love the possibilities with this app coming from working with After Effects. I’m wondering what the best way to reuse animation’s? I’m looking to create a mouse over and mouse out that adjusts each letter. I created each letter in a word as an individual text layer, and created an animation adjusting the size of the first letter and looking for a way to apply this animation to all instances of the letter within the word. Would this be done through reusing the animation through javascript? Or am I overlooking how to do it within the interface?
The way I would do it would require 11 timelines: You can create the actual animation consisting of the grow animation + pause timeline action + shrink animation once, and then copy/paste that animation onto the other 10 timelines.
Creating the timelines & setting the mouse over / mouse out timelines for each character would be somewhat tedious, but this is how I would handle it.
Was hoping to be able to avoid the tediousness of replicating timelines. Currently looking into the possibility of creating a class for each word and then using GSAP. Came across this tutorial: http://dev.andyhullinger.com/using-tweenmax-in-hype/
Hoping to be able to decrease time to create animations… even if a bit of copy/pasting/tweaking code. Not familiar with it, but want to eliminate repetition.
Here’s another way, much easier than the timelines, by using CSS. I’ve attached the css file separately for easy extraction.
I’m 100% sure there are ways to parse the string without having to resort to making each letter an object, but that’s beyond my capabilities
Each letter is a separate object.
Individually group each letter into it’s own group, so you now have 11 groups (if Interactive is your word), each with one letter object inside it. I’ll explain why you do this in a moment.
For each Text object, not the group, assign a Class of ‘button’ (which we have not yet defined). Be sure to omit the usual ‘.’ in front of the class name:
In Resources, load up the attached .css file.
It has a definition for .button for both it’s static and hovered state. I added a filter on there just to have a second animation timing example.
The animation on the static definition ensures that the letter will gently ease back to it’s non-hovered state. Without the Transition in there, it would instantly snap back.
This also explains why I put the letters into small groups. The Transform assumes the letters will snap to 0,0, so they would all jump to the upper-left corner of the screen. Fortunately, it’s all relative, so each letter snaps to the upper-left corner of it’s parent (the group).
You should be good to go - the css has covered the Hover state.
Oh, sorry! I am getting the blur animation on your version, but not the scaling animation. Added a color animation test, and that works fine too. I’m wondering if keeping the text “in-line” is overriding the transformation property, ie, it only inherits it from it’s font rules.
Ha! Yeah, the clumping was what I had before I grouped the letters inside their own groups.
Sadly, the vertical line up is a huge typographic no-no, as it destroys readability. We scan words as clumps, not letters (compare kids when they begin to read in how they sound out each letter, as opposed to an accomplished reader). Vertical layout destroys that clumping ability. Interesting problem!
Hi @emcee ,
I’m not sure that I understand your idea. According to the video that @ouch_stop post, I’ll use the symbol to do the effect. (I’m poor in coding so I often use the element animation and timeline).
I think symbol is a very good thing for reusing some animation/interaction and so on. Here is the steps:
Step 1: Create a symbol ‘H’ that have the character ‘H’, and the animation in a sub timeline;
Step 2: Add the mouseOver and mouseOut action to the character, to start the sub timeline or reverse it;
Step 3: Copy the symbol ‘H’ from the resource!!;
Step 4: Drag the copied symbols to the scene and arrange them well~