I've nearly got it where I want it but there are two things bothering me. Please check the attached file to see what I'm talking about.
The first is when 'skills' and 'training' expand, the color transitions get super funky if you move the cursor about. This does not occur for 'leadership' or 'let's talk' when they have expanded nor on my iphone. Why is the color going nuts on only those two scenes?
The other issue is a gap that appears between 'leadership' and 'skills' when 'let's talk' or 'training' start to expand or contract. The scene size is 600px and each block is 300px. Why does it look as if 'skills' shrinks a pixel all around when the animation starts? The animation shouldn't effect 'skills' at all. Thank you for your help
Hey, nice to see some 5-year-old forum reactivations! Welcome back.
It's mostly a stacking order issue. You have a layer on top of your hover-sensitive elements, and the animated bounding box is interfering with the state. I'd suggest turning off pointer events on the layer. If you want to disable pointer events for an group recursively, use this approach:
Also, I noticed the setup of your file might lend itself to Hype Scene Magic (recently updated):
Greetings from James,
I want to tell you that the color transition issue may be due to conflicting CSS transitions on 'skills' and 'training' elements, potentially involving overlapping properties. Simplifying or specifying the transition properties might help. The gap between 'leadership' and 'skills' likely occurs due to rounding errors or sub-pixel rendering during animations. Ensuring consistent box-sizing and using integers for dimensions in animations should resolve this.
thanks, I was able to fix it by deleting the offending button and then putting a new button in the exact same spot. The gap was due to a hover issue and is now fixed. thanks