Hi all,
I made a custom button in Hype where upon clicking, a JS function runs, changing the background color with an ease transition. It works fine for the button on the left.
However, for the button on the right, you'll notice that on document load, the button appears to "fall down into position". Meaning that it seems to move from the top of the screen to the bottom where it's aligned with the other button.
There are no animations associated with this button except for the transition property.
I've attached a video and the Hype file. I'm scratching my head as to what's going on here.
Many thanks for any insights you can provide!
debug.hype.zip (778.7 KB)
Well, here's one problem...
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
Like this stuff...
$('.keyalbums').css({
'background':'#AA20A5'
});
You don't need this. You can set background colors of groups. It's just another element. It's not that jQuery is bad. It was really good back in the day. But now, especially with Hype, you're adding confusion to your project.
Here's why...
If you want to stop the button from moving, remove the "keyalbums" class. Why does that matter? It appears to be line #23 of your Head HTML...
.keyalbums{
background: #2C2B57;
transition: ease-in 0.3s;
}
It seems to be transitioning from 0.
Is it a bug? I don't know. 
This seems avoidable though. If you want to do coloring and animation, you're using Hype! Why bother with manually adding CSS styling / transitions?!
If you really REALLY want to manage your project this way, then you'll probably need to be specific with your transitions. You're not specifying a property.
I threw together some HTML to show what happens when you don't specify a property...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
overflow: hidden;
}
#test {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
left: 50%;
top: 50%;
opacity: 0.1;
text-align: center;
font-size: 1rem;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
background-color: gold;
width: 100px;
height: 100px;
transition: ease-in 0.5s;
}
#test:hover {
opacity: 1;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
font-size: 70vw;
transform: rotate(360deg);
border-radius: 100%;
}
</style>
</head>
<body>
<div id="test">Hi!</div>
</body>
</html>
Everything that can be animated is animated. But if you change... transition: ease-in 0.5s; ...to... transition: border-radius ease-in 0.5s; ...only that property is animated.
@Photics Thanks for your response.
I wanted to avoid using JS for this, but it seemed like the way to go as I have an issue I can't get resolved using timelines. Example:
On clicking Button 1
- Start the timeline where the Button 1 background color changes (duration 0.3s)
- Navigate to the next scene (Right to Left, 0.4s)
When I create these two click actions in the Actions panel, only Action 2 takes place (transition to next screen). To get Action 1 to work, I remove it from the Actions panel and recreate it in Scene Unload.
But I can't do the same thing for Button 2, as Scene Unload has already been set to Button 1's timeline.
Hope that makes sense!
Found the answer! No need to use Scene Unload!
From the documentation:
Here's the way to do it:
On clicking Button 1:
- Action Panel: Start "Btn 1 Click" Timeline
Then:
- Go to the Btn 1 timeline, then add a Timeline Action at the end of the timeline, and set that to "Jump to Scene". Now the Timeline will play to completion, and then the next scene will load!
The same process can be repeated for Button 2.
1 Like