Search the Community
Showing results for tags 'svgmorph'.
Found 6 results
-
I am attempting to make an svg animation in my nextjs app using GSAP and SimpleIcons wherin one programming language/utility logo morphs into another, and am concerned about the performance on lower-performance devices. Is there a way to, instead of passing the id of an svg path, pass the raw path of the svg as the target, as I don't want to have a 100mb homepage due to there being are a bunch of path elements in the html. I am using canvas drawing for performance reasons and flexibilities sake.
-
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!
-
Swiper slider animation + SVG mask transform performance issues only on RETINA display
petya posted a topic in GSAP
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 -
MorphSVG - paths are morphing wrong when another independent timeline added
AnSVG posted a topic in GSAP
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 -
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?
