Jump to content

Codepen Notification

You didn't provide a codepen sample that illustrates the problem. It really helps us quickly identify problems. This isn't mandatory, but it will get you better/faster results. Would you like to add one?

Most Liked Content


#62377 One year of GreenSock forum participation – what I’ve experienced

Posted by PointC on 21 June 2016 - 06:11 PM

A GSAP tale:

One goofy guy’s odyssey from knowing nothing to knowing just enough to confuse himself.

(This is crazy long so feel free to jump to the epic conclusion).

 

Greetings fellow GreenSockers. The end of this week marks the one-year anniversary of my first post on the forum so I thought I’d take the opportunity to share my 12-month story and hopefully encourage others to jump into the conversations around here. Maybe you’ll recognize yourself in some of the things I’ve experienced.

 

My quick history in a nutshell

Web design and coding is a second career for me. After 15 years of owning and operating a photography studio and processing lab (back in the film days - yup - I’m old), the digital camera came along and changed that industry, which necessitated a new career for me.

 

I shifted to video production, which led to motion graphics and finally to web design. Our little agency now offers all those services. The web design clients never needed anything fancy so JavaScript took a back seat to HTML & CSS only sites for a number of years.

 

JavaScript & GSAP: false starts and other obligations

I first discovered GSAP a few years ago, but only tried it briefly. It looked cool, but with the time obligations of field video work and motion graphics jobs, it wasn’t something I could work into the schedule.

 

Besides that, it was JavaScript – too complicated I thought. I knew JavaScript was the third piece of a good web designer’s skillset along with HTML and CSS, but I always convinced myself that I didn’t have the time and the sites we built didn’t need it.

 

JavaScript Books + Classes = Fail

I did make a few attempts at reading some JavaScript books and working through some online tutorials, but it just never ‘stuck’. Maybe the examples were too theoretical and dry or they were the wrong books and classes. I really don’t know, but I abandoned the learning process a number of times.

 

Cut and Paste mentality

Why did I really need to learn anyway? You can just Google what you need, cut and paste some code and presto – you’ve got some working JavaScript or jQuery. I only understood a small portion of what I was cutting and pasting, but hey… it worked so the problem was solved. 

 

That’s how I operated for quite some time.  What’s a loop? What’s an array? What’s an object? Who cares?

 

Wait a minute. This is ridiculous.

Last spring, I was remodeling our company website and I had all these grand visions about making things move and behave in certain ways. Googling for code just wasn’t cutting it. I suddenly felt stupid. “This is ridiculous!” I thought. I should be able to learn how to write my own code.

 

Oh yeah, I remembered that GreenSock thing I had looked at a few times and abandoned. That might work. Maybe I could actually learn how to use it this time. 

 

I become a forum lurker

I started lurking in the shadows of the forum. After reading a lot of posts, I saw people asking many types of questions from simple to crazy complicated (at least to me).

 

Two things I noticed were that every effort was made to find an answer (no matter the difficulty level of the question) and not one post was condescending or snarky. That’s quite rare on the ol’ interwebs, isn’t it? Hmmmm…maybe I’m in the right place.

  

Oh boy… time to ask a question of my own

One of the great things about learning GSAP is you’ll also pick up a lot of other JavaScript and/or jQuery along the way. I kept reading and practicing with some simple tweens, but now I had a question. Dare I post? 

 

I suppose, like many others, I feared looking like an idiot even though the forum members and moderators seemed quite nice and helpful. I do several dumb things every day so you’d think I’d be used to it by now. Oh well, here goes. My first question had to do with the indexOf() a Draggable snap array.

 

Within 30 minutes, Diaco and Rodrigo had posted great answers and neither one called me stupid! Yay – how cool.

 

I get hooked on GSAP and the forum

About that same time, I decided our company should discontinue on-site video production and switch to studio only filming. I got tired of lugging loads of video gear in and out of buildings – it’s quite tiring and as I mentioned earlier – I’m old.

 

This freed up some time and I decided to dedicate that time to learning GSAP and maybe, one day, even helping others. It wasn’t too long and I actually knew the answer to a forum question. I posted some information and wow – a little red indicator lit up on my control panel. Someone liked something I wrote. How fun – I’m hooked.  

 

Carl makes direct contact

I continued to learn and experiment. I posted a few additional questions of my own, but I tried to answer more than I asked. If someone posted a question for which I had no answer, I tried to look it up in the docs and figure it out. Most of the time I was far too slow and Jack, Carl or one of the mods would already have the answer posted before I was done reading the question, but it was an interesting way to learn.

 

