Leaderboard

I can't imagine something that wouldn't be compatible with GSAP. Think of it as a generic property manipulator - it can tween any property of any object that JavaScript can touch. It doesn't care if it's a D3 object, a DOM element, SVG, or a generic object. For example: //create a generic object with whatever property you want... var obj = {myProp:10}; //GSAP can tween it: TweenMax.to(obj, 2, { myProp:200, onUpdate:function() { console.log(obj.myProp); } }); As long as JavaScript can touch it, GSAP can animate it. D3 is no exception. Does that clear things up?

I haven't seen any problems myself or had any reported here in the forum. Here's an old ScrollMagic demo pen of mine that I just updated to GSAP 2.0.1 and all seems to be working correctly. If you have a demo that isn't working correctly, we can take a look for you. Happy tweening.

I'm not really sure what the question is here. Are you asking if GSAP and d3 can work together? I don't know much about d3, but there are some CodePen demos using both. https://codepen.io/search/pens?q=d3 gsap&page=1&order=popularity&depth=everything&show_forks=false

Explain which part? The ternary operator? It's a shorthand version of an if/else statement. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator It gives you the same result as this: if (window.innerWidth < 737) { topScroll = 50; } else { topScroll = 100; } For more info about responsive design, I'd recommend an in depth reading of those threads I listed above.

I'd probably just set a variable depending on window width. Maybe something like this: var topScroll = window.innerWidth < 737 ? 50 : 100; // then add it to your tween TweenMax.to(".signup_header", 0.1, {css:{display:"block", top:topScroll}, ease: Power4.easeOut});

Please try creating your timeline outside of the resize function and play/pause it depending on window size. You also have a typo on line 10: // bad tl.pause // good tl.pause(); Happy tweening.

There are numerous threads about responsive animations and media queries. You can use the forum search feature to find them. Here are a few to get you started. Happy tweening.

These threads may help: Happy tweening.

No I'm not using a build system on this project and it was happening in chrome. I tried it again this morning with the same issue. When I'm back home on Monday i'll try and replicate it on Codepen, I suspect it might be a problem this end if Craig's pen works, which I'll have to have look into. Apologies in advance if it wasted anyone's time. Paul

Thanks. It is amazing!

You can also target multiple elements with a tween as well if you want them to share the same animation, giving them a common class or assigning them to an array etc... to create groups of elements.

That'll come down to how you structure your HTML/SVG (or whatever you're animating). With an SVG, for example, you can use the <g> tag to wrap elements and target the child elements individually or as a group. Happy tweening.

Hi @exploitoholic Welcome to the forum. There may be a bit of a misunderstanding here. A nested GSAP timeline isn't the same as a nested composition in AE. A timeline is basically a collection of tweens. You can add any tweens to that timeline and manipulate any properties of any element. You can't animate properties of the timeline itself. You can do certain things to the nested timeline like timeScale(), pause(), play() etc. But you can't rotate or change the opacity of a timeline. All that is done with the individual tweens on that timeline. Does that make sense? Happy tweening.

Happy to help. I'm glad to hear things are starting to click for you. As long as you're having fun with each() loops, here's a bit more info. All the animations don't have to be the same. Sometimes you may want that, but you may also want some variety. You can still have each() do the heavy lifting for you. Using each element's index allows you to create different animations. Here's a version where you can use the index and each 'y' position animation is different. You can also create entire animations and/or properties in arrays and plug those into the tweens based on the index. Here's a version showing the basics of how that's done. Hopefully that gives you some more ideas about what can be done with loops. I'm glad you're now obsessed with GSAP and moving from lurker to a more active status. It really does get more fun as you increase your forum participation. Have fun and happy tweening.

You can add the SplitText animation to the timeline that animates the blue box. That timeline is the same as creating one manually. You can add whatever elements you want, use the position parameter, add callbacks etc. The each() method just does the heavy lifting by looping through and easily targeting the child elements. So, in your example, you can create a a new SplitText from the <h2> in each project tile. You then add that SplitText stagger to the end of the timeline that animates the blue box into view and you'll be all set. Hopefully that helps. Happy tweening.

Hi, Well not the easiest questions because some of them will vary depending on user experience. An awesome bezier example is the following: http://codepen.io/GreenSock/pen/Krfod In my experience bezier is a practical learning, as you code and play with it you'll learn more and more of it. TweenLite and TimelineLite are the more basic tools of the Greensock Animation Platform (GSAP). TweenLite gives you the chance to tween any numeric value you want, for example a numeric variable, but the most common scenario is use it with the CSS Plugin which allows you to pass through the constructor any CSS property; also with TweenLite you can pause(), reverse(), add callbacks and callbacks parameters to the tweens. TimelineLite allows you to sequence any Tween you want and use that timeline like an individual tween, but is a collection of tweens. For example the sequence you see in this link: http://www.greensock.com/gsap-js/ Is a collection of tweens (a bezier tween in there too) and once the timeline is over you can play it again, reverse, pause and restart (among others). TweenMax and TimelineMax extend the abilities of the TweenLite and TimelineLIte. Also in the JS version TweenMax includes a series of plugins (CSS plugin, bezier plugin, roundprops plugin) and TimelineMax, so pretty much TweenMax is a very good compound for almost any of the basic animations. Refer to the API reference to learn more: TweenLite: http://api.greensock.com/js/com/greensock/TweenLite.html TweenMax: http://api.greensock.com/js/com/greensock/TweenMax.html TimelineLite: http://api.greensock.com/js/com/greensock/TimelineLite.html TimelineMax: http://api.greensock.com/js/com/greensock/TimelineMax.html This is the basic for starting with the JS platform: http://www.greensock.com/get-started-js/ The jumpstart is a very good reference: http://www.greensock.com/jump-start-js/ And Carl created a great video to work with sequences: http://www.greensock.com/sequence-video/ In terms of Flash and GSAP JS, here's the thing is a little more complex. Happens that since 2011(if my memory doesn't betrayed me) Adobe stopped updating the Flash plugin for mobile devices (Phones and Tablets), so that pretty much transformed the web development scenario. In some cases some clients can't afford to create a cool animated site in flash for desktops and laptops(the good old way) and a site, coded completely different, for devices. Why I bring the code issue, because in the flash IDE, Flex or Flash builder (or the tool of your preference) you'll do it with AS2 or AS3, while the other site would be in javascript, that means double of time, cost and everything. With CSS3 and HTML5 and GSAP you can achieve a lot of stuff in ALMOST every browser for any device (MAC, Windows, Unix, IOS, Android). I'm pretty sure you catch the emphasized almost, one of the growing pains of this deal is the fact that there's still people using Windows with Internet Explorer 7 and 8; those browsers work in very particular ways and have some issues with some CSS3 transform properties, which makes the creation process a little more complicated, but like I said before, as you code you'll learn what works without any problems and what doesn't. The good thing is that of the major browsers, Chrome, Safari and Firefox are very good in terms of the features they support and for what I've read Internet Explorer 11 has made some very good advances in diminish the features gap. To answer your question directly it'll depend on what your scope of development; I haven't ruled out Flash, because once a client that had a Flash site was on board with paying for an update for the flash site and building an entirely different site for devices. For example people that work in games are still using the flash version of the engine, and the Actionscript forum is very active so that gives you an idea of how much the flash version is still used. Finally in terms of JS vs AS this goes along with the previous answer. In AS you don't have to worry about the visitor's browser while in JS you have to consider it, but there are some very good tools in helping with this, but with AS you can't reach the devices market completely. Basically this is something you have to ponder in every development you make and inform your clients about all the possibilities. Hope this helps, Cheers, Rodrigo.