Reusing Animation on Multiple Elements?

Animation
1

Hi there,

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?

03 PM
Screen Shot 2018-04-12 at 2.17.03 PM.png1796×352 10.7 KB
08 PM
Screen Shot 2018-04-12 at 2.17.08 PM.png1726×278 10.3 KB

2

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.

1 Like
3

Thanks Daniel!

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.

1 Like
4

You can use tweenmax but also there is the built in

hypeDocument.setElementProperty

That is a bit annoying as you need to adress every property individually but it does the job.

If your going down that route you might also be interessred in the plural form (with example)

hypeDocument.setElementProperties

2 Likes
5

Hi @emcee

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 :wink:

  1. Each letter is a separate object.

  2. 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.

groups

  1. 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:

class

  1. In Resources, load up the attached .css file.

addfile

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.

.button{
	filter: blur(2px) !important;
	transform: scale(1) !important;
	transition: transform 4s, filter 5s ease;
	}
	
.button:hover{
	filter: blur(0px) !important;
	transform: scale(1.5) !important;
	transition: transform .5s, filter 1s ease;
	}

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).

  1. You should be good to go - the css has covered the Hover state.

hover.zip (16.3 KB)

6 Likes
6

Just to add to @emcee nice idea

You can change the individual letters to a single Text element with a single word.
Give it an ID for this code that runs on sceneload.

	var word = hypeDocument.getElementById('letters')
	var letters = word.innerHTML
	
	newLetters = ""
	
	for (i = 0; i < letters.length; i++) { 
	
   newLetters += ("<span class='button'>" + letters[i] + "</span>") ;
  
}

word.innerHTML = newLetters

This will split the letters and give them the correct class for the css.

hover_v2.hype.zip (13.9 KB)

5 Likes
7

Hi Mark,

Clever! Thank you.

Any ideas on why the transform dropped out?

8

Thanks for this Max! Definitely something to play around with.

9

Thanks ouch_stop, this is more inline of what I was looking for. Appreciate you providing a detailed sample! Really helpful!!

10

Sorry what do you mean?

11

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.

12

It looks like it something to do with position.

When I set it to absolute.

newLetters += (" <span class='button' style='position: absolute'> " + letters[i] + "</span> ") ;

The scale works but they clump together.

Interestingly I accidentally found how to get the text to go from top to bottom in a straight line.

newLetters += ("<div ><span class='button' > " + letters[i] + "</span><div>") ;

45

13

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!

14

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~

Here is the hype filemouseOverAni.zip (17.5 KB)

I hope it will help you~

3 Likes