I did sneak in a few good answers, which led to a private message from Carl. He thanked me for participating and helping in the forums. I thought it was pretty cool that a super smart guy like Professor Schooff would take the time to do that for little ol’ me. My decision to dedicate time to the platform and forum was reinforced.

 

hdaB73Y.jpg

 

Blake and I have a conversation

I don’t recall if it was a back and forth in a forum post or a private message conversation, but Blake told me something that, of course is obvious, but it stuck with me and is important for all of us to remember. He mentioned that we all enter this learning process knowing nothing.

 

If someone of Blake’s considerable skill level can be humble enough to remember first starting out in code, there may be hope for me after all. I guess if you think about it, there was a time when the simple concept of a variable was brand new to all of us. We’re not born with these abilities. They’re learned and we’re all at different points on the educational path. Never feel stupid for not knowing something.

 

Moderator Promotion

Throughout the last year, I’ve continued to learn and study both GSAP and JavaScript. Some of those books I abandoned in the past even make sense now. I’ve tried to be active in the GS community and answer as many forum questions as possible. If I’ve answered a question of yours, I hope you found it somewhat helpful.

 

I’ve cranked out some fun CodePens and finally started a Twitter account to tweet them out. I am nowhere near an expert with GSAP or JavaScript, but I know so much more than I knew a year ago. Apparently I know enough to be entrusted with a forum promotion to Moderator status. I’m honored to be included on such an amazing team. 

 

12 months down – what’s next?

My agency duties are still numerous so I can’t dedicate full time to coding, but it remains something to which I’m committed and thoroughly enjoy. I started this 12-month GSAP journey just wanting the ability to write my own code rather than cutting and pasting the work of others.

 

I’m confident I have achieved that, but I still have days when a simple piece of code just won’t coalesce in my brain and that can be frustrating. I guess we all have those days, right? I make several mistakes every day, but that’s o.k. too. I learn a lot more from my screw-ups than I ever do when it all goes right on the first try.  I plan to keep learning and getting better and when I get stuck, I’ll be able to get an answer from this amazing community.

 

I’ll continue to give back to the GS community by answering any questions that are within my abilities to do so. 

 

The super mods: Jonathan, Blake, Diaco and Rodrigo

Thank you to my fellow moderators. You guys rock and have taught me so much.

 

@Jonathan – if there is a browser bug, quirk or special fix that you are not aware of, I’ve yet to read about it. Your knowledge has helped me fix many pieces of code before they even became a problem. Plus, if I ever have a question of top/left vs. x/y, I know who I’ll ask.   ;)

 

@Blake – if I could be half as good at coding as you, I’d be a very happy guy. Your work always teaches and inspires me. I don’t think you’re allowed to ever stop posting on the forum or we may all show up on your doorstep and ask questions.  :-P

 

@Diaco – your code is always so concise. I deconstruct some of your pens and am astounded by how much you squeeze out of a few lines. If I made some of your pens from scratch, I’d have 20 variables, 5 loops, 12 tweens and 80 lines of code. You do the same with two variables and 4 lines of code. Amazing stuff.  :cool:

 

@Rodrigo – when searching the forum, I often land on one of your past posts and learn a lot. Your knowledge is vast and I wish you had more time to post around here. Your ninja skills are incredibly strong.  :ph34r:  

 

Our superhero leaders

 

@Carl – I’ve participated in several online forums ranging from graphic design to 3D to video production, but the GreenSock forum is the best and a big part of that is you. You not only provide great answers, but you do it in clever ways with just the right amount of humor thrown in here and there.

 

The collection of videos you’ve made is invaluable and should be mandatory viewing for anyone interested in GSAP. I’ve seen you monitoring the forums at all hours of the day and even on weekends. When you get any sleep I’ll never know, but I thank you for your dedication and sharing your knowledge.

 

@Jack – how you had the vision to start GreenSock and write the first version of the animation platform I can only imagine. I’m glad you did because GSAP is such an amazing collection of tools. The friendliness of the community is definitely following your lead. I don’t understand a lot of what you talk about sometimes, but I know enough to be amazed by your brilliance and talent.

 

You call yourself just a guy who geeks out about code, but you’re more than that. You’re a smart and generous innovator who’s created a special brand and place on the web. I think I can safely speak for the community when I say we all appreciate the time and effort you put into helping us make beautiful and high-performance animations. Thank you sir.

 

