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.
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: