Leaderboard

I was on it too. It is because firefox doesn't report measurement when we use getBBox method on hidden elements or in this case line inside the mask. And GSAP uses getBBox because it is not path, so you should convert your line to a path. PS: Yup I have started digging into files, seems fun.

The mighty @Jonathan beat me to it, but I just came to the same conclusion. For some reason the line is throwing an error in FF when it is in a mask. Outside of a mask (or clip-path) it draws fine. Here's the project stripped down to just the problem line and mask. I'm not quite sure what's happening there either.

Hello @zozo and welcome to the GreenSock Forum! The issue your seeing is happening because id #mask9 is a <line> element. It looks like your <line> element (#mask9) for the letter i, is causing this error to be thrown. You can see when i comment out the SVG <line> element (#mask9) and the from() tween for #mask9. The animation does not throw that error. I will shoot a message to the Mighty @Carl and Jack @GreenSock and see if they can see why that happens with that <line> element. Please standby

Hello @mb2233 and welcome to the GreenSock forum! Yes i ditto what @PointC just posted. Your performance issues can be a number of things, like what CSS properties are you animating? What do your tweens look like? But we can know right away if you provide a reduced codpen demo example. This way we can test your code in a live editable environment and see what is happening. Also: what browser and browser version did you see this on? what mobile device? what OS and OS version did you see this on? Happy Tweening

Hi and welcome to the GreenSock forums. As you mention GSAP keeps reference to the DOM nodes so if their aren't in the DOM tree you don't get the cannot tween a null value error. What you could try is run some code in componentWillUnmount in order to check if those nodes are part of a GSAP instance using getTweensOf(). Also since you're using RTG on an entire component, you could create an association between a component and a specific GSAP instance since the component is not in the DOM tree, you could prevent that specific timeline from playing. Another scenario is that some DOM elements of the component being animated might not be present at some point during the component's lifecycle after the GSAP instance has been created?. In that case get the tweens of the timeline and check the target of those to see if they are present in the DOM tree or not. IN this regard you're storing an internal reference in the component's instance using the ref callback. When/if the node is not rendered, that reference is updated or not?. Perhaps you can check that and update everything after a component update. A more detailed information of what is happening React-wise in your app and how that creates the issue would be nice. Happy Tweening!!!

Thank you so much for your all help Sahil!

Was this it?

Great work Jonathan, Sahil, and Craig! @zozo, since you are Shockingly Green you can save yourself some trouble. If you load MorphSVGPlugin you can use its convertToPath() method to fix all those lines. MorphSVGPlugin.convertToPath("line"); test this in FireFox:

Wha, this is great ! I guess I could just change the line element to a path and it would work, but it's great to see every one so reactive and passionate to make tweenmax perfect ! You guys are awesome !

Thank you so much for these very helpful ideas! I'm excited to experiment with this.

Thanks guys. The error was due to a wrong handling of data, the strings did appear but they didn't have their class attribute attached to them, so that caused the error of not tweening. Appreciate your answers!

No problem - it happens to all of us. I've had plenty of those occasions myself

lol.. always the small things, thanks for saving me some additional hours of staring:P

GSAP seems to be doing exactly what you asked, but I believe you're missing a "px" (unit) in your circle value. //BAD: value: `circle(${window.innerWidth * 1.25} at 50% 50%)` //GOOD: value: `circle(${window.innerWidth * 1.25}px at 50% 50%)` Does that help?

Ya you will need Draggable. I added some comments in the demo so you can understand what is happening.

Hi @Blake I moved this thread to the GSAP forum since it wasn't banner specific. You'll probably get more eyeballs on it over here. My thought would be to use a fractal noise pattern as a mask over a solid colored square (or whatever shape you need). That is then placed over the top of the image. By masking a solid colored shape you can easily change the color of the glass if you like. Maybe something like this: I used a fractal noise pattern and blurred it quite a bit so the effect is really subtle. This is a thumbnail version of the actual image I used: You could make the effect much more obvious by creating an image with more contrast. You wouldn't actually have to use a fractal noise pattern. A gradient would work fine too, but I think the fractal gives you more options. With a little extra effort you could add some drips and/or water droplets if you like. Hopefully that gives you some ideas. Others may jump in with additional thoughts. Happy tweening.