The epic conclusion. Well… maybe just a regular conclusion.

If you didn’t read the whole post, I don’t blame you. It’s ridiculously long and I’m just some guy you don’t know so I’ll wrap it up with this bit of advice.

 

Whether you’re a genius or feel like an idiot, it doesn’t matter. Try to learn one new thing each day and before you know it, a year will have passed and all those little bits will add up to new skills and abilities. If you’ve never posted on the forum, please jump in and participate. The more voices we have around here, the more we all benefit. If you need an answer, please don’t be afraid to ask a question.

 

Believe me, I’m just some goofy guy in front of a computer. If I can learn this stuff, so can you.

 

As I begin my second year in GreenSockLand, I’m looking forward to learning more, seeing everyone’s work and answering as many of your questions as I can. This is an amazing community and I encourage anyone reading this to set up an account and get involved. My best to all of my fellow GreenSockers. See you around the forums.  :)

 

- Craig (PointC)

 

PS I made a little CodePen to commemorate my one-year forum anniversary. It’s how I felt before and after discovering the power of GSAP. Enjoy.



#48018 GreenSock Cheat Sheet

Posted by Ihatetomatoes on 19 May 2015 - 08:15 AM

Hi,
Just wanted to leave a link to the GSAP Cheat Sheet in the forums.

https://ihatetomatoe...ck-cheat-sheet/

If anyone has any comments or feedback please let me know.

Happy tweening!

Cheers
Petr
@ihatetomatoes



#53621 Shout out to the moderators

Posted by PointC on 04 November 2015 - 12:34 AM

I saw the tweet today from Greensock recognizing Diaco, Blake and Jonathan for their outstanding answers in the forum which was coincidental timing as I was just thinking what an education it is to read answers from these guys. 

 

I don't know what you three do for a living, but I'm not sure how you get any sleep with work and answering all the questions.  :shock:

 

I, for one, thank you very much for the time you spend educating us mere mortals. :D

 

Of course, Jack and Carl are the superheros that bring us the tools and the forum where the mods strut their stuff - so thank you two for that as well! The forum is so extensive, I rarely have to even post a question as it's already been asked and answered so a quick search is all it takes. It's some of the best education around.

 

My thanks to all of you!



#59280 Looking to learn more about Physics

Posted by OSUblake on 25 March 2016 - 04:13 AM

Hi ads

 

Great question! GSAP has a lot of plugins with physics based properties, but understanding how to use them can be a little confusing if you're not familiar with the concepts behind them.

 

I would start out by learning how to create animations without using tweens. So use something like TweenLite.ticker or requestAnimationFrame to update each object individually on every tick. This will give you a better understanding of how certain values are going to be affected by different forces.

 

To get started, check out... 

 

Ralph Thomas

Definitely a person you should follow on GitHub

 

UI demos

http://iamralpht.github.io/physics/

 

Repo for demos

https://github.com/i...pht/gravitas.js

 

I really love his Gmail demo. I've been wanting to make a GSAP version of that for the longest time, but haven't gotten around to it.

http://iamralpht.github.io/fab/

 

Some of Ralph's experiments

http://iamralpht.github.io

 

Repo for experiments

https://github.com/i...alpht.github.io

 

Verlet Physics

There's a ton of different libraries and resources to choose from, but most are based on Box2D. I really can't recommend one, so I'll just let these demos speak for themselves.

 

Probably the most liked pen on CodePen. Need I say more about the awesomeness of verlet physics?

http://codepen.io/di...ulate/pen/KrAwx

 

I hate spiders. Try to throw the spider of the web and watch him suffer!

http://subprotocol.c...tem/spider.html

 

Bouncy shapes. Drag and throw the shapes around

http://subprotocol.c...ello-world.html

 

Gerard Ferrandez is another person to follow. Here's a demo using a verlet engine he created.

http://codepen.io/ge1doot/pen/wazbjv

 

Another verlet demo by Gerard

http://codepen.io/ge1doot/pen/PqWZvR

 

Phaser

Phaser is in league of it's on. It's a game engine built on Pixi.js, and works great with GSAP. It also has one of the most supportive communities around. There's an endless supply of tutorials created by the community, and being a game engine, there's a ton of physics involved.

http://phaser.io/lea...unity-tutorials

 

Phaser's Box2D plugin with a bunch of different demos.

http://phaser.io/exa.../category/box2d

 

Books

 

