Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Re: Textpattern's face to the public
I’ve developed the design prototype further so it now includes all the parts.
Don’t use a small browser window! (the vertical text formatting is unresolved). Update: neither is dark mode!
- banner
- nav
- hero
- features
- faq
- showcase
- current
- (video)
- ads
- footer
Design & Content
The hero animation is incomplete; I want Act 3 (Weave Pole Training) to be more sinuous; I’m hoping that scaling the dots up a bit when in front of a letter form will do the trick. Acts 4 and 5 still to come… The animation still restarts if you scroll; I’ll look into this at the same time.
The thorniest design issue is the size of the vertical text; I want each phrase to be the same font size and stretch from top-to-bottom of its panel, whatever its height. Maybe some css min/max height and clamp functions will do the trick, but I can always use js as a fallback :(
The faq section needs more content. Suggestions welcome (Bloke has some good ones). Of course the length of this section (and whether all points are toggled open or not) plays a huge bearing on the size of the vertical text. To be solved later when the parameters are clearer.
I’m using a random ‘ken-burns’ animation of TXP-UI on each open faq. The styling isn’t right yet (too prissy, too small), but is very flexible in what we feed it. There are all kinds of opportunities to show the UI and pimp Donald Swain et al – with the right phrases embedded in the screenshots we have another medium to promote with.
Apologies for my websites dominating the showcase section (I had the screen-captures readily available). These would be randomised upon each visit to the homepage, sourced from (hopefully) a large pool of listings. Content requirements for each listing is deliberately limited to make contributing one’s site as simple as possible.
I shifted the website.informer.com panel into the ads section, and removed the Featured at label. I hope this doesn’t jeopardise any deal with the advertiser…
Missing is a video / slideshow of the interface as discussed earlier in the thread. As it will be an endeavour to create, I want to first see how far I can get with the faq approach. A video could appear as another full-width block near the bottom to act as a terminating block near the end of the page.
Scroll/event-driven animations
I’m not convinced yet by the ‘click somewhere’ effect; it at the very least needs to appear black when against the yellow background, and use a random animation each time. Ideally I’d like it follow on from the hero animation, interacting with and around the element you clicked on.
Alternatively a better approach (suggested by Julian) would be to use gsap’s scroll-driven animations to drive groups of dots within each section… I’m still prevaricating as to what these animations might be, so I’m leaving this to a later stage when the broad page layout is nailed down. The current faq and the scroll-driven animations together may make the page too busy visually…
As I write this I realise that current (blog & forum) is superfluous; ‘Reasons to use Textpattern’ is a better replacement, and takes some of the load from features and faq. A better order would then be:
4. features
5. reasons
6. showcase
7. faq
8. (video)
Development
While using a separate css file for the homepage is possible, it won’t offer many gains as the new css needs to draw on many of the current sass modules for the site (settings, general styling etc.). The banner, nav, footer and base button styling need to be uniform across the site.
The design prototype currently draws on 2 css files:
- main.css (with modifications for banner, nav, footer)
- h25.css (homepage-only css, currently a mix of custom code and selected modules from all-grid, sorely needs refactoring :)
On the content side, features, faq and showcase will be sourced via a clutch of articles. I need a copy of the current database to figure out how this might be achieved, and to take the design prototype to a full-fledged code suite that developers can comment on.
Last edited by giz (2025-09-22 00:28:44)
Offline
Re: Textpattern's face to the public
Contrast ratio is low in the yellow div, but also in the vertical text in the grey div:(
Also, I’m not sure about the “Twenty one years…” phrase as it’ll be outdated in 3 months, unless you have a php which will be updating “current year-2004”.
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: Textpattern's face to the public
Amazing, and many nice ideas. But I find it less usable than the current site atm.
- The large hero part become too imposant on the 10th visit, when one is mainly looking for faq and news. I can agree with ‘current (blog & forum) is superfluous’ (it looks like you have already removed it).
- Too much scripting, contradicting our ‘lightweight and fast’ claim. Might more features be delegated to css?
- JS disabled, the showcase part degrades poorly.
But it certainly has a ‘disruptive’ potential. Txp5, maybe?
Offline
#64 2025-09-22 09:10:52
- Algaris
- Member
- From: England
- Registered: 2006-01-27
- Posts: 583
Re: Textpattern's face to the public
Keep up the good work, Giz! Here’s my feedback.
The bright yellow with grey and white text is hard to read, and it hurts my eyes when I try. 😥
The bouncing balls are cool, but they get quite distracting after the first one. Also, when you scroll, the animation gets jerky and keeps restarting.
The grey background with white and off-white text works well and is easy to read.
I just noticed the dots when you click in the divs with the grey text background. That’s a fun little Easter egg.
I like your scrolling showcase at the bottom of the page, and the fact that you can click/tap and drag the thumbnails is great.
Offline
Re: Textpattern's face to the public
Umm… as mentioned in my post, ‘Dark Mode’ isn’t supported yet.
The comments assume the design and coding is ‘ready-to-go’; the opposite is true. It’ll remain rough-and-ready until the design is formalised. Then I’ll be ripping everything up and doing it again from scratch.
etc wrote #340595:
Too much scripting, contradicting our ‘lightweight and fast’ claim. Might more features be delegated to css?
‘lightweight and fast’ pertains to the CMS, but I agree; all sites should have these qualities. It is a public-facing homepage with expectations, and you can only go so far with css.
Even in its current experimental state with a full suite of javascript libraries, I’m not doing too badly on javascript sizes. 156kB (minimised current homepage) vs. the prototype 218kB1 (still to be minimised).
These non-blocking resources have little bearing on time-to-paint, and file sizes will pale into insignificance compared to any videos we include on the page.
1 The ‘ken-burns’ animation is the main culprit, but I plan to drop this in favour of video snippets.
Offline
Re: Textpattern's face to the public
I got advice on how to best deal with ideas I have for the animations in the #reasons section:
As we’re already loading GSAP.js for the hero, it appeals (and we can use scrollTrigger to trigger the animations as you scroll).
Thoughts?
Offline
Re: Textpattern's face to the public
The prototype is as complete as it can be given the constraint of un-finalised content.
https://dev.all-sorts.biz/txphome-proto2/
White background only at this stage; I’m undecided — Dark Mode colours for the footer are problematic. Make the footer white (too strong), or dark-gray (muddy), or black like the rest of the page (no ‘stop’ to the page)?
The hero animation now runs once, and then waits for a click to continue. If you scroll down or resize your browser window, the animation bails and waits for the click. Sizing, cadence etc. of the dots are controlled via css variables, which I still need further tweaking for various screen sizes. Maybe 3 acts is enough?
The reasons section has 3 articles:
- gsap animation showing how simply changing a wraptag or attribute of a tag alters the design. More usage cases to follow in the carousel, but I’m looking for suggestions.
- TXP Trace Summaries showing response times on various equipment, connections and number of queries. This was the most direct way I could think of to illustrate speed; what parameters can/should we display for each usage case?
- Staging is still basic – plain svgs without any animation. I’m yet to figure out a better approach… Suggestions please!
A 4th article can slot in, but the subject is open to suggestions…
Other than that, font sizes now adjust according to viewport width, which made dealing with smaller windows easier to manage.
.
Mindful of etc.‘s comments about Javascript libraries, we’re now using 2 (gsap for the animations & Flickity for the carousels). All javascript is combined into a single minified file which clocks in at 44kB transfer size, 139kB uncompressed.
I opted for gsap for the features animations instead of video etc.
1. CSS Animations with HTML
✅ Pros:
• Lightweight (no external libraries needed).
• Very performant (GPU-accelerated transitions).
• Easy to scale responsively with em / vw units.
• Great for simple loops (blinks, pulses, bounces).
❌ Cons:
• Harder to choreograph sequential, dependent steps (caret → select → replace → pulse → bounce).
• No timeline control: you’d end up with lots of @keyframes juggling.
• Editing text dynamically (caret simulation, selection) gets messy quickly.
⚡ Verdict: Fine for very simple UI “pulses” and bounces, but gets painful for multi-step narrative animations like yours.
⸻
2. Video
✅ Pros:
• Dead simple: export a looping video from After Effects (or similar).
• Scales automatically across devices.
• All effects/complex timing are baked in.
• Encapsulation: one file, reference it anywhere.
• No browser rendering quirks.
❌ Cons:
• Not semantic (you’re shipping pixels instead of DOM/SVG).
• Heavier file sizes (even optimized WebM/MP4).
• Limited interactivity (no “pause at frame 3 and wait for click”).
• Looping a sub-section (like “chapter loops”) is hacky — <video loop start end> isn’t supported natively, only #t=n start offsets.
⚡ Verdict: Best if you want pixel-perfect illustrations with no interactive branching. But brittle if you need looping sub-sections.
⸻
3. SVG Animation
✅ Pros:
• Perfectly scalable (vector, crisp on retina).
• DOM-like: you can animate text, shapes, strokes, masks.
• SMIL is deprecated, but CSS/JS can animate attributes (stroke-dasharray, transforms, etc).
• Lighter than video, flexible like HTML.
❌ Cons:
• Text editing simulation (caret blink, character replace) is fiddly.
• Animating selections/caret feels hacky unless you treat text as paths.
• Browser quirks with <foreignObject> if embedding HTML inside.
⚡ Verdict: Best for purely graphical or illustrative animations, but may get awkward if you want “typed text editing” to feel authentic.
⸻
4. GSAP (GreenSock)
✅ Pros:
• Timeline-based animation = perfect for choreographing sequences.
• Can target HTML and SVG and pseudo-elements.
• Timeline can loop, reverse, pause, chain — ideal for your “repeat h3 ↔ h4 edit” cycle.
• Easing (elastic, bounce, etc.) built in.
• Well-tested across browsers, highly performant.
❌ Cons:
• Adds an external JS dependency (though ~30kb gzipped).
• Slightly steeper learning curve than CSS.
⚡ Verdict: Best fit for your use case. The caret → selection → edit → pulse → bounce → shrink → repeat flow is exactly what GSAP timelines excel at. You’ll keep it editable (still real text in DOM), responsive (scale text/circles via CSS), and loopable with precision.
⸻
My Recommendation:
• If you want illustrative “scenes” that are purely decorative and never change → video (with a fallback static image).
• If you want dynamic, semantic, crisp, looping UI metaphors (like simulating a text edit in your screenshot) → GSAP with HTML/SVG.
That way you can choreograph every detail and loop specific sub-sequences, which video can’t easily do.Video is also a pain to produce. The slightest change to content and its do it all over again…
Offline
#68 Today 16:26:31
Re: Textpattern's face to the public
FFS; bump…
Offline