Data-pg-ia attribute

Pinegrow Interactions Add-on
21

Hi @Draschel,
The pgia.js file that is the interface with the GSAP library scans the document for the pg-* attributes and then does the behind the scenes magic to translate those attribute values to actual GSAP commands. So, right now there is not another way.
Basically, the overall flow is:
generated JS file → injection → consumption by pgia.js → translation and GSAP event listeners injected
Cheers,
Bob

1 Like
22

Hi everyone

Lot’s of things here.
When you watch html code with the browser’s code inspector, html can be different from the Pinegrow html or other code editor. Because it’s the html interpreted by the browser, this html can be modified by php or javascript (for example, js interactions with “Apply to many” and “generate script” add data-attribute with js file in html when browser “read”/interpret the html/css/js)
But the html produce with Pinegrow or code editor is “clean”. And more “clean” if you delete data-pg-ia attributes manually (with code editor) or with @RobM’s method.

For me, an another reason, why generate a js file in Pinegrow for interactions is interesting, is today you can’t say to PG for which breakpoint is the animation (you can activate/deactivate for mobile or computer, but not the breakpoints your work with your css files). With a js file you can. But it’s another story… :slight_smile:

23

Hey @Jerome

I would love to hear how to implement the breakpoints into the JS file, because I found the options inside the interactions menu not sufficient - as you mentioned, only mobile and desktop is available, no chance to set your individual breakpoints.

Thanks in advance :sunglasses:

24

with javascript, you can for example select breakpoint with

if (window.matchMedia('(max-width: 1023px)').matches) {
	// insert here your interactions js code for the window size smaller than 1024px
} else { 
	// insert here your interactions js code for the window size bigger than 1024px
}
1 Like
25

Thanks a lot guys. Seems like there is an active community which helps out each other. This is a great first impression here.
I think I have to get used to the Pinegrow App. Confident it is a powerful tool that will help you to save tons of time in the long-run, as soon as you got to the point of a fluent workflow.

Setting up your own framework and components has the potential to create entire sites with just a few clicks. This is what I am looking forward to.

1 Like
26

Hi all,
While not as many options as some may want, you can customize where the mobile and desktop breakpoints occur. Adding this to the head of your page before the initialization script for Interactions:

<script>
pgia_small_mq = '(max-width:500px)';
pgia_large_mq = '(min-width:1024px)';
</script>

Just change the values to something that makes sense. This would have an animation on either screens smaller than 500px or larger than 1024px. Right now however, I don’t think you can have an animation for three screen sizes - so one animation on small, one on large, and a different one for in between. Only one for large, but no other screen and one for small, but no other screen. Right now the “media queries” are spliting the screen size into below or above 767px. Make sense?

Cheers,
Bob

4 Likes