HTML5 Animation with JavaScript. This is a MUST HAVE book! I don't think I can stress that enough. When I look at stuff on CodePen, it's really amazing to see how many different people and their work have been inspired by this book. 

http://amzn.com/1430236655

 

Here's the accompanying website and repo for that book. This book has several examples that sound similar to the effect you mentioned, so you might want to check out the demos on that site first.

http://lamberta.gith...tml5-animation/

https://github.com/l...html5-animation

 

The Nature of Code: Simulating Natural Systems with Processing. This is another game changing book, but it's a little more advanced, and is focused on algorithms that can be used to simulate natural systems, i.e. the world around us. Note that it written for Processing and uses Java. I honestly don't know how to use either, but the book is written in such a way that makes it pretty easy to convert what is being shown over to JavaScript. There is also a JavaScript library based on Processing called p5.js which might help out, but again, that's something I know nothing about.

http://amzn.com/0985930802

 

EDIT: You can view this book online here.

http://natureofcode.com/book/

 

Hope that helps!



#57942 SVG Gotchas!

Posted by PointC on 19 February 2016 - 06:12 PM

Quick Tip: Animating dashed strokes with the DrawSVG plugin

I've seen a few forum questions about animating a dashed line in SVGs. The DrawSVG plugin won’t draw a dashed path. If you try, it will remove your stroke dash array and turn the stroke solid. DrawSVG works by making one big dash and animates the offset. But you can create this effect with one extra step during the SVG creation process. Simply create your dashed stroke(s) as usual and then:

  1. Duplicate your dashed path
  2. Remove the dashes of the duplicate
  3. Make the duplicate solid white (very important).
  4. I also like to add a few pixels to the duplicate stroke width for safety

This new solid path stroke will act as the mask for your dashed stroke. This gives you the ability to animate the appearance or disappearance of the dashed stroke by animating the mask path with the drawSVG plugin and maintain full control of the dashed-stroke color, width, dasharray etc.

 

I’ve created a CodePen to show how this can work for basic shapes, squiggly lines and maps.

Behold the amazing, exciting and groundbreaking dashed lines demo:

 

http://codepen.io/PointC/full/zrQLvO/

 

o.k. – maybe it’s not that exciting :-P  Hopefully it helps someone with this type of effect though. 

 

One additional note: my demo utilizes the DrawSVG and morphSVG plugins. You can experiment with these on CodePen, but to use them in the wild you will need a Club Membership - which I highly recommend.

 

Happy animating everyone. 

:)



#57502 SVG Gotchas!

Posted by PointC on 08 February 2016 - 07:46 PM

Animation/Workflow tip: Don’t forget - you can animate the viewBox attribute

I don’t see this technique in practice (or talked about) very much, but sometimes it may be a better solution than trying to scale elements and center them.

 

To illustrate this easy, but powerful method of SVG animation, I’ve made a simple house tour complete with some GreenSock home décor and a few nods to our great moderators. Take a look:

 

http://codepen.io/PointC/full/OMabPa/

 

 

Some additional detailed tips about this process:

 

How do you know the coordinates to use for the viewBox animation?

Using Adobe Illustrator, you can simply view the entire SVG and hover over your desired areas for the viewBox and note the coordinates from the info panel. You can also add a square/rectangle over the area(s) you wish to zoom (make it transparent with a dashed border) and then use the coordinates of that shape as your viewBox data. You can even leave the rectangle/square in place during the animation process so you know you’re hitting the right target and then delete it before releasing the SVG into the wild.

 

Keep aspect ratio in mind when using this technique

If you start with a square (1:1) SVG, you’ll experience the best results if the areas to which you are cropping/zooming are also square. Likewise, for any rectangular areas - maybe start with a 2:1 ratio and zoom into areas that are also close to that as well. You can certainly zoom/crop to other ratios as seen in my simple demo above (two rooms are square like the SVG, but two rooms are rectangular), but it’s something to keep in mind. Also note that by changing the aspect ratio and/or cropping too close to the edge of the SVG, you can end up with some unwanted white space.

 

As usual, IE hates SVGs

You have to remember to set your SVG to overflow:hidden when animating the viewBox attribute in IE or goofy things will happen.

 

Responsive sizing for static web delivery too

You don’t necessarily have to animate the SVG viewBox either. Using different viewBox sizes, you can also show different sections of your SVG for different screen sizes. Show the whole thing to desktop users and crop to the most important part for mobile delivery etc.

 

Finally, go big or go home

