dada78

Hi guys, I am working on this app that uses jquery for functionality, however I have never really used it, especially not in conjunction with GSAP. I did get the animation to work thanks to your doc, however I am not clear as to how I would do a GSAP fromTo method using the jQuery syntax. Basically I am trying to use GSAP to animate some jquery modal transitions. To just test that the animation is working at all I used the below .animate method which is animating fine, but what I really want to do is a fromTo animation, where the modal is scaled up from width/height:0 to 1200px x 705px. In my showModal function I have this: var showModal = function () { setTimeout(function(){ //alert("Boom!"); }, 2000); $(options.selector.outer).css('display', 'flex'); $(options.selector.inner).animate({width:"1200px", height:"705px", display:'flex'}, {duration:1000, complete:onShowComplete}); }; Thank you!

Hey Zach, I did that but it tells me the SVG is invalid. I copy and pasted into Sublime, saved as svg then tried to open in Illustrator...

Hey @PointC, this is really helpful, thanks for posting. Would you be able to share the illustrator file for the line with the dots so I can see how the asset set-up is done? I need to create something for a subway map, so it would be good to see how the lines need to be set up in Illustrator. Thanks!

Hi @OSUblake, just saw the stackoverflow you posted! Will check out the variable fonts. Thanks!

Hm, I removed the update function and it does indeed animate the fontWeight: https://codepen.io/dada78/pen/BaBQqNb

Thanks @ZachSaucier that is extremely helpful, but what I don't understand is why I would need to use the update function? I could just animate fontWeight without it? Or is there a difference? Thanks!

HI, this is just a general question in terms of syntax, when animating variable fonts: var tl = new TimelineMax(); tl. staggerFrom(splitTxt1.chars, 4, {fontVariationSettings: 'wght' 700}, 0.01) I assume using 'fontVariationSettings', is not the correct syntax to animate variable font weight ...Any help would be much appreciated! Thanks!

Hi guys, Adobe and Google presented the AMP plug-in for AnimateCC at the Tokyo AMP conference recently: https://youtu.be/3j540p3GxvE?t=3605 for which I provided some animated banner ad examples using the plug-in that you can download with the beta release version. Adobe is working hard on getting it released publicly soon. When using Animate CC all the timeline animations will just be converted to CSS animations as AMP doesn't allow for any JS and has several more restrictions. More about AMP here The reason I have posted here is that as a beta tester I am trying hard to push for the Greensock library to be included as an amp component, as I would think lots of peeps would appreciate the added flexibility and the already established workflow.

Ahhhh! Dang that makes perfect sense! Thanks @PointC

Thanks @PointC! I tried .set(txt1, {perspective:200}) before by using the variable name, but that didn't work, so I didn't even try applying it to the element id, because shouldn't it work the same way when using the variable name instead? Thanks!

I think I found the answer by adding the perspective with browser prefixes to the css: -webkit-perspective: 200px; -ms-perspective: 200px; perspective: 200px; Still wondering why it wouldn't work if I just have the perspective set on the banner div? Thanks!

Hi guys, for some reason I can't get the 3d transform perspective working on my splittext animation - see codepen... It only seems to be working in Chrome / Mac. Any ideas? Thanks!

Thanks Craig!

Hi guys, I am really excited about the newest release of GSAP including the PixiPlugin, but it's not clear to me if it's an EXTRA (for paid members) or comes included in the TweenMax lib? (I am ware that I would need to include the PIXI.js CDN link in my publishing template, just wondering about the GSAP PixiPlugin.js) Finally, would someone be able to share a codepen or .fla canvas file that shows an example of how to use the BLUR filter for example ? Thanks!

Hi guys, I love using AnimateCC in conjunction with Greensock but the only thing that has always been sort of a headache has been how to animate alpha gradient masks. After some trial and errors creating and animating the mask, here is the file I wanted to share with the community, hopefully it will benefit somebody. One important piece of information that the Adobe Support team shared as well was:"Please avoid adding scripts within the mask and maskee symbols or multiple level of nesting within them because they need to be cached as bitmap for masking to work." AlphaGradientMask_radial.fla.zip