Leaderboard

So, last night I was listening to Jack's awesome interview with egghead.io (https://itunes.apple.com/us/podcast/egghead-io-instructor-chats/id1308497805#) and he started talking about all the unexpected uses of GSAP, and it got me thinking; what have I used GSAP for? And I realized the range is from pretty typical to not so typical! My line of work is for a few large clients. So I've used GSAP on many projects; some externally facing (marketing sites) ... some for "exclusive" groups (targeted marketing), and many internally facing (for very specific groups ... members and employees). So, for the typical stuff, it's Immersive content UI indicators and helpers UX sauce For the not so typical, it get's pretty varied pretty quick! But the one project that sticks out the most is GSAP as the heart of a frontend delivery system (backed by Drupal) that drives a community cable channel for a gated resort community in GA. The Drupal side allows content managers to create and place 3 types of media; image slideshows, video, and embedded (iframed) HTML. They have control over timings and transitions which map out to GSAP, background audio playlists and ducking (the ducking is tweened with GSAP ), and asset publish/unpublish dates. For the embedded HTML ... they are calling in external sites which are slideshows, but managed by another group for another purpose; a real estate listings slideshow of active properties within the community that is displayed on a large screen in their sales office which is ... you guessed it ... GSAP! It cycles through 280 properties (+/- a few) daily; transitioning in a property image, then a delayed detail and pricing overlay slides over a portion of the image. But back to the cable channel ... every asset and configuration managed on the Drupal side is fed through custom template files that generate all the GSAP Timelines and Tweens. It has been running for years and is rock solid! So, my not so typical uses are cable channel programming (in the sense of delivering programmed content), digital kiosks, and digital signage. So, I'm curious ... what have others used GSAP for that might be a little outside the norm?! Edit: I changed the title from "What have you done with GreenSock?" to "How have you used GreenSock?" Upon reading it back some time later ... it occured to me that the title could be implying that something is wrong with GreenSock Of course there isn't!

Hi again @determin1st .. #1 We are helping you... #2 GSAP is already popular and does rule forever This isn't a GSAP algorithm thing . GSAP can only use what CSS property values are reported and computed by the browser, based on how you have your HTML and CSS setup. Like i said above this has to do with the CSS Spec on how height is calculated with box-sizing. As well as how the CSS box-model works. That is the nature of CSS, animating padding will affect height of its parent regardless if box-sizing is used or not Animating anything but transforms and opacity will cause jank (lost frames). Transforms and opacity do not cause a repaint and layout to be recalculated on every render tick frame. Transforms are also better for interface object, since they can animate on a sub-pixel level for silky smooth motion. Whereas padding and other non transform and opacity properties can only animate on a pixel level. And non transform or opacity CSS properties cant take advantage of hardware acceleration (the GPU) for smoother animation. You could take advantage of using transform scale instead of padding. We can only offer advise and solutions, but in the end its up to you. Happy Tweening!

It's not really a GSAP problem, when you animate elements using className, GSAP animates whatever the difference those class create. In your case, you have box-sizing as border-box, which when you change padding causes the height to change. So in order to animate class GSAP MUST animate height, which gives your parent element inline height. So when your child element animates, parent element has it's own height instead of auto height, so it won't animate along with the child element. When animation completes, GSAP like usual will remove inline styles set while animating class which causes the jump. If you put together many such different classes that affect each other or parent and child in MANY different ways then you will see such weird behavior and GSAP can't put logic in the place to address such out of control situations. What you can do is, 1. force height auto by using !important 2. First change padding of parent element and only then animate height of child element. 3. Manually animate height of parent and when animation completes, set height back to auto. 4. Use content box as @Jonathan suggested and as you are using flexbox you don't need to set width 100%, element will set itself to 100% inside the parent.