Start with the biggest size you think you’ll need for your SVG. IMHO this goes for any SVG, not just those with a viewBox that will be animated. In my experience, you’ll encounter less trouble scaling down than scaling up.

 

 

Hopefully this gives everyone some new ideas.

 

Happy tweening.

:)



#54847 How to access plugins and utils through npm module

Posted by GreenSock on 22 November 2015 - 08:48 PM

I'm so sorry to hear about your disappointment, bigo104. You absolutely can get a refund - in fact, I just issued a full refund on your account.

 

It looks like you joined yesterday and within 12 hours, you complained about us providing no support and called us liars but I didn't see any questions that you posted anywhere. Did we miss something? We're happy to answer any questions you have. And the membership isn't purchased for support - you may have noticed that we do our best to provide support to EVERYONE in the forums, not just people who signed up for Club GreenSock. Most people use our tools and get their questions answered here and never pay us a penny. The club membership is for those who want the bonus plugins, and/or the commercial license, or for those who just want to support our ongoing efforts to innovate and maintain the tools. 

 

We do want to explore what it would take to provide even better integration hooks for tools like Browserify/Node/NPM but I hope we didn't give the impression that if someone joins Club GreenSock, we're guaranteed to implement whatever they ask for into the toolset. We have to really think things through in such a robust system because there are so many moving parts and sometimes implementing a feature may have unwanted consequences elsewhere, so it's not always a super simple thing to "just add package installs support". If you have a specific solution to offer, we're totally willing to look at it. We've also been working on quite a few other enhancements to GSAP since killroy originally posted here - feel free to check out the github repo release notes to see all the happenings. It's always a tough balancing act we have to do with listening to requests, figuring out which features are top priority to implement, keeping file size down and performance top-notch, providing learning resources, etc., etc. We're certainly not perfect, but we're trying hard. 

 

Again, I'm so sorry to hear that we disappointed you. We're passionate about having customers who are thrilled with the value they receive from GreenSock. If you're not in that camp, we gladly issue a refund and wish you luck elsewhere. Like I said, I already issued a refund back to your account. Let us know if there's anything else we can do to earn your trust back. 

 

Happy tweening!



#50618 *** NEW HTML5 Banner Forum ***

Posted by Carl on 18 August 2015 - 02:23 PM

Hey folks,

 

Just want to let you know that we have a new forum dedicated to discussing HTML5 banner issues. Got questions about networks, publishers, specs, tools, best practices, etc? Just jump on over to the HTML5 Banner Forum.

 

As you all know we are at a time when it seems like everyone is making up their own rules and very few companies are taking the lead on providing clear direction. We are hoping that as more of you get into HTML5 banner production this banner forum will be a valuable resource for all of you to share what you have learned and help each other out. 

 

So head on over to the HTML5 Banner Forum, see what's going on and please lend a hand where you can. We're very excited to see how this community grows and we can all learn from each other.

 

Best,

 

Carl and Jack



#44486 SublimeText, Atom and VSCode Snippets

Posted by Carl on 18 December 2014 - 08:01 PM

Here are the snippet files for SublimeText.

Attached File  GSAP_snippets_for_Sublime_Text (1).zip   3.49KB   1678 downloads

 

Instructions:

 

They have been tested in SublimeText2 and we have reports they work fine in SublimeText3.

 



#63134 Multi-colored lines in SVG

Posted by OSUblake on 13 July 2016 - 01:08 PM

Here you go. Each color has to be a separate element, but not every segment, so you can create a loop.

http://codepen.io/os...5c?editors=0010

 

A gradient won't conform to the shape of path, but you can fabricate one using that same technique! 

http://codepen.io/os...8b?editors=0010



#62769 RotationY not working in Firefox, IE11 or Edge

Posted by Jonathan on 05 July 2016 - 12:54 PM

Hello Briony and welcome to the GreenSock Forum!

 

This is more of what is supported in the various modern browsers. The reason why rotationY is not working in Firefox, MS Edge and IE11, is because CSS 3D transforms are not supported for SVG child elements in the SVG 1.1 spec. Since you are trying to rotate on the Y-axis, which will intersect with z-axis on the 3D plane when rotationY is rotated.

 

Firefox and Microsoft honor the SVG 1.1 spec in this regard, not allowing CSS 3D transforms. Webkit based browsers like Safari, Opera, and Chrome will allow certain non-standard illegal behavior for a time and then will remove that non-standard behavior to line up with the spec.

 

