[Hittest only working on the first instance]

That's amazing! Adding the active class was genius. I had started down a rabbit hole of trying to get the currently animating element in the timeline. This is much simpler. Thank you so much, @OSUblake!

[Hittest only working on the first instance]

Hi again, in my codepen example - hittest works as expected but only in the first instance. What would be the recommended way to detect a collision with multiple dynamically created elements?

See the Pen eYeKypy by njvan (@njvan) on CodePen

[fromto after creating element can't be found]

Thanks so much for the information as well as the solution. I hadn't realised I was mixing syntax. Very much appreciated!

[fromto after creating element can't be found]

11 hours ago, GreenSock said:

Hi @njvan. Welcome to the forums. 

 

We'd be happy to take a peek if you can provide a minimal demo - it's just not feasible to glance at a small code snippet and accurately diagnose the issue. 

 

My guess is that your "elementName" variable isn't legitimate. Perhaps you meant to prepend it with "#" because it's an ID? In other words, a selector like "note1" isn't valid - maybe you meant "#note1" or ".note1" (id or class)? 

 

Thanks for the welcome and the link to set-up a pen!

 

I have done so here: 

See the Pen eYeKypy by njvan (@njvan) on CodePen

 

Thanks for the assist!

[fromto after creating element can't be found]

Hey all,

 

I'm playing around with GSAP trying to get a Guitar Hero-style effect work. The note div gets added to the tracks (the four vertical columns) successfully at the right time (with tl.call and tl.set), but tl.fromTo isn't working as the element can't be found. Any idea why?

 

Thanks for the assist. 

 

function addToDom(track, i) {
    var innerDiv = document.createElement('div');
    innerDiv.className = 'note';
    innerDiv.setAttribute("id", "note" + i);
    const iDiv = document.getElementById("track" + track)
    iDiv.appendChild(innerDiv);
}

function addtoTL() {
    for (i = 0; i < this.testNoteTrack.length; i++) {
        tl.call(addToDom, [this.testNoteTrack[i].track, i], null, this.testNoteTrack[i].time);
        var elementName = "note" + i;
        tl.set(elementName, {top: -150}, this.testNoteTrack[i].time);
        tl.fromTo(elementName, {top: -150}, {top: this.viewHeight + 150, duration: 2, ease: "none"});
    }
    tl.play();
}