Leaderboard

Those values get passed as string. You need to create JSON string and parse it. <div data-from='{"yPercent": "0", "rotation": "0"}' data-to='{"yPercent": "-100", "rotation": "5", "ease": "Expo.easeOut"}'> const from = JSON.parse(el.dataset.from); const to = JSON.parse(el.dataset.to); Double quotes are important, if you don't want to use quotes, you will find some stack overflow threads with regex solutions. You can also encode JSON string from server in PHP, there will be equivalent solutions for other languages.

You just need to pause the timeline so it won't autoplay and get in the way. Does that help?

Hi @greykrav, It's BlackWeekend ... Best regards Mikel

The secret to great morphs (or any animation really) is to take the time to properly prepare your assets. Look at your demo without any morph running. Set the visibility of the #grey to visible and hide the #map. See how that doesn't look like a finished graphic? I think you're looking for a bit much from the morph plugin here. I saw your other question on the thread I mentioned and @GreenSock gave you some good advice there about path to path or concatenating the "d" values. You could also morph the map to the main part of the logo and then draw the outer ellipse separately. When you start morphing highly complex paths, you probably won't get the morph you're envisioning. You'll most likely want to break this into pieces to get the best result. You said you weren't experienced with AI so I'd recommend taking some time to get familiar with it. With proper preparation you can make it look like one piece morphs into multiple shapes. Here's an old demo from another thread, but it shows the basics of a square morphing to/from three circles. If you have a bunch of shapes, you can create a loop to go through them. Here's an examples of that. The bottom line here is the MorphSVG plugin is amazing, but you should always do your best to help it as much as possible. That all starts in your vector software. Happy tweening.

Thanks for the demo. The time value gets recorded when that tween is added to your timeline. It doesn't automatically keep updating. For something like this its best to create a new tween for your timeline or create a new timeline each time you want to play. The demo below calls a function that clears your timeline and puts a fresh new tween inside it i'm using a random number so that you don't have to wait a minute to see a new value. feel free to switch it back to what you had.

Hi, Besides @mikel's great solution for this you can see this sample I made of an endless marquee in React using the modifiers plugin. It shouldn't be too complicated to port this to Vue though and using Draggable to control the position of the elements:

Hi, Without more info about other libraries/frameworks you're using, my guess is that you're using webpack or a CLI that uses webpack for the build process. So perhaps this has to do with tree shaking: https://greensock.com/docs/NPMUsage Scroll down a bit and you'll find the tree shaking part. If this doesn't help, please provide more details about what you're doing, your setup and perhaps a reduced live sample or a setup file to take a look in our local environments for testing. Happy Tweening!!

Hi @tsimenis, Since the cracks still dream of Thanksgiving ... Here, my suggestion // alternative list, if you want the "1" on the first left position list: ["10", "1", "2", "3", "4", "5", "6", "7", "8", "9"] // left: -itemWidth TweenLite.set(this.$refs.list, { left: -itemWidth }) Best regards Mikel

Hi @greykrav, First of all: Your SVG rejects an error message. Probably vectoring problems (too many layers?) . If you start the animation with a delay, an error will be displayed (I use CHROME): You can define stroke and fill in the 'morph tween'. Here is an option, have taken one layer of your logo and set new circles: Try to optimize the SVG. Best regards Mikel

ScrollToPlugin is NOT included in the TweenMax file, so this won't work: //BAD: import { TweenMax, ScrollToPlugin } from "gsap/TweenMax"; But this certainly should work: //GOOD: import { TweenMax, ScrollToPlugin } from "gsap/all"; You could also try this: import TweenMax from "gsap/TweenMax"; import ScrollToPlugin from "gsap/ScrollToPlugin"; You're using files installed via NPM, right? That error message almost sounds like you're using the old UMD files in an environment that's expecting ES6 modules. You don't have tree shaking enabled, do you? It's pretty tough to diagnose blind. If you still need some help, could you provide a reduced test case? Maybe in codesandbox or github?

Hm, are you testing it in codesandbox? If so, that's probably not a good option because that environment seems to require a lot of extra resources (unrelated to GSAP). Or are you saying that your "real" project has performance issues? I tried the demo on my iPad and I didn't notice any performance problems. Remember that typically performance problems have nothing to do with GSAP - it's the graphics rendering in the browser, so try to avoid heavy SVG or changing lots of pixels on each tick. Well, there are a ton of other optimizations you could make, but those are some of the biggies. I'd also strongly recommend animating x instead of margin-left. It's much easier on the browser because transforms don't require a layout recalculation.

@greykrav do you have a reduced test case in codepen that you could share? I suppose if you have matching quantities of paths in the starting and ending groups, you could loop through them and map them to each other (morph each one). But if you're trying to animate entire groups with varying numbers of shapes/paths, it seems like a logically impossible thing to do without some serious hacking (like morphing extra shapes to blank shapes that you fabricate). If you have a bunch of <path> elements that all share the same fill/stroke styles, then you should be able to merge them all together into a single <path> so that you can just feed that into MorphSVGPlugin. Literally just concatenate their "d" values. Again, once I see a demo it'll be much easier for me to offer tailored solutions.

Do you mean something like this?: Notice that your original was using querySelector() which will only get the FIRST match, whereas querySelectorAll() will get all matches but of course you've gotta loop through them to attach listeners accordingly. There are actually a lot of ways you could structure this.

Hi @greykrav Welcome to the forum. You're morphing the #Map into #Logo1, #Logo2 and #Logo3, but there are no paths with those IDs so that won't work. In this fork I've commented out the last tweens and only use the first one that morphs from the map to the logo. You can animate the fill color along with the morph. As you can see in my fork, I've just used red. Regarding the trace feature of AI to convert pngs to SVG, my advice would be not to do that. IMHO you'll be far better off by creating a new vector graphic by manually tracing over your original artwork. You'll end up with a cleaner output and you can properly layer and group elements. Check out this thread for some more info about AI exports. Hopefully that helps. Happy tweening.

Hi @merchantcantos Welcome to the forum. Edge is super duper fussy when it comes to masks. (& many other things) The main thing to try with Edge when you have a drawSVG mask is to add a tiny rotation that will force Edge to draw it correctly. I wrote about that here. Edge also doesn't like when you group things in a mask element. Another thing I always recommend is to mask a group rather than an individual element. Even if you only have one shape, I still recommend grouping it and masking the group. Here's a fork of your pen with those changes. It seems to be working correctly in Edge for me. Hopefully that helps. Happy tweening and welcome aboard.