So in this case Firefox, IE11, and MS Edge are doing what there supposed to and not allowing CSS 3D transforms on SVG child elements. Firefox, IE11, and MS Edge will allow CSS 3D transforms on the <svg> element, but not their children elements so they adhere to standard SVG 1.1 behavior .

 

You can fake that rotationY effect you were going for on SVG child elements with scaleX since it is a CSS 2D transform property.

 

And get a similar result cross browser:

 

http://codepen.io/jonathan/pen/oLwrpA

 

var timelineOne = new TimelineMax({repeat:-1, yoyo:true} );
//fin
timelineOne
.add(TweenMax.fromTo(".fin", 0.1,
    {
      transformOrigin: "50% 50%", 
      scaleX: 1,
      x:-3
    }, {
      transformOrigin: "50% 50%", 
      scaleX: 0.9, 
      x:-3
    }
));

That is why i always first debug and test in Firefox first making sure how standard CSS behavior will render. Since Firefox always follows the various web specs. Whereas safari, chrome, and opera webkit will always have non-standard behavior constantly adding and removing the illegal behavior confusing web developers and web designers.

 

You will have to wait until SVG 2.0 is out, that will support 3D transform on SVG child elements!

 

:)



#62191 How to create a sortable list with Draggable

Posted by OSUblake on 15 June 2016 - 08:46 AM

I keep getting a lot of questions asking about creating sortable lists with Draggable, so I'm just going to make a post about it.

 

My sortable grid example is outdated, and I no longer use that technique, so I'm not going to update it. It relies on hit testing, which I would no longer recommend doing for grids/lists. A better way is to create a model of your list, and map the location of your draggable to that model.

 

This is real easy to do using arrays. You can use the index of an array to represent a cell location in the grid. Draggable already creates an array for you if you use the .create() method, so you could use that if you really wanted to.

 

But first you need to figure out the size of the cells in your list. If everything is uniform, you could probably just divide the size by the number of items in that dimension. If my list is 400px high, and there are 4 elements, the cell size for a row is 100. Notice how the cell size may not be the same size as your element. The cells are in red.

 

9kORfXv.png

 

 

When you drag, you can figure out the index of a cell like this. 

var index = Math.round(this.y / rowSize);

This can result in errors if you drag outside of your list, so you should clamp the values like this.

var index = clamp(Math.round(this.y / rowSize), 0, totalRows - 1);

function clamp(value, a, b) {
  return value < a ? a : (value > b ? b : value);
}

Now you can easily determine where everything is. 

 

You also need to keep track of the last index, and compare it to the index you calculate while dragging. If they are different, this means your draggable is inside a different cell, so you need to update your layout.

 

Before you can change the layout, your first need to change the items in your array. Here's a function you can use to move stuff around in an array.

arrayMove(myArray, oldIndex, newIndex);

function arrayMove(array, from, to) {
  array.splice(to, 0, array.splice(from, 1)[0]);
}

Now that your array is in the correct order, you can update the layout. If you were using an array of draggables, you could animate the entire layout like this.

myArray.forEach((draggable, index) => {
  if (!draggable.isDragging) {
    TweenLite.to(draggable.target, 0.4, { y: index * rowSize });
  }
});

That's pretty much it!

 

Doing it this way is not only easier, but it performs a lot better, making it really smooth. I made a demo based off of this Framer.js example. It's about 100 lines of code, and is pretty easy to understand. For comparison, The Framer.js example is about 180 lines of code.



#57408 SVG Gotchas!

Posted by Jonathan on 05 February 2016 - 02:50 PM

Hello fellow GreenSockers!

 

I thought i would add my SVG gotcha since this type of thing comes up at least one time a day regarding SVG with GSAP.

 

This is regarding animating SVG elements within an SVG <defs> tag.

  •  If you are trying to animate elements within an SVG <defs> element, then you should use the GSAP AttrPlugin.
     
  • If your SVG elements are not within a SVG <defs>, <symbol>, or <mask> element .. than you should use the GSAP CSSPlugin like your already doing! Which is the default when tweening CSS properties in GSAP.

GSAP is smart enough to know when to use what. But for attributes, wrap your attributes in the attr:{} object when using the GSAP AttrPlugin

 

If you are animating SVG elements and they are nested inside a SVG <defs> element. then you need to animate those nested graphical elements with the GSAP AttrPlugin, instead of the GSAP CSSPlugin. The reason being is that Firefox will honor the SVG spec and will follow web standards whereas webkit browsers like Google Chrome and Apple Safari will allow certain non-standards and non-spec behavior. But will later remove that non-standards and non-spec behavior to line up with the spec, further confusing users / developers.

 

