Data-pg-ia attribute

Pinegrow Interactions Add-on
#1

Hello Pinegrow Community. I’m new to Pinegrow Software, i’m trying to do some tests with the trial license (Thank Pinegrow Team to make a longer license, after asking).

I have a question about the data-pg-ia attribute. I found the Interaction add-on easy to use. And I would know if it is possible to interacte with elements without the use of the attribute data-pg-ia? In a js file for example?
Because with data-pg-ia, the html code become difficult to read or to use it in a CMS (modx) for example.

#2

Hi @Jerome,
The interactions plugin includes the GreenSock library. Part of the fee you pay is for the licensing of that library. If you look at the terms of that license you will see that you are only allowed to use this library in your projects if you use the Pinegrow interface, not if you control the GreenSock library directly through JavaScript. Sorry.

EDIT: Not much to be done about code readability, but just looking at MODx, I don’t see why you can’t load in the JavaScript to power Interactions there.
Cheers,
Bob

#3

Hi RobM. Thanks for your answer.

With Modx, of course, I can do it. My question was more on readibility of code, if it is possible to have with the Pinegrow Interface the interaction inside a js file instead of the data attribute.
Because it seems possible to use API to call interactions, so with javascript, I thought it was possible to Pinegrow to make directly interactions inside a js file or inside a script tag.

#4

Hi @Jerome,
Pinegrow can’t do this automatically, but I guess you could move the data-pg-ia into a custom script and inject it back onto the page with JavaScript.
Cheers,
Bob

#5

I am currently in the same situaiton as @RobM was.
Just testing out Pinegrow and playing a little around with everything, also the interactions.

I found it is a massive tool but I also have a big problem with it. The data-pg-ia attribute.
It bloats the HTML massively, if you implement more than a couple interactions.

There has to be a way to kind of shift it inside a JS file or something other external.
I mean, setting a unique animation ID which gets injected into the HTML to get the connection to the animation would be totally fine, but unfortunately there is no way I am able to use Pinegrow with that behaviour.

It seemed to be the tool I always dreamt of, but this is a no go.

Btw. how come there is no jQuery dependency, when GSAP has that at the same time (as far as I know).

If there is a way to get rid of the messy HTML code when using interaction, please let me know. I feel like Pinegrow is the tool I was always looking for.

#6

Hi Draschel
I found a way I can deal with.
I make my design under Pinegrow, with interactions/animations. Then I add an “Apply to Many” option for each interaction, and I go the options in Interaction Menus (the little tools button) and clic on Generate Script. With this you have a js file with all “Apply to many” interactions, in our case all interactions.
Then I make a copy of my html file, then I delete all data-pg-ia attribute in html and add the js file.
With this, I have a Pinegrow html file, to work with Interactions inside Pinegrow and an other html, I can easily use inside other platform like a CMS.

1 Like
#7

No need for jQuery!
It’s about the previous version but it explains it all!

Compatible with HTML5, SVG, jQuery, Canvas, CSS, new browsers, old browsers, React, Vue, EaselJS, mobile, and more – GSAP gets along with them famously. Use your favorite tools without jumping through endless hoops to ensure compatibility. It even accommodates various transforms (scale, skew, rotation, x, and y) in modern browsers plus IE back to version 9 without requiring clunky browser prefixes and hacks. We worry about compatibility so that you don’t need to. Another HTML5 javascript animation headache solved.

#8

Hey @Jerome

Thanks a lot for your feedback. I actually tagged the wrong person in my post, so I really do appreciate you answered here!

I will test out your workaround and I am really happy you share your personal solution with me / us.
Right now, I have my doubts if it’s really going to work out for me, because it is not that intuitive and it might be difficult to adjust animations after that

@AllMediaLab thanks a lot for the post, will jump right into it to get all relevant info.

I guess using GSAP directly will be a (much?) better fit in terms of code and performance, in addition you are free to add your required GSAP add-ons (per project). Downside is, you won’t have a visual animation builder. Building a timeline with GSAP is also not that difficult. Well, I have to make a decision and I will test Pinegrow for the rest of my trial. At least in terms of the pricing, Pinegrow is a no-doubter. It offers so much ( yeah, on the other side so much space for improvements, especially UI wise).

#9

@Draschel
In the past I managed to extract the inline JavaScript from a Pinegrow Ainimation and have put it in a external script. Works perfect. I also hate to much inline stuff!!! It turns your webpages in to a labyrint :wink:

#10

@AllMediaLab could you be so kind to give me a hint what your workaround was?
The main reason I went full custom development was the always bloated HTML every CMS, Framework, etc. has.

