Tried to implement the following css to an insert in tumult hype. The animation is not working when using the html-code, however if you change “figure” to something else it suddenly starts. Could anyone explain to me how you implement this css correctly and why the figure class is not working as intended?
I added the css into html head within style tags and added the text box > edited inner and paste the html code.
Hi again guys!
Since no one was able to help me I’ve added the code to tumult hype so you can take a look yourself.
QUESTION 1:
This is the correct code that SHOULD WORK, yes it should (jsfiddle):
<div id="button-1"><section class="stage">
<figure class="ball"><span class="shadow"></span>
</figure></section></div>
This is the incorrect code that works:
<div id="button-1"><section class="stage">
<tumult123 class="ball"><span class="shadow"></span>
</tumult123></section></div>
As you can see, the difference between those two codes is the tagname called “figure”. This is a common tag to use but for somehow it don’t work with hype. I have changed it to a random name (tumult123) and for some reason as you can see it makes the globe spin (background move).
QUESTION 2:
This is a bit more tricky question, perhaps some of you masters at css can help me out:
I tried to do it myself and here is what I came up with:
Below is a working code that moves the background correctly but with the non-sub-pixel way (background-position) which causes lag and jumps between each pixels:
@-webkit-keyframes move-map {
from { background-position: -849px 0; }
to { background-position: 0 0; }
}
Below is the code that is not working correctly. It is moving the entire sphere instead of the background. However, as you can see there is no lag at all, the sphere moves extremely smooth. How can we make this code move only the background image instead of the entire sphere?
@-webkit-keyframes move-map {
from { -webkit-transform: translate(400px, 0); }
to { -webkit-transform: translate(-400px, 0); }
}
Everything that I’ve linked here is in my tumult file. I appreciate any help you can provide.
Tumult file: rotating-globe.hype.zip (9.4 KB)
What does it say in the console when you use figure. I cannot check at mo as I am on old Mac.
Also everything I find on the figure tag points for it being used as a image caption container.
Nothing in the log what I can see. Should not be a problem with figure though so it would be cool to hear from @Daniel or anyone else in the team since it might be a bug within hype.
I’m still curious on how to solve question 2, so if you or anyone can help me out that would be great.
By default, Hype tries to insulate elements from other CSS properties outside of your document. 'Protect from External Styles' adds this CSS to elements on the scene:
.HYPE_scene figure { color: inherit;
font-size: inherit;
font-weight: inherit;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-variant: inherit;
text-decoration: inherit;
text-align: inherit;
text-transform: inherit;
text-indent: inherit;
text-shadow: inherit;
line-height: inherit;
letter-spacing: inherit;
white-space: inherit;
word-spacing: inherit;
vertical-align: inherit;
border: none;
background-color: transparent;
background-image: none;
padding: 0;
}
This setting is overriding code you have for your 'figure' element. It also applies this code to these elements:
.HYPE_scene div, .HYPE_scene span, .HYPE_scene applet, .HYPE_scene object, .HYPE_scene iframe, .HYPE_scene h1, .HYPE_scene h2, .HYPE_scene h3, .HYPE_scene h4, .HYPE_scene h5, .HYPE_scene h6, .HYPE_scene p, .HYPE_scene blockquote, .HYPE_scene pre, .HYPE_scene a, .HYPE_scene abbr, .HYPE_scene acronym, .HYPE_scene address, .HYPE_scene big, .HYPE_scene cite, .HYPE_scene code, .HYPE_scene del, .HYPE_scene dfn, .HYPE_scene em, .HYPE_scene img, .HYPE_scene ins, .HYPE_scene kbd, .HYPE_scene q, .HYPE_scene s, .HYPE_scene samp, .HYPE_scene small, .HYPE_scene strike, .HYPE_scene strong, .HYPE_scene sub, .HYPE_scene sup, .HYPE_scene tt, .HYPE_scene var, .HYPE_scene b, .HYPE_scene u, .HYPE_scene i, .HYPE_scene center, .HYPE_scene dl, .HYPE_scene dt, .HYPE_scene dd, .HYPE_scene ol, .HYPE_scene ul, .HYPE_scene li, .HYPE_scene fieldset, .HYPE_scene form, .HYPE_scene label, .HYPE_scene legend, .HYPE_scene table, .HYPE_scene caption, .HYPE_scene tbody, .HYPE_scene tfoot, .HYPE_scene thead, .HYPE_scene tr, .HYPE_scene th, .HYPE_scene td, .HYPE_scene article, .HYPE_scene aside, .HYPE_scene canvas, .HYPE_scene details, .HYPE_scene embed, .HYPE_scene figure, .HYPE_scene figcaption, .HYPE_scene footer, .HYPE_scene header, .HYPE_scene hgroup, .HYPE_scene menu, .HYPE_scene nav, .HYPE_scene output, .HYPE_scene ruby, .HYPE_scene section, .HYPE_scene summary, .HYPE_scene time, .HYPE_scene mark, .HYPE_scene audio, .HYPE_scene video
Unchecking 'Protect from external styles' will allow the 'figure' class to not have a margin property, and also removes the background-color and padding value which is disrupting your code.
-webkit-transform animates the element, and background-position animates the element's background image position, so you're going to need to use a standard image element if you'd like to use transform. It would require some restructuring of this code.
Oh I see @Daniel. Thanks for clearing that out! Is it a bad thing to use a random tag name instead of figure then or would you suggest something else?
Regarding the rework of the globe I am currently trying out some different ways. I managed to get the image moving much smoother (like I want to) but then again there is some complications on how to get the overflow:hidden.
If someone is interested, here is the jsfiddle