SVG Graphics elements are considered the folllowing:

<circle>, <ellipse>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <use>

 

That is why i always debug and test in Firefox first knowing the expected behavior will line up with the spec, in this case the SVG spec. And then i debug webkit (Chrome and Safari), followed by debugging IE. Doing it that way I guarantee that HTML, DOM and SVG elements will behave according to the web standards, the spec, and cross browser.

 

CSS is not directly rendered inside a SVG <defs> tag. That is why using the GSAP AttrPlugin works, since it animates the attribute values directly.

 

Taken from SVG spec on the MDN (Mozilla Developer Network) website.

 

https://developer.mo...VG/Element/defs

  • <defs>
    SVG allows graphical objects to be defined for later reuse. It is recommended that, wherever possible, referenced elements be defined inside of a defs element. Defining these elements inside of a defs element promotes understandability of the SVG content and thus promotes accessibility. Graphical elements defined in a defs will not be directly rendered. You can use a <use> element to render those elements wherever you want on the viewport.

The same goes for the nested elements within an SVG <symbol> element. So as rule of thumb when animating SVG, if the element your animating is within a SVG <defs> or <symbol> element , then please use the GSAP AttrPlugin. But if it is not nested inside a <defs> or <symbol> element, then you can use GSAP as usual, knowing that it will use the CSSPlugin instead.

 

Hopefully this SVG gotcha can help other when using GSAP, especially for SVG.

 

Happy Tweening :)



#57385 SVG Gotchas!

Posted by Carl on 05 February 2016 - 03:10 AM

Hey all,

 

It should be no secret that GSAP does a ton of work to get around SVG-related browser bugs and some serious heavy lifting to make working with SVG as similar to DOM/CSS as possible. We did our best to outline these strengths here: http://greensock.com/svg-tips

 

However, the workflow of designing an SVG in Illustrator (or other programs) and getting it to play nice can be a little challenging. Why is illustrator renaming my layers? Why did it put a transform on that thing? Why is this thing a path and not a polyline? And of course the SVG spec in general dictates that some things work differently than we may expect and on top of that each browser has its own special quirks. 

 

So if you have a little workflow tip that you think could help others, feel free to post them. I'll leave this post sticky for a week or two and we'll see what we get. If anyone thinks they have enough ammo for a full blog post, feel free to PM me and we can discuss.

 

I'll start by contributing this video by Chris Gannon: 

 

in which he discusses creating a rectangle the same size as your artboard for when you copy elements out of AI and paste them into an editor.



#56801 code hinting for GSAP products

Posted by OSUblake on 18 January 2016 - 08:00 PM

There is something that already does that. It's called TypeScript. It uses types, so it can understand your code. I bring it up all the time, but I don't think that many people actually look into it.

 

Let me just say this first. TypeScript is not another language. Any valid JavaScript is valid TypeScript. This means we can use TypeScript to help out with writing JavaScript. Almost nobody knows that, but I'm going to show you how. 

 

Doing what I'm about to show you is not going to work with every editor out there, so I can't make any guarantees. I used VS Code because it has the most support for this, and it's already setup to handle this kind of thing. At least for text editors. IDEs are little different.

https://code.visualstudio.com/

 

So here's the before image.

 

EAhTKpO.png

 

Notice how it can't figure out what TweenMax and TimelineMax are. However, if you add a TypeScript definition to your project's folder, the editor can reference that file to make sense of every thing. This means it will find bugs and provide auto-completion for anything that is defined.

 

Most defintions can be found in the DefinitelyTyped repository. Just look at how many different JavaScript libraries have TypeScript definitions. They're so many they had to truncate the list.

https://github.com/D...DefinitelyTyped

 

You could download your files directly from GitHub, but that's really not ideal if you are using a lot of different files. Thankfully DefinitelyTyped has their own package manager, TSD, which is going to make the process a lot easier.

 

To get started using TSD, you first need to install Node.js.

https://nodejs.org/

 

If you're on Windows, you're also going to need to install git.

https://git-for-windows.github.io/

 

Now open the terminal/commad prompt on your computer. If you haven't used NPM or the command line before, you're in for a treat. If you're on a mac, you need to google the term sudo because it's going cause problems for you. There's lots of articles and videos out there about how to get around that issue.

 

