Manipulating DOM elements with templates using P5 for seamless transitions

kenyanburnham

Before I ask my question I have to do a little explaining...

My purpose and goal for using P5.js to load in templates and display them in the DOM in order to manipulate them to appear as if they are being assembled and dissembled between "god page" transitions (a Backbone Framework). The view for each route would use P5.js's position() method to move the newly copied and created DOM elements to their final resting state on the page by appending them off the visible screen (and promptly disabling scrolling using the overflow hidden method on the body) and then slowly transitioning them back to their intended position on the screen with easement.

Currently I have a non-P5.js version of this where I use a margin large enough not to be visible in a random direction (this part I already have working) and then using the JQuery animate method to slowly reduce the margin making the appearance of DOM elements assembling on the page. Removing the elements from the DOM was easy, but appending them is way more difficult which is why I wanted to use P5.js as the agent that does the movement and transition.

Using JQuery's $.get() method I am able to grab templates from files, then I use P5's createElement() to create a DIV with the template as my content. i.e "createElement("div",template)". From there I am able to give it an attribute("id", "dash1") and append it to the DOM and it renders fine as a DOM element, however, if I create multiple instances of this object the two rendered objects stack on themselves in the body even when I try to append one to the other. I have assigned both an ID attribute, so in non-P5 instances this method of grabbing templates and inserting them into each other would work fine. However, in P5.js I assume the created elements are treated differently in Setup() and I was wondering if anyone would be able to shed some light on the subject.

That was a lot of explanation for a small question, but hopefully it explains thoroughly what I am trying to do.

GoToLoop

That is way above my poor HTML/DOM knowledge! X_X
What I can say is that createElement() returns a p5.Element rather than some raw HTMLElement:

1. http://p5js.org/reference/#/p5/createElement
2. https://developer.Mozilla.org/en-US/docs/Web/API/HTMLHtmlElement

In order to reach the actual underlying HTMLElement, we access it via property elt:
http://p5js.org/reference/#/p5.Element/elt

Also take notice that an id attribute should be unique in the whole web page.
So make sure you generate diff. 1s when setting attribute() for each p5.Element! :-B

kenyanburnham

Apparently it's way above my knowledge as well!

I'll check out the elt property, I had a feeling that it had to do with the format in which it is created, if I had to take a guess I'd probably say the p5.Element is auto-boxed differently from the typical programmatically created elements, which may be why I can't insert other elements inside of it. Seeing as it's not an actual raw HTML Element.

By the way thanks for replying GoToLoop, I appreciate actual helpful input. Hopefully I can figure out a better DOM manipulation/transition with either JQuery or P5 so that we can have seamless transitions between pages.

blindfish

@kenyanburnham: if I've understood your aim correctly then I'd suggest that p5js is not a suitable framework for this task. Despite the blurb on the p5js homepage suggesting it can do stuff beyond the canvas I think this is currently somewhat limited compared to what can be provided by other JS libraries. In terms of DOM manipulation jQuery blows it out of the water; though TBH you can do a lot in vanillaJS these days ;)

From what you describe you could possibly even do this with CSS3 animations: e.g. see 'light speed in' on Animate.css. If performance is an issue then someone was asking about velocity.js (which claims to be faster than CSS animation) here just yesterday.

kenyanburnham

Thanks blindfish! I'll go check out velocity.js!