Hello. I’ve been tasked with recreating the animated text effect on the secondary headings on this page (not the fade out of the main title at top of page) https://studioakademi.com/ On scrolling, the letters in words switch from a glyph style font to the actual font. I’ve viewed the source code but can’t see any clues as to what’s making this happen. I’m pretty sure that Webflow won’t let me switch fonts on scrolling, am I right? If so, can anybody suggest a script that will do this that I can embed? Or suggest some other way of doing it? It’s a tricky one.
Here is my public share link: LINK
(how to access public share link)
Hey @grantsenior
My suggestion would be to have two text elements in each section (scroll triggers) with the different fonts applied. Then use a scroll interaction to hide/reveal the two texts as desired. Then use something like typed.js to animate the second title. There are a number of topics about this script already.
https://discourse.webflow.com/search?q=typed.js
There is another way to do it if you don’t have too many headers or pages to do this for because it is more of a manual process. You’d need to make each letter of both words individual elements and then hide/reveal each letter via scroll interactions. Make sure to use a monospaced font if you don’t want the length of the word jumping around with each letter reveal.
This is basically how they did it in your example. They have a span on each letter character and use css animations. No scripting that I could find. See below.
Hope this helps. I might have time later to do a mockup of the 2nd option if you’d find it helpful.
Hi Matthew,
Thanks, really appreciate your input! It is helpful.
The second option I considered, but there will be at least 11 titles (peoples names) on one of the pages which seems like just too much manual animation to handle, especially as the first and last names will be on separate lines. Another thing to consider is that the list needs to be Collections managed so that’s just not going to work in this case.
You can see what I am wanting to achieve with this, here. http://48-shortland-3e3dd92d66d2401a386f2a23a1.webflow.io/
The home page has the layout that I’m aiming for, the Collection Test has the Collections with all items on the page. I’m ok on animating things on/off with the page scrolling but would you mind explaining with a bit more detail how I would go about getting the two name font elements to animate on/off? Do you mean, when the section housing the list item is on screen it ‘triggers’ the on/off name elements?
Cheers
I thought that might be the case, so you’d be better off using typed.js or custom interactions.
Here’s what I’m trying to suggest.
When section-1 scrolls into view the heading animates into section-1-glitch-heading which then animates into section-1-heading. Rinse and repeat for each section.
The “animates” part is where you can be creative in how each text is revealed.
