Does anyone have experience layering text? What I would like to do is animate the 2 words in this logo and have them ending up overlapping each other like this png. I’m sure its possible using BWD stacks, but am not sure exactly how to go about it?
I’m not sure what animation you want but here is a simple hover animation. 2 HeaderPro stacks using the extra segment for the smaller characters. Each in a sections box with one floated on top of the other, then just an animate child stack to fade out one and fade in the other on hover.
https://sandbox.bigwhiteduck.com/animated-headerpro/
Project file: https://bwd.d.pr/F5XzMo
Man, your so fast!
thank you so much… its perfect, I will create the slide in. thanx
Thats so cool, I never thought to use the header segments… was playing with sections box, but this is so much quicker.
simple is best 
Hi Andrew, I notice that the second floating box changes position responsively but the first remains fixed, thus changing the overlap and looks not so good. Can this be fixed so the proportional layout remains the same across devices?
(my original idea was to have the text animatedly appear from the left)
The first box is there just to give a target for the fade animation, the Header inside it is what is giving the whole thing some height .
The second box is floated relative to section (whose size is coming from the fist header). I quickly just set it to 5% left which is why it will change position with width.
All you need to do is to set that back to 0% left so that it is perfectly on top of the first text. Then just use the responsive padding on that SectionsBox to pad the left hand side. This will push the C AIN text to the right but will allow it to follow the responsive size change of the first header - i.e. the left padding should stay the same until the point where the header gets smaller (640px) and then the padding should get smaller (use a bit of trial and error). This way the overall relative positions will be perfect over all screen sizes.
Just playing with the published demo in the browser - it looks like 14px mob and 28px tablet and 28px desktop in the Sections Box detailed left padding will do the trick once the box horizontal position is set to 0%
did it and it works,
Thanx again for your help.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
