Simple Click/Hover Effect Gallery animation Help


(Peter) #1

Hey There, I’m new to Hype for about a 2 months now.
I’m experiencing issues with a rather simple animation.
Basically, I have colour cercles, and on click, they would display a a certain product colour and description, and by clicking on another cercle, it displays another product colour+description.
Quite simple right?

Somehow, the text description overlaps once the new colour product/info is loaded.

I have the source files I can share if anybody is able to help!


#2

It would be great to see where you’re at with the document at the moment. What part are you having issues with?


(Peter) #3

Hi Daniel!, i’m actually having difficulties with the Actions panel.

I have everything setup in different timelines, they play the content perfectly, until I hover on another colour, it glitches from time to time. What is the best way to share the document?


#4

You can compress it into a zip file, and then drag the document onto your reply window. If it’s really large, you can share it with a site like wetransfer.com.


(Peter) #5

There you go.


#6

It looks like you’re super close. It seems like it is working well for most of the ‘mouse click’ actions. There’s a few times when text does not clear when it should. I set each of these timelines to be relative and I think you can turn off the ‘can restart timeline’ option when clicking a color. Can you have a look at this document? https://cl.ly/e7d715ca893e

The ‘mouse out’ action (which bounces the text) occurs despite clicking another color, so you may want to rethink that.


(Peter) #7

Hey Daniel, Thank you so much for looking into this.

I’ve looked at the document.

What is the purpose of setting up the timelines to be “Relatives”?

Also, for the “mouse out” action, It was setup in order for the image/descriptions to disappear to leave space for the next one selected. Do you recommend any better way to approach this?


#8

Without relative checked, objects that are animated in two timelines will jump to their new position. So for example, your Shadow, which has animations on every timeline, would jump from position to position if it were not relative. Set to relative, the keyframes will smoothly transition the shadow object to the keyframe relative to its current opacity and position. Here’s a more complete explanation of Relative Keyframes: https://tumult.com/hype/documentation/3.0/#absolute-and-relative-keyframes

I was finding that the mouse out action was causing text to overlap with other text if you click and move the mouse away in a brief amount of time.