Streaming live at 10am (PST)

Triger an animation with an embeded element

Hello!

I’m using a jquery load function with the html embed to get some CMS elements from another page within the same project. The itens are loading, but the animation I made isn’t working on those embeded elements.

I tested the same elements including them outside the embed and it worked fine. Is there a way to load the animation after the jquery inserted the elements on the html embed?


Here is my public share link: LINK
(how to access public share link)

Hey @Vitor_Cordeiro have you tried targeting a class with the interaction and including it somewhere on the page? I’m wondering if the JS for the interaction won’t get published on the page if it can’t see an element with that trigger class since the renderer is unaware of the classes inside the embed element.

The problem is that I’m using this for an accordion. I need the initial state of one of the embeded elements to be zero height/hidden.

But I think the solution you are suggesting would solve the trigger.

EDIT: I tried your suggestion, but since the embeded element forms a list and I want to trigger individual elements on this list, the trigger opens and closes all of the items on the list.

@Vitor_Cordeiro looking at your project, looks like you found a solution that doesn’t use custom code allowing for targeting this element on the interaction. That right?

Would be great if you can share your solution for others who come across an issue similar to yours.

Hey @matthewpmunger ! I tried a solution from F’nsweet, but I’m having the same problem. I still couldn’t figure it out.

Just to make it clear, since it’s a customized solution, I don’t consider it a webflow problem. But, if there’s a way to delay the native animation script load, it would probably work. I’m also in contact with the creators of both solutions to see if there’s a way to make it work.

Thank you in advance for your attention!

:+1: share with us when you do find a solution

Hi @Vitor_Cordeiro here is temporary solution before you will find better. It is very raw and basic setup so feel free to improve it.

const fetchedEl = [...document.querySelectorAll(".sc-content-class-item-wrapper")]

fetchedEl.forEach(item => {
    item.addEventListener("click",()=>{
        //get content element
        const target = item.children[0].childNodes[1].childNodes[1];
        //toggle height
        target.style.height = target.style.height != "auto" ? "auto": "0"
    })
})

Hope that will give you an idea how it can be solved

Hi @Vitor_Cordeiro I have this morning revisit my example from yesterday late night and I have done for you a new example that taking opposite approach. First example traversed DOM from top to bottom but this new example use closest that traverse DOM from bottom to top. So there is no need to find nested childNodes

// get all hidden elements
const contents = [...document.querySelectorAll(".sc-class-item-more")];

contents.forEach((item) => {
// find closest parent element with given class
  const parent = item.closest(".sc-content-class-item-wrapper");
// toggle height on click
  parent.addEventListener("click", () => {
    item.style.height = item.style.height != "auto" ? "auto" : "0";
  });
});

Hey @Stan !! Thanks for your reply. I’m not being able to get it to work. But I’m probably doing something wrong. Where do I put your code?

Hi @Vitor_Cordeiro if you will use it on any other pages you can place it into site custom code ‘before body’ tag. If you will use it only on this page place code in page settings on same place. Dont forget to wrap this code in script tags.

EDIT: if code will be applied only to specific page the code has to be applied to page you injecting elements into DOM.

Hey @Stan , it worked! Thanks a lot!

There’s still some relation with the webflow native animation. If I delete the animation I made on webflow, the list stays open and I have to click twice to get it to work like it should.

I’m not on comp now and I can’t check this as I don’t have permissions to save changes. But easiest way to do it with JS. This mean set animation in CSS and add class with JS. I will check tonight as I don’t have time right now but it should be an easy fix.

HI @Vitor_Cordeiro if you are now online can you turn off animation and comment out function I have provided?

Hey @Stan ! Just did it!

If it’s not too much to ask, there’s an arrow on the right side of each item. I was trying to make it rotate 180 when you click to open the accordion.

Hi @Vitor_Cordeiro I will check it out and let you know later tonight.

hi @Vitor_Cordeiro it seems that you are working on file as I do have inconsistent results when running script in console. Anyway here is simple code added to set init height to zero and toggle arrow.

JS

const contents = [...document.querySelectorAll(".sc-class-item-more")];
contents.forEach((item) => {
  item.style.height = "0";
  const parent = item.closest(".sc-content-class-item-wrapper");
  
  parent.addEventListener("click", () => {
    const arrow = parent.querySelector(".sc-item-class-chevron-wrapper");
    arrow.classList.toggle("arrow-up");
    item.style.height = item.style.height != "auto" ? "auto" : "0";
  });
});

CSS

.arrow-up{
    transform: rotate(180deg);
}

you can add some transtition timing if you need.

1 Like

HI @Vitor_Cordeiro if your issue doesn’t persist feel free to close your request as solved

1 Like

Hey @Stan ! I apologize for the delay. But it worked great. Thanks a lot! I’ll try to upgrade to animate it. Last week, Finsweet introtuced “Atrributes” to replace their CMS Library. I’ll also try it to see if they fixed the animation problem with the nested elements.

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.