I think PointC's version is fantastic and meets all the goals. However, this is a fun challenge so I thought I'd just share an alternate approach that adds a touch more randomness and TWICE as many boxes The idea is that there is a function that animates a thing with random duration, delay, and repeatDelay. When the animation finishes it calls that function again and passes in the same thing and animates it again with totally new and random values.

? naming my first kid after you. thank you!

Hi @beau_dev If I understand your question correctly, I think a quick loop through the elements would be an easy way to make it happen without jQuery. Here's a quick example that should be easy to understand. It randomizes the duration and a delay and yoyos the opacity. You could also add each tween to a timeline if you need that kind of control.Hopefully that helps. Happy tweening.

Just be careful about using the jQuery load() event method, that has been deprecated since version 1.3 and was removed from jQuery 3.0. https://api.jquery.com/load-event/ if using jQuery to check window load, please use $(window).bind("load") or $(window).on("load") instead

Hmm... I'm thinking "CC"... Kids, like Adobe CC, will have me paying out of pocket for the rest of my days.

Yep. It's a LOT more complex than you might imagine due to performance optimizations and the flow of code. But I'll spend some more time looking for a way to make it happen (no promises). You can definitely work around it, even in your second example. Here I use an "indexify()" function to which you feed in the elements and the modifiers object and it'll do all that work for you automagically... var elements = [ "#element1", ".stage h1", ".slider .slide span" ]; TweenMax.to(elements, 1, { x: 50, modifiers: indexify(elements, { x: function(value, target, index) { console.log(index, target); } }) }); function indexify(elements, vars) { var a = [].slice.call(document.querySelectorAll(typeof(elements) === "string" ? elements : elements.join(", "))), wrap = function(func) { return function(value, target) { func(value, target, a.indexOf(target)); } }, p; for (p in vars) { vars[p] = wrap(vars[p]); } if (vars.scale) { //scale is an alias for scaleX and scaleY vars.scaleX = vars.scaleY = vars.scale; delete vars.scale; } return vars; } Obviously that indexify() function could be reused as much as you want. Does that help?