#11

@Draschel

AllMediaLab Bootstrap 5 Template This is a test site I work on:
There is a Pinegrow animation on the scroll to top button at the bottom. It fades in slowly at scroll down and fades out the other wayaround.

There is some minimum inline JavaScript to init.

<button id="go-top" class="scroll-top btn-hover" data-pg-ia='{"l":[{"name":"fade out scroll top","trg":"scrolling","a":"fadeIn"}]}'>
<i class="icon-circle-up"></i></button>

But the main script is here in the top of this script:
https://www.yourweblab.nl/360-final/dist/assets/js/app.min.js

#12

Not working for me unfortunately.
The data-pg-ia attribute seems to be generated inline on front-end, I can’t even see it in my own markup on “apply to many” elements.
I went the exact route you described and yeah, it worked with the script, but there is no difference on my side, generating a script file or doing nothing.

#13

Hi @Draschel, @AllMediaLab, and @Jerome,
I’m always re-learning something about Pinegrow! So there is a partial workaround that might be a little easier than hand editing. First, add “Apply to many” to each Interaction and Scroll Scene, Set the target to be the same as the base animation. Next, click on the wrenches in the Interactions panel, they are in the lower panel next to the search box. From the context menu select “Generate script…”. Give it a name with a .js post-fix. Now you can delete all of the data-pg-ia and data-pg-ia-apply attributes.

Note: editing the animations after this will be difficult, so only perform this action on your final production page or save as a duplicate.
Cheers,
Bob

#14

Hey @RobM. Thanks a lot for another opinion and possible wordkaround here.
I guess this is just the route @Jerome described above.
Having a confirmation here from another user I will try again and give it another shot.

Thanks again!

#15

Hey again.

I guess I figured it out, finally. But there is still an issue.

Can someone point me out, how to see the real HTML markup?
In the preview (e.g. http://localhost:3000/index.html) this is obviously not the final code.
That might be the problem, I still see the “pg-ia”, “pg-ia-scene” “pg-ia-apply”, etc. data attributes, besides “data-pg-collapsed”, etc…
Sorry for that, I am pretty new to Pinegrow. Thanks a lot in advance!

PS: Opening the actual HTML file won’t solve my issue. Still got the full set of data attributes with the inline JS appearing.

PPS: So I just had a look inside the JS file itself. It is just the way designed to work like that.
The thing is, I want to remove the inline HTML Javascript Code.
Is there a way to connect (or refer) the animation / JS Code to the CSS class, instead of just add it inline?
There is no way I am going to use Pinegrow, if there is no workaround for that, unfortunately. Can’t really understand how it was designed like that. This is an HTML nightmare and I am not going to develop full custom projects to have the most clean HTML possible to bloat it with that bevavior.

#16

Hi @Draschel,

Disclaimers: I haven’t used the interactions plugin yet, so I might be wrong below…

My understanding is pg-* attributes are internal to pinegrow… Doesn’t get added to your actual code.

image

If you click on the “Preview page in browser”, this should let you open your page in an external browser. Once you have done that, open devtools and check under “Elements” tab. Do you still see pg-* attributes in the rendered code?

image

#17

Hey @Akayy

I just picked an example from their docs.
What you see is 1 animation, injected in every single element seperately.
Either I don’t get it how this is working or it simply just works like I never ever would work with.

screen-min
screen-min2125×1170 912 KB

1 Like
#18

Hi @Draschel,
Sorry that I missed @Jerome’s answer earlier. So moving the animations to an outside file means that they are injected back onto the page AFTER the HTML load. This means that your page load time won’t be impacted and the associated JavaScript file is both fairly small (so quick to load) and added to the footer, so it won’t impact time to first paint. Your original HTML will stay clean. Basically, it is the same as attaching event listeners to the code elements following load.

@Akayy is correct that most pg-* attributes are removed, but not the ones for interactions.

Cheers,
Bob

#19

Thanks a lot for clearing things up @RobM !
That actually makes a lot of sense and I now feel more confident in the way it works.
Actually a smart approach with more benefits than disadvantages, I really do appreciate.

So just to clarify. Still, there is no chance to connect the animation inside the generated JS file to a specific CSS class inside the HTML, instead of inject the entire JS inside every element with the corresponding CSS class to achieve the same result?

#20

Ohh okay, will be checking out Pinegrow interactions soon, will keep an eye out for this.

Thanks for sharing all these details, quite valuable for the pg team to consume and improve where possible!