Ohk there is too much confusion here. You looked at my demo instead of the comment I linked which had Blake's demo. But forget about it, you will need to study that entire demo before making any changes to it. Now focus on your demo only. In your demo you were supposed to trigger those button clicks. And please avoid editing your demo after posting it. Fork your original demo instead. Also keep in mind, if you practice by copy pasting code instead of trying to understand and learn from it, you will make your life really hard.

Bless you, kind sir! That is it! Thank you so much for being a supreme Jedi

Pretty sweet Jack. I just dropped it into a couple test pens and it works perfectly in FF. ?

Thanks a lot guys ! Carl solution worked for me, I will give Jack solution a try tomorrow !

I think I figured out a way around that odd Firefox behavior, and I posted it to the codepen-only file for now: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js Better?

more on it here too https://stackoverflow.com/questions/51123831/ng-build-prod-cannot-set-property-autoactivated-of-undefined

ahhh... that's right. This has come up before and I forgot all about it. Nice one @Sahil.

@Rodrigo Whoa, that was a warm greeting and a very helpful answer, thanks! My use case is tweening URLs on the whole site. Every page is assembled and disassembled in its own way, it's not just uniform crossfades. This is how the end result should look like and this is the repository I'm working on. I'm still figuring out how to do this; should I use a single timeline, or multiple timelines, or multiple timelines on a single timeline... Any suggestions on how you would approach this are kindly welcome.

Google Ad Manager is just a rebrand of DoubleClick for Publishers (DFP). ClickTag guidelines are here and they're the same as DCM.

I usually just start coding until something looks good. Oddly enough I start almost every project in Adobe Illustrator. Whether it's artwork from a client, stock vectors or my own creation, I like to get it all organized. Making sure everything has a proper ID and group will make any animation work go more smoothly. I try to look at each piece and think whether I'll make it move and if it should be a part of a group that may move as well. I'd rather have extra groups and IDs and not need them instead of a bunch of generic <path> elements. From there I kick out an SVG if it's a web animation or use Overlord for an After Effects project. That process allows me to quickly experiment or show clients a basic overview. I rarely storyboard unless it's a big project with character animation. Happy tweening.

Yeah I tried looking at the JS too, but there's just too much in there. I also don't know if you're using the latest version of DrawSVG. If I understand your question correctly, you should be able to resize the screen while the circle draws and it will look fine.

It would really help if you could create a reduced test case as suggested by the thread that PointC shared. I couldn't easily find the js you are using for that effect on your live site. Should be pretty easy to drop your circle SVG into a CodePen (or similar) with just the pertinent JS code. That way we focus on the code in question, edit it, and provide a solution for you. Thanks!

I'm not sure I follow the question. Do you think you could make a demo for us? Thanks.

Just for comparison, here's a version with a heavy contrast and less blur so the effect is much more obvious. Happytweening.

Hi @reflex Welcome to the forum. The problem is you have a massive group transform on line 10: <g transform="translate(-508 -3551.334)"> You'll need to account for that with an x/y offset like this: var motionPath = MorphSVGPlugin.pathDataToBezier( $("#how-i-do-it__graph__path"), { align: "#how-i-do-it__rocket", offsetY: -3551, offsetX: -508 } ); Hopefully that helps. Happy tweening.

While Doubleclick does not require GWD, they definitely push you towards that solution, and have no active forum for Studio creative. The Doubleclick Studio dynamic template files are from 2014, and from what I can tell, any newer template activity in the database is all GWD. That being said, there is live chat when you are logged into Studio, and they are very helpful, just don't mention Animate. I was able to determine that Animate CC canvas exports can play well with enabler.js, using z-index. You just have to change your images export path to ./ as Studio does not work with subfolders.

I've removed the CSS transitions and created GSAP animations in their place. Not sure the effects and timing are what you're looking for, but it should get you headed in the right direction. http://codepen.io/sgorneau/pen/obwaYJ?editors=001

Hi pnda007 if i understood correclty your problem , pls use svgOrigin instead of transformOrigin , like this : TweenMax.staggerTo('g',5,{cycle:{rotation:[360,-360]},svgOrigin:"90.1 151.9",ease:Linear.easeNone,repeat:-1}); pls check this out : http://codepen.io/MAW/pen/vLKgKq and pls check this blog post about Animating SVG with GSAP : http://greensock.com/svg-tips