Is it possible to trigger an SVG animation in Webflow?
I have been trying to build a map that 3D transforms on scroll, but am now thinking that I will have more control if I created it as an animated object (built in Hype or something similar) whose animation is triggered on scroll — if this is indeed possible here.
Thanks in advance
C
Haha… I’ve seen others ask a similar question. Doing something like this is AMBITIOUS with interactions due to the time it can take. I’d be interested in seeing what you choose. I’m more inclined to use a specific animation app then embed. I’m curious to see what you do.
Proof of concept… But I’m not sure I’ll ever be happy with it so plan B would be to create the animation in another app. But I’m not sure if I can trigger the payback in Webflow. Plan C would be to have a weekend off!
https://preview.webflow.com/preview/3d-transform-8f5a5e8c34f6-0333aadc4a662?preview=219d7e699dacbc2aa5f283ff37ccb739
Hahaha! Me too! Dang dude, I would use a simple animation software. There’s a bunch out there. Plus it will be a simple embed and you can add the trigger for page load as custom code. I’m sure someone has a reload snippet.
But okay, I see the graphic, and not thinking this wouldn’t be so bad. I really believe Affinity would be great for this endeavor! So you could create the svg in Affinity Designer (WHICH BY THE WAY IS THE COOLEST NEW GRAPHIC PROGRAM EVER!!) Yep, better than AI and Inkscape.
Don’t know if you’ve heard of them? But they have what are called “Personas”, basically editing feature within the program to separate tasks. This Persona called “EXPORT”. It’s so sweet. You can create slices of an image or graphic. I creates individual layers to export, and when you import they flow back together seamlessly like stitching.
Man, I think this could work! Plus using this, you can lower load size, and move them around individually, so they can have their interaction!! Hmm… I’m thinking this can work!
Yes, I’m familiar with Affinity. My hatred for Adobe’s subscription model means I have my eye on lots of other tools. The map was custom made in Mapbox and then live traced and tweaked in Illustrator to create the SVG. I’ve been tinkering with Hype 3 and Keyshape and just got Beta access to Spirit… otherwise I’ll have to do it in AfterEffects which will ‘just’ be a video. Which would be ok, just lack the ‘delight’ on the interaction.
Gotcha. Hmmm… I think you should slice the image in Affinity because you don’t have to do anything to the graphic. Load as one piece, then create box slices and export individually, then create 3 or 4 horizontal divs in a wrapper, and man I think it will work.
My interest is peaked on how this will look in WF. Plus, if you use IX2, you can change the BG & Opacity in 1 interaction keyframe. Then drop the markers after. Would that work.
This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.
