Hey Guys, it might be trival but I need some help with two functions. I am using a small JS to toggle a class on some Hype objects (see the attached stripped down scene from my project). It is working nicely, but I am unable to achive two features:
– I would like to have only one active object at a time. So if I click on button2, the blue circle of button1 should be closed (if it is open). Same for button3 etc… If I click outside of one of the buttons, all the circles should be closed. Hope this is making sense…
– I am seraching for a way to apply the class named “pulse” randomly to the buttons (for 1 or 2 sec.). Or apply it in order to the buttons (2sec for button1 after that 2sec for button2 etc.).
Help is highly appreciated – and sorry once again for all this newbish questions. I know I SHOULD learn JS
Give the groups a class also. This makes it a little bit easier to get the parent node and the siblings.
This example use ‘Gruppe’
Point all the pulse buttons at the single JS
$( ".scale-transition" ).each(function( index ) {
if (! $( this ).hasClass( "scale-out" )){
$( this ).addClass( 'scale-out' );
}
});
$( element ).closest('.Gruppe')[0].querySelector(".scale-transition").classList.remove('scale-out')
For the click off all buttons. You could place a rect as background and a click action on that that point to a JS that switches the scale-out on.
Just in case … here is an example (rough) of using Hype to do the animations and using its relative timeline feature to switch between timelines for the blue scale animations.
@DBear Thank you for the inspiration! I am doing native Hype animations everywhere I can. I know that Hypes animation system is extremely powerfull – But I think that my usercase is quite “esotheric” I am (mis)using Hype to redo/redesign PowerPoint presentations for a client in HTML5. Some of this PPTs have 70-80 different slides (so 70-80 different Hype scenes – well sorta). Those blue-scale circles are some recursing elements and are containg descriptions/informations in different parts of the presentations. To keep my workflow as easy and fast as I can, it is for me much more easier to just design and place such elements on the right place in the respective scene, and let the code do the rest (fortunately this worderful community is helping me with some code-parts!!! Thanks again guys).
If I would have only 1-2 scenes to design and animate, I would surely take the “native” approach
@MarkHunte – A-WE-SOME !!! Thanks! Will do some research regarding the randomly applyed calsses – hope I will have time for that (deadlines, deadlines), but since they are not absolutely necessary (but very nice to have), will do this in the final step… Thanks again Mark!!!
Here is a version in code Just call the 1 function on each Gruppe you create (or duplicate) and it will animate all the others closed (if they are open) and open the one that has been clicked. You can duplicate this group as many times as you want. And as a bonus smaller file size as no jQuery but of course if you are using jQuery elsewhere then that doesn’t matter.
The code can also be refactored to make it smaller but left it as is for sake of understanding.
@DBear Thank you very much for taking so much time!!! It is a precious example for me, where I can learn a lot about some animation techniques in combo with code – so many thanks for this!
What are the advantages using symbols and native Hype animations over applying pre defined CSS classes? Are there any performance related things that I am overseeing? Hopefully not! I was hoping to use CSS classes widely in my project(s). So this could be really important an crucial.
Anyhow: using the scripting help from @MarkHunte it is blazingly fast to work for me. Just take a look what will happen if you simply apply the “pulse” class to different elements with different colors. Or even just to pop out a rectangle instead of a circle… Also, on this way I can use some predefined CSS animations (like animat.css for example) to quickly create nice and smooth effects…
I really hope that I am not ignoring here something important!
It took me literally just a few minutes to throw together this example…
The code that Mark gave you is fine. The trouble is you’re using CSS transitions where Hype already has that capability built in. It’s like adding the mechanics to wash a car screen when the car already has windscreen wipers. Instead of adding all that code to the head HTML you can just use Hype’s API.
The code I have given you just uses Hype’s setter and getter API to manipulate the elements. The symbol (red dot) could also have the same technique applied. I just used a symbol here with an animation as it seemed the only thing that was the same throughout. Just one Symbol duplicated.
Hype is for animation. At least that is what is was built for. So if it were me I would use Hype for that and then add code as needed. There are many ways though.
If you are adding other Libraries to do the animations and code to apply everything then Hype, to me is redundant. This would also take away the pain of having elements inside element containers and scenes.
Nice one But I see it a bit different – for me is just like adding some chip-tuning to a really cool and fast car. If I can have more power for a bit of investition – I'll do it
Yeah. You are right. As I told that in the beginning – I am really (mis)using Hype here. But to be honest – I think meanwhile Hype is (can be) a lot more than "just" a tool for animations (imho). I used Hype in the beginnings (years ago) to produce animated banners and stuff like that. Since than I see a lot more potential here.
At least, I was not able to find a software that will allow me (as a designer) to layout, animate and even spice up HTML5 presentations with code – or even to use other libraries (JS and CSS) under one hood. And I worked with (and tested) a lot of solutions – DPS, Aquafadas, MAG+, GWD etc. just to name a few.
I will have to finish some of those presentation I was talking about – hopefully I will not be running in big troubles with my not so professional work
Yeah, this is true. This is one point that is not so ideal in Hype – if I see for example how GWD is handling the generated DIVs, I would prefere to see there a much more simple DIV structure. On the other side the way GWD is working brings up other problems (at least in my user scenarios)...
Are you specifically referring to the use of the HYPE_element_container divs? I've been lately pondering some techniques to be able to remove these for most cases.
Yes exactly! Can I give more than one Like for this??? I am not THE expert, but without this containers you would allow a lot more integration for external solutions… my2c here
@MarkHunte Hey Mark, banging my head! The function you gave me is working. The problem is that it is not working always. It is hard to describe, but sometimes the popup is shown and sometimes not. Same is with the JS that switches the scale-out on. Applyed this on a rectangle “ereaser”…
If some of you guys would take a look ank klick around – would save my life. Getty slowly mad here
A quick look as I am a bit tied up at the mo,
This looks like some of your groups, elements overlay each other also you could use the ignore allpointer events checkbox in the Action inspector to stop elements from registering clicks
Mark, thank you very, very much. I found also some rubish inside some groups – there was an old, useless rectangle inside some groups. Now that I have cleaned up the scene you have posted, everything is working perfectly Hard to believe that I have spent almost a day with this sh… Thanks again mate!
@MarkHunte Hey Mark, I am in the final phase of this project where I try to fine tune some stuff. You generously helped me with this script:
$( ".scale-transition" ).each(function( index ) {
if (! $( this ).hasClass( "scale-out" )){
$( this ).addClass( 'scale-out' );
}
});
$( element ).closest('.Gruppe')[0].querySelector(".scale-transition").classList.remove('scale-out')
Sorry if I am too impertinent with this, but would you have a quick solution to fine tune the script in a way that it will TOGGLE the ‘scale-out’ class on the initial object that I am clicking? Right now it adds the class to the clicked object and removes the class from all other objects. Would be much smoother when it would remove the class on the initial object if it is clicked again … Hope this explanation males sense
Mark, you are my hero – almost there, almost perfect. Almost: now i can open and close (toggle) my circles. But now clicking on the second circle (in our example) will let the first circle open. In the previous version clicking on the secon circle closed the first circle. But maybe this is too complex to achieve? Was my problem that i could not figure out the logic I would need Anyhow – I prefere this last version…
I am doing native Hype animations everywhere I can. I know that Hypes animation system is extremely powerfull – But I think that my usercase is quite “esotheric” 
But I see it a bit different – for me is just like adding some chip-tuning to a really cool and fast car. If I can have more power for a bit of investition – I'll do it 
I am not THE expert, but without this containers you would allow a lot more integration for external solutions… my2c here 
