Search the Community
Showing results for tags 'svgmorph'.
Found 7 results
-
Hi, Just subscribed as to Shockingly green account. Love how easy this is Sorry if this is a dumb question but I don't quite understand how to download and install the SVG morph plugin? I click the download button on the plugin page and use the cdn links but that doesn't seem to include the bonus plugins like SVG Morph. Please advice. Thank you! Yan
-
I am having trouble figuring out how to reveal the text and photo with the morph svg as a clip path. I just need the lower part of the svg to reveal the text/image. I tried using an inset clip path but it did not work well. Is there any good examples of svg morphing clip path? Thanks!
-
Hello everyone! I need help with animation performance on RETINA display I have a swiper slider and on slideTranasitionStart I'm animating a mask (covering the whole slider). The animation is very smooth in all browsers. I'm using an external monitor for work but as soon as I drag the browser window to my retina display (MacBook Pro -Retina, 13-inch, Early 2015, macOS Mojave) the animation looks very laggy (lowest fps is around 5-6!) ! I tried 2 main options to do the animation: Adding classes to transform the mask (and only using the most performant css properties transform and opacity on the animated elements). For this option I tried adding will-change property on the animated elements, I replaced translateX with translate3d, I only added transition on the transform property. Using morphSVG plugin to achieve the transforming of the mask (in the codepen demo I'm using this option as it's way less code) Unfortunately both options are still laggy on retina display. Nothing seems to improve the performance on the retina display and I'm running out of options. I'd be very grateful if someone can help out! Thank you -
Hello, I have two master timelines in my Pen, independent of each other, work on different paths: Timeline 1) Face fading out / morphing and blowing bubbles - timeline's progress depends on mousemove. Timeline 2) Epaulettes ("feathers" on shoulders) staggering animation - independent timeline, runs in a loop in the background, starting when DOM is loaded. Everything runs fine when I have just the face morphing + bubbles animation. Problem: When I add the "feathers" on shoulders animation, the face morphing goes totally wrong. All the paths which were supposed to be morphed, are morphed to the neck path coordinates! Why this thing happens? These are two unrelated timelines.. This is how it's supposed to work, no epaulettes animation yet: This is how it's supposed to work, no epaulettes animation yet VERSUS: Another timeline added (epaulettesTL), morphing goes wrong: Another timeline added (epaulettesTL), morphing goes wrong -
Dear support, I am new to GSAP and I consider to become member of business Green, because I am amazed by GSAP's potentional for animation. I am especially interested in the SVGMorph plugin. Ideally I would want to try this: (If it's allowed with the license) Is it allowed with the business Green license to create software plugins from the GSAP library ? 1. Am I allowed to use the (unaltered) GSAP library and the (unaltered) SVGMorph script to create a small custom app that outputs svg data. 2. Use this output svg data from the custom app to drive vector animation tweening in an animation software. We only intend to use this internally in our animation studio as a tool for the production of rendered animation. We don't intend to sell or publish this custom app. We simply love some of the tweening features of GSAP and would like to add them to our tools, but we don't animate for web/SVG. Is this possible with the business Green license or am I infringing on the copyright? Thanks in advance, Sincerely, Jeroen Koffeman -
Hi All, I'm fairly new to JS, so I'm sure I've made a silly mistake. But I am unable to get a morph tween to trigger using ScrollMagic. What I want to do is fairly simple, I have an svg ribbon made up of three paths, I want to morph the first two into the third as a user scrolls. I've watch and read lots of tutorials, but can't see where I am going wrong. Thank you in advance. Ritch
-
I am trying to make an arrow flip horizontally using SVGMorph... however, it doesn't look like it's flipping. I tried changing the ShapeIndex but there's none that will make the flip look natural. Codepen: http://codepen.io/anon/pen/dGbOLZ Is there a better technique to do an SVG flip that will work on all browsers?