If you just installed node, make sure NPM is working by typing.

npm -v

It should show you a version number. Now we need to install TSD globally. This is where you are gonig to need to use sudo on a mac. So enter this.

sudo npm install tsd -g

On Windows, just omit the sudo.

 

Now that everything is setup, we can easily add TypeScript definitions to any project. To do that, open up your command line up to the root of your project.

 

Now tsd needs to add some files to your project, so enter this.

tsd init

It should have created a file named tsd.json, and a folder named typings with a TypeScript file in it.

 

wbZCo50.png

 

 

Now we can install the greensock definitions. 

tsd install greensock -rosa

You can install more than one definition at a time. So if you wanted to get the definitions for greensock and jquery, you could do it like this.

tsd install greensock jquery -rosa

Yay, no more command line stuff! Lets get back to coding. Refresh the files in your folder and check out the code editor.

 

 

mDdRYZW.png

 

The editor now knows all the method and properties for GSAP! Of course that's assuming the defintions are correct, but that's another issue.

 

If you don't know what something is, just press Alt+F12. Bam! The definition opens inside the editor, allowing you to explore them.

 

U2Evul8.png

 

You can even add JSdoc comments to the definitions, so everything could be explained just like it is on website. Not only that, but it creates awesome docs. Just look at what gets generated. Pretty freaking awesome.

 

http://definitelytyp...ck/globals.html

 

Only problem is that it's missing JSDoc comments. Adding them is a very time consuming process because you have to copy and paste everything from the website over to the defintion file. I started on it once, but it became very tedious. Need to come up with a better way to handle managing documentation.

 

Whewwww! Ok. I think I covered enough to get you or anybody else who has read up to this point a way improve your workflow.



#56118 Happy New Year!

Posted by Ihatetomatoes on 29 December 2015 - 05:05 AM

A few days earlier I know, but I am off to the beach tomorrow.

 

I wanted to say a big THANK YOU to the awesome GreenSock team.

 

Thank you for all the new features, plugins and the incredible amount of work put into the GSAP tools that make our lives so much easier.

 

Also a big thanks to everyone contributing to this forum for helping newbies and pros getting to know GSAP, brainstorming ideas and for simply being so helpful every time.

 

https://ihatetomatoe...happy-new-year/

 

Happy new year.

 

Petr

 



#54996 Sizmek CDN

Posted by Dipscom on 26 November 2015 - 10:53 AM

Hey guys,

 

I thought I would bump this up and add the following:

 

https://support.sizm...hared-Libraries

 

Sizmek now has an official list of external libraries and their respective CDN links.



#50707 Vote on new feature for staggered animations

Posted by Carl on 19 August 2015 - 06:17 PM

We will be adding a new feature to stagger-based tweens that allows you to specify different values for each tween that is generated. You can provide an Array of values or use a function with custom logic that returns a value. We have proposed a few names to our trusted advisers and 2 rose to the top. Please vote!

 

 

You can see this feature in action here:



#39029 Timelinemax: add classes

Posted by GreenSock on 31 May 2014 - 09:52 PM

I might be misunderstanding something here about your goal, but couldn't you simply do this:? 

tree.set("#map-container", {className:"+=show-map"});

Remember, CSSPlugin allows you to animate between classes, and you can use "+="/"-=" prefixes to do relative values. 



#68280 One year of GreenSock forum participation – what I’ve experienced

Posted by PointC on 21 December 2016 - 07:37 PM

Well, it’s been 6 months since I wrote the post that started this thread and it appears to have been read quite a few times. Thank you to all who commented. I’m glad my story has inspired others to get involved in the GreenSock community.

 

Congratulations to Jack and Carl on the continued development of GSAP. The new CustomEase is absolutely astounding! I’m looking forward to all the new goodies that will come in 2017. Also – a BIG thank you for the honor of producing the explainer videos for GSAP and Club GreenSock. It was such an exciting experience and you two were so much fun to work with.

 

Cheers to my fellow moderators - Blake, Jonathan, Diaco, Dipscom and Rodrigo. You guys are so clever and talented. I keep learning more every day by reading your answers and tearing apart your CodePens. I’m truly honored to be included in such a tremendous group.

 

A shout out to the GreenSock community members. Keep learning, asking questions, experimenting and creating. My original advice still stands. If you’ve never asked or answered a question here, please jump in and participate. We’d love to hear from you.

 

I hope everyone takes some time for fun and relaxation over the holidays.

 

See you all around the forum.

 

- Craig