Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'morph'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. Hi! I just started using the MorphSVGPlugin and I was wondering if I can change the transform value of the path. This is because the viewBox normally is not the same. But to use the plugin I thought I needed the paths to be inside the same SVG tag. Is there any way to change the transform value or the viewBox? For your information I am using ReactJs for this project.
  2. Hi guys, I'm trying to give a color for each path. my issues is the color of the first path is applied to all the rest! thanks very much. site to see the animation: www.mwmtest.com/bio JS: // Signs Anim // var tlBio = new TimelineMax({ repeat: -1, delay: 3, repeatDelay: 0.2, yoyo: true }), earth = document.getElementById('earth'); tlBio.to(earth, 2, { morphSVG: '#fire' }, '+=1').to(earth, 2, { morphSVG: '#water' }, '+=1').to(earth, 2, { morphSVG: '#space' }, '+=1').to(earth, 2, { morphSVG: '#wind' }, '+=1'); CSS: #earth {
  3. Hello Would you please think with me on how to make such animation https://revolution.themepunch.com/bubble-morph-effect-add-on-for-wordpress/ What I found special is that lines connect to each other when they become close and also get separated when moving away. Also about the moving shape, should we create an array of points where the shape morph to or there may be another better way for doing this
  4. GreenSock

    GSAP 2.1 Released

    Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. There are plenty of large and small updates in GSAP 2.1; here are a few highlights... Advanced staggers Advanced staggering makes it surprisingly simple to get rich, organic timing effects with very little code. Each tween's start time can be distributed according to any ease and/or based on how close each element is to
  5. My web development agency is looking for a freelancer to develop a full page slider image with morphing transition. We have a special request from our customer and are not experimented with GreenSock/GSAP. We would like something very similar than https://delcambio.me landing page. We will only need the image morphing transition slider code, that we will implement in our current project (Laravel/HTML5). Project: Start date: mid-March Slider delivery deadline: mid-April Deliver a working HTML file with all assets Specify licences to pu
  6. Hi GSAP community! A huge thank you because thanks to you we can do something beautiful! For the needs of my future company that I am develloper I need to do a scroll action like this example> https://codepen.io/GreenSock/pen/GopRwQ I get there very well except that I wish 1. Have my line continue in draw svg until the end (scene with scrollmagic) 2. Stop the blue circle at a certain position while element 1 continues to end. (scene with scrollmagic too) I can not stop my tween blue... Can you help me ? thank you in advance
  7. Hello I am new to GSAP and wanted to learn how to morph svg shapes with one another while masking an image, I seen a great example of this on codedrops but they are using anime.js where I wanted GSAP as I have already begun to learn an implement things with it. I have tried to change the animejs to gsap with much failings. Could some one please provide an example I can work from like another forum post or tutorial that could relate to what I wanted to achieve or possibly fork the codepen example with some learnings I could take home. Thank you! Adam.
  8. Hi all, I'm trying to make a menu with SVG icons that morph into Xs and back on click. So far I can get them to morph and morph back as the menu closes but I'm stuck on trying to get one icon to revert back to its original shape when I click the other icon. Where am I going wrong?
  9. Hey Guys, I'm new to GSAP and reading through docs to find out if a particular effect can be created with GSAP. The link below shows the animation in motion and I've created most of it except the distortion that occurs when the mouse moves from one section to another. Can this be done with GSAP, if yes, how? https://www.pinterest.co.uk/pin/466755948875173685/?lp=true Thanks.
  10. I'm trying to create a function that would morph through a series of paths to reach destination. The codepen below tries to do that, but does not move. I did a function with just one intermediary (no group) and it works:
  11. Hi guys, I am trying to replicate an effect I have seen implemented with animate.js while using some sort of parallax effect and morph, and would prefer using GSAP for this. Original pen (replicated from a Codrops article on svg Morphing) can be found there: Ultimately, I'd like to "invert" the condition of the effect, meaning that when my mouse gets close to the shape, that shape gets "attracted" or snaps to the mouse, up to a point where it snaps back to original place. Best way to put it, I'd like to make a "Magnetic goo" that's dynami
  12. Hello, All I am trying to do is morph one shape (#step0) into (#fullFace0) after a 0.42s delay for 1s and then into (#fullFace0). I've done this before and I'm not sure what I am doing differently causing it to not work. The paths are all siblings with the destination morphs having display:none. I was getting a weird log in the console, but I looked that up and it was because the Morph plugin wasn't being added properly. That is resolved now, but I'm not sure why this morph isn't taking place. Thank you!
  13. Hello, Morph Plugin is not for free? if not....exist some time unlimited version? Thanks
  14. Super Newbie here, just trying to get the hang of GSAP (which is pretty awesome so far). I wanted to know how these dots can animate until they morph into the letters, ie I don't want them to animate forever and I can't quite get the timing down so they stop once the dot becomes a letter. The other thing is my code is rather large and I assume there is a way to shorten up everything. Maybe wrap functions around things ... Also the fill to white isn't working at the end. Any help is much appreciated! Shawn
  15. First, I want to say thanks for all the hard work put into the greensock tools. It's fantastic. It might be a stretch, but I was wondering if the MorphSVGPlugin might have some method for calculating the difference between 2 svg paths. Essentially, I want to calculate how closely 2 shapes match. Say for example I have a 200x200 square, 300x200 rectangle, and 300x300 star. Comparing the square and rectangle would return a higher accuracy value than comparing the square and star, since the square and rectangle paths match more closely, so to speak. Currently, im just compar
  16. Hi @GreenSock I think about something, but without affecting to your bussiness model, can i do that? I explain this below: Let's say, i creating web-sites, mobile apps, own personal websites with one-off sold, as i know one-off sold doesn't require GSAP license. If i'm create plug-ins (GitHub repo, No-License, without license no-one allowed to use app) for GSAP for myself like morphSVG, drawSVG (i sure your plug-ins great, but my budget not good to be member of Club, thanks to GSAP anyway), i not required to buy license? I can use GSAP for free, usually i'm us
  17. Carl brought up this canvas morphing demo I made... http://codepen.io/osublake/pen/RWeOWX But it's kind of old, so I told him I would make an updated version because doing canvas morphing is much easier now. You no longer have to use an actual SVG path as a proxy to get the transformed path strings. There's an undocumented method that the precompile option uses (pathFilter), so you a can tap into that to get the transformed path strings. // Path strings var path1 = "M300,25l86.6,150H213.4Z" var path2 = "M500,23.92L524.72,74,580,82l-40,39,9.44,55.05-49.44-26-49.44,26L460,121,420,82l55.28
  18. Clms

    Morph SVG Groups

    Hi! I was wondering if there is the possibility to morph groups instead of single paths? Let's say I have two images/groups. Each image consists out of 30-50 paths, organized in two groups (one for each image). Now I would like to morph the first image (therefore group) to the second image (therefore second group). Is there a shortcut or do I have to morph any single path by it's own? Thanks! Clemens
  19. I have a creation that is making use he GSAP premium add-on: morphing. https://www.redgearstudios.com/Working/PitneyBowes/MorphTest/ Seams that this add-on...which i acquired from the Greensock site as a paid premium member. Unit displays in Safari, Chrome, FF. Although in Win7, Win8 & Win8.1 with browser IE11....its a no go! Does the morphing add-on have limitations that aren't fully disclosed on the site? And if they are on the main site....i might have simply skimmed over them...frantically looking for a solution. Any help please!?! Bryan
  20. I am using the morph function to tween from 4 SVG paths to 4 other SVG paths to mimic a vault door shutting. All the paths are morphing in the right way, except for one path. The #doorfront to #doorfront2 paths are morphing in the wrong direction. Can anyone give me a hand? Thanks! bonus help points I need to have the mouse off to open the door back up. I can figure this one out though..... if someone could just help me with the door morphing issue that would be great! Thanks!!!
  21. Hi, Newbee here, I'm looking for the simplest way to toggle back and forth [ morph ] between two svg icons. That's it... Thank you for your time!!!!!
  22. carleaql

    Smooth Morph SVG

    Hello, I'm trying to get a smooth animation with MorphSVG: http://codepen.io/carlbren/pen/pEYkRg The steps should as smooth as these ones: http://codepen.io/waterfallmedia/pen/ZbOjRO http://codepen.io/GreenSock/pen/WQjRXE (see the cape animated with waveSVG which is not supported) http://codepen.io/osublake/pen/meepJE You can see a stop between the steps in my animation. Please, do you have any idea of what I could do to not feel the steps in the animation? Thanks!
  23. Guest

    Morphing along path

    Hey there, I just discovered Greensock yesterday and am so far very impressed! I have a wheel chart (which you can view via the codepen url, although I'm not including the animations because they're tied to my server), that I want to animate in to various states (such as hiding certain wedges or changing the proportions). I'm currently doing all the math for the chart server side and what I'm handing back when I change states is a list updated paths (1 for each visible wedge, just to be clear) for where I want the wedges to end up. I'm using TweenMax.to to morph each wedges "d" attribute to
  24. Hey all, I have a query regarding animating along an SVG path. I have been able to get the circles animated as per the codepen demo but due to the path going in different directions, i'm struggling to figure out what I do with the arrows. Basically, the arrows are down, left and right and I was wondering if there was a way that I could change the direction of these arrows depending on where they are along the path? I just think the animation will look odd when the arrow is animating downwards but is facing right for example. The codepen demo is as far as I have got in terms of
  25. Hello all - I would love some help figuring out the z-index. I have everything like I want, however; the black Nike check is not moving to the front (over top of the yellow check on hover). Take a peek at my codepen, any help is much appreciated! Thank you! nick
×