Streaming live at 10am (PST)

Trigger animation in wf with javascript?

#1

hi i would like to trigger an animation that i’ve made with webflow on form submition i know that there is no option in wf that allows me to achieve this but can i trigger it with javascript ?

#2

Hi @Chougrani_Brahim,

Why not trigger the animation (with a delay) when the submit button is clicked?

#3

Hi @avivtech thanks for your response but i would like to trigger the animation on form succes and form faild on ajax

#4

then this:

#5

thank you for the refferance but i couldn’t find the code of my animation not like it’s mentioned in the thread here what i had found how may i control this with js
actionLists: { a: { id: "a", title: "New Timed Animation", actionItemGroups: [ { actionItems: [ { id: "a-n-3", actionTypeId: "TRANSFORM_MOVE", config: { delay: 0, easing: "", duration: 200, target: { useEventTarget: "SIBLINGS", selector: ".add-cat-container", selectorGuids: [ "987c396d-d7aa-0501-3ac8-ea5a13ed7f7e" ] }, yValue: -100, xUnit: "PX", yUnit: "%", zUnit: "PX" } }, { id: "a-n-4", actionTypeId: "STYLE_OPACITY", config: { delay: 0, easing: "inOutQuad", duration: 200, target: { useEventTarget: "SIBLINGS", selector: ".add-cat-container", selectorGuids: [ "987c396d-d7aa-0501-3ac8-ea5a13ed7f7e" ] }, value: 1, unit: "" } } ] } ], createdOn: 1554245804387, useFirstGroupAsInitialState: false }, "a-2": { id: "a-2", title: "New Timed Animation 2", actionItemGroups: [ { actionItems: [ { id: "a-2-n", actionTypeId: "TRANSFORM_MOVE", config: { delay: 0, easing: "", duration: 200, target: { useEventTarget: "SIBLINGS", selector: ".add-cat-container", selectorGuids: [ "987c396d-d7aa-0501-3ac8-ea5a13ed7f7e" ] }, yValue: 0, xUnit: "PX", yUnit: "%", zUnit: "PX" } }, { id: "a-2-n-2", actionTypeId: "STYLE_OPACITY", config: { delay: 0, easing: "inOutExpo", duration: 200, target: { useEventTarget: "SIBLINGS", selector: ".add-cat-container", selectorGuids: [ "987c396d-d7aa-0501-3ac8-ea5a13ed7f7e" ] }, value: 0, unit: "" } } ] } ], createdOn: 1554245804387, useFirstGroupAsInitialState: false } },