Streaming live at 10am (PST)

It is possible to trigger interactions from custom code


#1

Hi there!

I would like to know if it is possible to use Webflow triggers from custom code. What I’m trying to do is to call the triggers to animate elements not supported by Webflow such as SVG code. I want to animate an SVG path using the “While Scrolling in View” trigger.

Is this something achievable or is a well-kept secret by Webflow as is part of the greatness of this tool?

There is no read-only link as I’m still considering to use Webflow or not for the project I have in mind. A close example of what I’m trying to accomplish can be viewed here: https://tympanus.net/Development/StorytellingMap/ (you’ll need to scroll a little bit to see the functionality I’m referring to).

Thank you very much beforehand for your answers.


#2

I would like to know if it is possible to use Webflow triggers from custom code. What I’m trying to do is to call the triggers to animate elements not supported by Webflow such as SVG code. I want to animate an SVG path using the “While Scrolling in View” trigger.

Just to be clear when you say “I want to animated an SVG path” are you referring to moving it along a set path or “I want to change the Path AKA the shape of the SVG”? (see: https://www.w3schools.com/graphics/svg_path.asp).

Webflow can do the former but not the later. From the example you gave, Webflow would be able to make the plane move, grow, and rotate, and make the various elements change opacity and stuff, however you would not be able to replicate the path animation of that green line twisting and twirling and stuff. You wouldn’t be able to do it natively. If you need to do that or something similar then don’t bother reading further since odds are Webflow won’t be the right fit unless you are prepared to do a custom JS integration.

Now if you only need to transform the element (size, position, rotation, scale, ect.) and animate the opacity of the custom SVG you can in fact target it using one of the two options below.

Option 1: Assign a class to the SVG and target that

You can target elements within a custom embed by adding a class to said element. If you add a class called say “animated-this” you can target that class using interactions 2.0 via the “replace elements dialogue”

What you have to do is first create the animation you want to occur using Webflow elements (Probably on a different page that you would hide later or something). And then on the page with your custom elements use the parent section as the interaction trigger and then use the dialogue “replace elements with class” to select the class you want that you added to the custom elements.

class targeting

It’s important to note however that Webflow won’t let you choose a class to target unless you’ve added it within Webflow. So you will will need to add the class to a Webflow element before you can effect anything within an HTML embed.

Here’s a share link so you can see a working example: https://preview.webflow.com/preview/interactions-w-custom-embeds?preview=64e103bc49a36e726226ba59b3378bc2

And here is a link to the live site: http://interactions-w-custom-embeds.webflow.io/

Option 2: Target the SVG's Parent

You don't necessarily need to target the element within the HTML embed itself. You can just target the HTML embed element which will act as the parent of the SVG. So if the embed element is just wrapped around the SVG when you move the parent the SVG will move also. This is probably the simpler of the two options. However it may not be entirely feasible depending on how your website is structured.

Like i said before it depends on your exact needs whether or not Webflow will be the right fit, but hopefully this information helps you :smiley:

#3

Hi @Modii,

thank you very much for your detailed post. I should be more clear about what I wanted. I know I can apply transforms to an SVG element or its parents using Webflow, but what I’m trying to accomplish is to actually animate SVG properties. As you say, I want to change the SVG shape.

My idea is to animate the svg line (change its shape) while scrolling, as the example in the shared URL shows. That’s why I was asking if there is a way to fire triggers such as “While Scrolling in View” from custom code.

Thank you again for your response.


#4

Ah I follow you, I think “animated SVG properties” is probably a better way of referring to it rather than “changing the shape” like I did :laughing:.

But if that’s the case then like I was saying this isn’t possible with Webflow’s native functionality, at least to my knowledge.

It will most likely require a custom JS solution.

Best of luck on finding a solution for your project though