This isn't nearly as easy as it may seem due to a lot of performance optimizations and the flow of code. I'll look into it more though and see if there's a way I can do it efficiently, but no promises. I can do that copying of "scale" to "scaleX"/"scaleY" in the next release pretty easily, though, so that should resolve your issue @kreativzirkel. In the mean time, though, here's a way to use a simple function to reduce that code sample you provided: function scaleVars(vars) { vars.scaleX = vars.scaleY = vars.scale; delete vars.scale; return vars; } var tl = new TimelineMax() .from(".elem1", 1, { scale: 0, xPercent: 100, modifiers: scaleVars({ scale: function(value, target) { // some logic return newValue; }, xPercent: function(value, target) { // some logic return newValue; }) } }) .from(".elem2", 1, { scale: 0, xPercent: 100, modifiers: scaleVars({ scale: function(value, target) { // some logic return newValue; }, xPercent: function(value, target) { // some logic return newValue; }) } }) .from(".elem3", 1, { scale: 0, xPercent: 100, modifiers: scaleVars({ scale: function(value, target) { // some logic return newValue; }, xPercent: function(value, target) { // some logic return newValue; }) } }) .from(".elem4", 1, { scale: 0, xPercent: 100, modifiers: scaleVars({ scale: function(value, target) { // some logic return newValue; }, xPercent: function(value, target) { // some logic return newValue; }) } }) .from(".elem5", 1, { scale: 0, xPercent: 100, modifiers: scaleVars({ scale: function(value, target) { // some logic return newValue; }, xPercent: function(value, target) { // some logic return newValue; }) } }); Does that help?

Alright, how about if we follow the pattern of having the function calls scoped to the tween itself (so "this" inside the function refers to the tween), just like callbacks? Here's an uncompressed version of ModifiersPlugin that has that change in place as well as the scale/scaleX/scaleY alias stuff: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ModifiersPlugin-latest-beta.js Better?

Had a bit of time this afternoon ... here is a quick crack at it. A few notes ... the HTML, CSS, and JS are setup to support progressive enhancement. If JS isn't available, you'd simply get a tile with a background image and an overlaid title. Clicking would push through the the target URL. jQuery does some restructuring to get better control from both a CSS and a Tweening perspective. I'm also using jQuery to handle the simple click events. I'm sure adjusting some timings (or even tween orders) would produce a better result ... I haven't gotten there yet Big note ... I wouldn't look it here in the embedded CodePen ... I would go out and view it in a narrower viewport.

Probably not what you'll want to use on this project, but you mentioned Christmas lights so I thought I'd make a little addition to @Carl's 'double the boxes' version. If you wanted to display that bad fluorescent light flicker or maybe lights that were about to short out, you could add a Rough ease to opacity tweens. Happy tweening.

You can do that by using MorphSVGPlugin, which you will need to convert path data into bezier. Then you can move your element along the path. Check animate along the path section in the end of docs https://greensock.com/docs/Plugins/MorphSVGPlugin

@beau_dev So are you naming your first kid as Craig or Carl? Or PointC?

In addition to the usual suspects of ScrollMagic and Waypoints, you may want to check out The Intersection Observer. It's come up in a few threads: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API Hopefully those links give you some ideas. Happy tweening.

And we enter in a new room in this dungeon of discovery... Although the initial battle with the loader has not gone as hoped, the one against the slider has not been too bad. Here is something I managed to whip up from this big project I am working on: The original one is a carousel - I am striping some bits out from it to make it simpler. Again, when I get some downtime I will work a bit more on this and report back. Same with the loader... I will eventually have to build an asset loader for the site anyway so, I'll adapt it to a more generic setup and post it here. We'll get there, folks!

This is great, Shaun! Thanks for starting the conversation and sharing some of the more unconventional uses you've found for GSAP. Hopefully others will weigh in as well. And thanks for listening to the interview. It was a fun one to do.

Thanks for the heads up Jonathan I didn't know it was deprecated.

You know, this is something I've been thinking about doing ever since the App Store update ... I think it would be a great blog navigation element You've pushed me to do it I'll let you know how it goes!

Thank you very much for the detailed explanation, I know understand the code much better. Thanks!

Indeed you do!

That's new, I wasn't aware of having such reputation.

So very cool, Carl. Thank you!

If you can't seem to reproduce the issue on codepen I would suggest trying to isolate the cause in the original by stripping away all the additional animation (x,y transforms etc...) and positioning temporarily to determine if it is the bottom animation alone that isn't working or whether it's combining with another property to cause it.

The way this works is first it adds a css style .js to the document(html) that hides it from view using visibility: hidden while all the assets are loading. window.onload is an event that fires when the assets are finished loading, it's similar to document.ready which you may have seen before but fires later in theory when everything is loaded, including images. On this event we remove the style from the document(html) that hides it and it regains normal visibility by default. As such if you have any javascript that immediately sets or affects visibility or any other style attributes of page elements when it runs, the styles should be in place when the page becomes visible and prevent flash of unstyled content. Some info about it on MDN https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload https://developer.mozilla.org/en-US/docs/Web/Events/load It's also common to see the jQuery load method used for this: $( window ).load(function() { // Run code }); https://api.jquery.com/load-event/

@PointC Ah ha ha! Thanks man ... I just happened to see the post right away! @Sahil's quick-draw speed is legendary ... I don't think I'll compete with that! xD

Look at @Shaun Gorneau work with that shiny new Moderator Badge. Seven minutes from question post to answer. Nice work. Congratulations on the promotion. You've earned it. Now you'll have to test your quick-draw question answering speed skills against a super fast guy like @Sahil.

The problem is you're recreating the SplitText each time the waypoint is triggered. Create it once but trigger the Tween with the waypoint.

@Sahil That's exactly what I was hoping to see as this thread grew

Here is how you can snap on press. Check the comments in demo from following thread, it will explain how it works in details.

A quick and dirty way would be to put simple click targets in those positions and allow a click event to push the knob to those positions. A little CSS to position and hide ... and a little JS to update the draggable object. I'm sure a better method would be to use the Draggable's onClick method to get mouse coordinates and determine the click position relative to the knob and logic to determine the closest snap point. But for a few simple snap-to points, a couple of clickable elements might be what you're looking for. EDIT: Based on your positioning things ... you may want to look at this in CodePen itself ... seems some relative positions are causing the clickable elements to not align. EDIT 2: Reduced your pen down to simplify it for positioning.

I thought of testing performance, and created this demo. I don't see significant amount of drop in the performance on PC. On mobile though (Moto X Style and Chrome CPU throttling), you won't see drop for about 50 elements but for anything more than that your frames start dropping mainly because you are reading values from DOM on every frame. If you decide to optimize further and willing to complicate your code, you need to track your values on resize, scroll or whatever event that causes them to change. So if you don't read values from DOM on every frame then you get about ~50FPS performance for upto 100 elements and it starts dropping after that. So you should plan everything in a way that you won't need to use responsive tweens and use it for only scenarios where it is absolutely necessary.

The best thing to do here for any kind of help would be to distill the problem down in a CodePen. We can then fork and recommend things to fix any issues you might encounter. But, at first glance ... the get rid of the initial flash of the SVG, you can simply use some inline CSS to not display it, add "opacity: 0;" (or visibility: hidden;") to its selector in a style sheet, or load it in with JS within $('document').ready. (I'm sure there are other options I'm forgetting right now). Edit: Dang it ... did it again.

Nice work on the site. Looking good. We really can't investigate a standalone javascript file with 100+ lines of code. However, if you are seeing elements appear on page load before you want to animate them, most often what you can and should do is set their visibility to hidden in the css path { visibility:hidden; } and then in the js when it comes time animate them use TweenLite.set("path", {visibility:"visible"}); It sounds like your page is rendering before the js runs which is typical. So by setting the visibility to hidden via css, they will not be shown on the initial render of the page.

After a while, I finally know what was frustrating me and why the stuff I wrote in functions wasn't responding, and all the stuff with removing, adding, controlling wasn't working as it should - if you will ever have a problem with controlling timelines held in functions be sure to first declare a variable and then assign it to the function that returns your timeline...^_^'' @Dipscom wrote something like var returned_tl = tlReturned(); a tiny bit of code somewhere in the forums and huge thanks for that - now GSAP magic works the same regardless it's in function or not and my code is much much cleaner Thanks again for the help @Sahil

Hello @determin1st and Welcome to the GreenSock forum! I would have to agree with @Acccent regarding height, padding and box-sizing. The box-sizing property takes into account the CSS Box Model. You can see in the CSS Spec for height that when you use box-sizing: border-box that the height calculation of the browser will include the height of the borders. CSS height spec: https://drafts.csswg.org/css-box-3/#the-width-and-height-properties You also have to take into consideration CSS inheritance, and the fact that anytime you change padding it will affect the height of the parent containing element even without using box-sizing. But you can get around this by: using box-sizing: content-box for div instead of border-box. No need to remove or stop using box-sizing. remove or don't use the !important declaration on the height: auto property for .box selector. !important should only be used as a last resort. Just keep in mind that anytime you animate margin, padding, width, height, and border the animation wont be as smooth as animating transforms and opacity. Since anything animated that is not transforms or opacity will cause layout to re-triggered causing jank (lost frames) due to how CSS is rendered. See Jack's @GreenSock article on this: https://css-tricks.com/myth-busting-css-animations-vs-javascript/ See CSS Triggers: https://csstriggers.com/ Also you should set the duration to a lower number. 10 seconds will be a really slow animation, and look like its either broke or nothing is happening. Setting i the duration to something like 1 second or 0.5 second like @Sahil did in his codepen will make it animate better. For full control sometimes its better to just use a fromTo() tween instead of animating classes using className. GSAP fromTo(): https://greensock.com/docs/TimelineMax/fromTo() Happy Tweening!

@kpiraro Sorry for the confusion, I didn't remove unwanted code in my demo. I have commented out everything that wasn't necessary. And following is cleaned up demo. Usually in timeline you use to, from, fromTo, staggerTo, staggerFrom, staggerFromTo to animate anything. The call method gives you opportunity to call any function that will execute normal javascript i.e. non-GSAP stuff. So in this case when first two tweens are done animating the call method calls playVideo function. And inside the function I am using general method to play video. Docs seem to be inaccessible at the moment so I can't post any links but you should visit docs for more details about call method. Hope this clarifies, but feel free to ask any questions if you have anymore doubts.

Hi, The thing is that the `onComplete` callback is being used to mount/unmount the component from the App and the DOM. He's using React Transition Group, which is heavily inspired from Angular's ng-animate (at least the old version of ng-animate when you had to pass a callback to onComplete in order to keep track of things), and honestly my personal opinion is that for a simple mount/unmount toggle He's over-complicating things, because I don't think is absolutely necessary to use the component's lifecycle methods in the animations, react transition group does that for you, but everyone has it's own ways so if it's working for Him, that's great!!. Here are two samples of using GSAP with React and Transition Group. This is a simple component toggle, the component gets animated and when the out animation is complete it's unmounted, when the in animation starts is mounted: https://codesandbox.io/s/yvYE9NNW As you can see the `<Transition>` element is just a high order component that adds some features to the regular component using the `addEndListener` attribute. This sample is a todo list using the same set up. Never mind the code that's commented out, I keep that in case someone needs to use... [sigh] CSS transitions (sorry for using the forbidden language in the forums :D): https://codesandbox.io/s/7Lp1Q8WBA Hope this helps. Happy Tweening!!!

Such a pleasant surprise, @Rodrigo Awesome work! I know none of this React stuff. Thanks for the help!

If you're using an array with the data you'll use as a reference, then there's no need to use an anonymous function in the ref attribute, just pass the property of the element being used in the map helper: const data = [ {id:1, name: 'box1'}, {id:2, name:'box2'} ] data.map( (item, index) => className={styles.box} key={`box${index}`} ref={item.name}; ); Then reference the element following the same pattern: tl.to(this.refs.box1, 0.5, { backgroundColor:"#F19939" }); Keep in mind that the GSAP instance must be created inside the component's that has the node element. Here's a simple example made in codepen. Is not a lot of code so it should be easy to follow: Happy tweening!!

Hi, Basically the ref attribute in React, points to the node element being created and then added to the DOM. When you use a function in the ref attribute, the parameter passed by react is the DOM node being created. Now the problem with that code when used in a map array helper, is that is adding a reference to that specific node in the react component. So every time the map helper runs the reference to this.name is updated to that last element. Therefore when the array mapping is complete, the reference in the component is only the last element. render(){ return( '<div ref={ (node)=>{console.log(node)} }> </div>' ); } //the console will return the <div></div> tag This is perhaps one of the sore spots of animating mapped collections with react, how can we reference all the elements created in the map helper. The main question here is, what type of animation you're trying to create?. If you want to do a one time stagger, then perhaps you could create an array and use the map callback in order to push each node element and do the tagger. If you want to access each element independently, then you should give a unique name to each one in the ref in order to reach them when necessary. Right now I'd suggest that you post back with the type of animation you need and we can take it from there. Best, Rodrigo.

Hi anthonygreco you can do something like this for change child's ease : http://codepen.io/MAW/pen/yyxazm and if you want to have Ease with whole of timeline play , you can do something like this : var tl = new TimelineMax({paused:true}); // add tweens .... TweenMax.to(tl,tl.duration(),{progress:1,ease:Back.easeIn}) http://codepen.io/MAW/pen/ZYMprY