Jump to content
GreenSock

katerlouis

Suggestions for custom Markdown syntax to add ScrollTriggers?

Recommended Posts

Hey folks, long time no read! 

 

As usual I come with a rather complex use case, so a little bit of context might be helpful. As we are pulling more and more content for our website from our cms storyblok, we now have situations where a ScrollTrigger on certain headlines should trigger (or scrub) animations that are sticky right next to the text.

 

Since we support markdown in most of our text fields, my preferred solution would be to enhance markdown with custom syntax. This syntax would need to do two things:

 

  1. Get the resulting dom element (<p>, <h3> for ###, <a> for [http://domain.com] etc.) as trigger element
  2. Get a string parameter I can use in inside of `onEnter()` to call a function or dispatch an event 

 

Point 2. would exceed this post, let's just assume I want to console.log this string parameter.

Point 1. on the other hand is no-mans-land for me, though. Adding custom wrapper syntax in markdown-it is rather straightforward (I hope? :D) if lets say I want to achieve `%%%My custom section%%%` to result in `<section>My custom section</section>` – but I'm afraid that adding functionality to existing wrappers in markdown is a different thing entirely.

 

What I want from you guys now:

a) Syntax suggestion: how would you like to write this

b) Might be off-topic, so bonus points if anybody know how to do this do this for all "normal markdown wrappers" with markdown-it

 

 

Thrilled to hear your thoughts!

Link to comment
Share on other sites

I have no idea as I have done anything like that, but a quick glance at there plugins, landed me at the container one, which you might be able to model something after. So maybe a special token and then right next to it some JSON with options to create your ScrollTriggers.

 

::: { "scrub": true } 
# Hello, World!
:::

 

https://github.com/markdown-it/markdown-it-container

 

Don't know if that would work, but I would focus on way to include some type of JSON object in the Markdown that could be parsed by a special plugin.

Link to comment
Share on other sites

If you made a plugin that adds JSON to an element like this...

<div data-scroll-trigger='{ "scrub": true }'></div>

 

It should be pretty easy to create your triggers, kind of like this...

gsap.utils.toArray("[data-scroll-trigger]").forEach(el => {
  
  const data = JSON.parse(el.dataset.scrollTrigger || "{}");
  
  ...
  
  ScrollTrigger.create({
    trigger: el,
    ...
  });
});

 

Link to comment
Share on other sites

Interesting. I was thinking on creating the trigger somewhere inside the markdown plugin chain, but doing it after the html rendering is complete and looking for data-attributes might be a better way to go. 

 

I also thought about using containers for this. But that would kill our relational margin rules inside markdown (`p + h3 { margin-top: 70px }` etc.)

 

Unfortunately I have no freaking idea how to extend markdown-it myself. The "docs" are terrible. This document suggests that I need to "morph tokens" rather than creating an inline or block rule, but cannot find out on how to do that 😕 – If anyone stumbles upon some resources to extend markdown-it by morphing tokens, I'll give you a cookie!

Link to comment
Share on other sites

Well, I was going to suggest asking the markdown-it contributors for help with how to write plugins...

but... wow... - this is a fun lunchtime read 😬 draaaaama https://github.com/markdown-it/markdown-it/issues/10


Afraid to say this but you'll likely have more help over on stack overflow than in these forums - we try to keep these forums GSAP specific and this question is pretty far from that! There are way more active users on stack overflow and some may have even made markdown-it plugins before.

(Don't reach out to the contributors on that repo though, yeesh.)

Best of luck @katerlouis

Link to comment
Share on other sites

47 minutes ago, Cassie said:

but... wow... - this is a fun lunchtime read 😬 draaaaama

giphy.gif

  • Haha 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×