Leaderboard

Oh, but they are. If you know what a percentage is, you're golden. What's 100% of 5? 5 What's 50% of 5? 2.5 What's 10% of 5? 0.5 That's a multiplier, and that's all I'm doing in with the durations in that thread, but I don't do ScrollMagic, so I can't give advice on how to convert it over. However, @PointC has a demo that might be useful.

Parallax movement is very simple. Objects further away from the observer move slower. Lerp your way to glory. While not a scrolling example, it shows how to use a simple multiplier value to set the speed i.e. duration for objects.

Sorry, I'm not following what you're trying to do here. Are you trying to strip away part of the path like this? Hopefully that helps. I'm just not understanding the desired behavior.

Great suggestion, PointC. Jimmi, The reason for this is because some browsers will not report transforms when they are inside a parent with display:none or perhaps they themselves have display:none. Please see this demo below in a webkit browser and open up the console. You will see no style.transform reported. If you remove display:none from the #wrapper rule, then it will work.

Looks good! You can do this instead of using bind if you're using Babel or TypeScript. I think it's cleaner, and it should technically run faster. class ScrollAnimations { constructor() { // 'this' will work without the use of bind this.el.addEventListener('scroll', this.onScroll, false) this.rAF = requestAnimationFrame(this.run) } onScroll = () => { ... } run = () => { ... } } And here's a simple of example of how you can use the scroll position with a timeline.

It looks like you may have saved that pen in a broken state. I wasn't able to see anything at all when I ran it. FWIW I don't think I have any examples of what you describe and it would probably take quite a while to refactor what you provided. Unfortunately we can't offer general coding support and its really hard to know what you mean by make things "more parallax feeling" or "a bit more dynamic possibly". My suggestion for now would be to investigate using the cycle property in a staggerFrom() animation. It will allow you to add whatever variance you want to each animation: https://greensock.com/cycle If you have a question specifically related to GSAP, let me know and I'll do my best to answer it.

Hi @cam obrien Welcome to the forum. I'm not sure I understood the question completely. Is this what you needed? Just an FYI, the drawSVG plugin makes this type of animation easier and fixes browser inconsistencies. More info: https://greensock.com/docs/Plugins/DrawSVGPlugin Happy tweening.

I should also add that the reason this doesn't work is because for a from() tween you need to animate FROM whatever values you specify TO the current values. If the browser won't tell GSAP what the current values are (because the parent is hidden) then GSAP does not have enough information to create a tween.

Have you tried using GSAP to set the scale? TweenMax.set("#inner", {scale:0.5}); Does that help? Happy tweening.

Here's a helper function to respond to media queries. function installMediaQueryWatcher(mediaQuery, layoutChangedCallback) { var mql = window.matchMedia(mediaQuery); mql.addListener(function (e) { return layoutChangedCallback(e.matches); }); layoutChangedCallback(mql.matches); } Example usage... installMediaQueryWatcher("(min-width: 600px)", function(matches) { if (matches) { TweenMax.to(".red", 1, { x: 200 }); TweenMax.to(".blue", 1, { x: 0 }); } else { TweenMax.to(".red", 1, { x: 0 }); TweenMax.to(".blue", 1, { x: 200 }); } });

Not sure how you ended up there, usually you wouldn't want to do that. And no, it is quite different. Instead you will want to use fromTo tween or combination of using 'set' and 'to' tween. Generally you will want to use fromTo tween to keep things more organized. If you are not familiar with immediateRender, when you use set method or define from or fromTo tween, GSAP will set your element to the starting position as soon as that statement is executed. In some cases you want to avoid that so you will set immediateRender to false. Contrary to from, fromTo and set. To tweens animate from their current position to a certain position so they dont have immediateRender. So if you have any kind of delay on the tween your animation will jump when tween will start. Take a look at following demo and video to learn more about different tweens and how immediateRender affects your animation.

Hi @Mauro Bueno Welcome to the forum. You've already declared your variables so the tween target doesn't need to go in quotes. Please try this: tl .to(esqDir, 1, {x:2000}) .from(dirEsq, 1, {x:0}) .to(conteudo, 1, {scale:20}) .to(conteudo, 1, {autoAlpha:0}) or you could write it like this too: tl .to("#esqDir", 1, {x:2000}) .from("#dirEsq", 1, {x:0}) .to("#conteudo", 1, {scale:20}) .to("#conteudo", 1, {autoAlpha:0}) Either way should get you animating. Happy tweening and welcome aboard.

Yep - the 1.95 is the position parameter. https://greensock.com/position-parameter It's a very powerful feature and I'd recommend it over adding delays to tweens on timelines. I think it's a good practice to leave pens accessible so future readers can see the thread evolve from initial problem to solution. If you'll be making changes as the thread progresses, I'd also recommend forking your original pen and labeling it as version 2 etc. It makes it so much easier for others to jump in and future readers to follow along. Let us know if you have more questions. Happy tweening.

Here's a quick fork of your pen with the idea @Sahil mentioned. I added a dragger to adjust the timeScale(). Hopefully that helps. Happy tweening.

Hello again team, I noticed that the URL https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js points to VERSION: 1.18.0, DATE: 2015-09-05, a three-year-old version. I don't know enough about CDN's and whether or not the latest folder in that url is dynamic or static. I noticed this when I type 'TweenMax' into JS Pen Settings in codepen. It autocomplete/suggests the 'latest' url, not 2.0.1 or other. Does this need to be fixed? something I wanted to bring to your attention if it is indeed pulling the wrong JS file. Maybe a dynamic 'latest' was bad practice to auto-pull the newest, potentially breaking features the devs didn't anticipate, and you stopped promoting that URL? If this is the case, maybe get codepen.io to stop pointing to that 'latest' as their default suggestion? Should devs use 'latest' in other libraries? (I don't know what the standard practice for that was/is).

startAt is a legacy property that is really only useful if you want a to() tween to behave as a from() tween as it allows you to specify at which values you should startAt (from). As Sahil mentioned. using set() and then a to() or just a fromTo() is going handle pretty much any situation you need. I don't think startAt is really necessary for anything these days. Definitely check out fromTo: https://greensock.com/docs/TweenLite/static.fromTo() I wasn't entirely sure though what you were asking as neither of the code snippets you posted are valid. to() tweens need a duration bad TweenMax.to(obj, {x:1000}); TweenMax.to(obj, {x:1000,startAt:{x:100}}); proper TweenMax.to(obj, 0, {x:1000}); TweenMax.to(obj, 0, {x:1000,startAt:{x:100}}); A set() is just a tween with no duration. The following 2 lines do the same thing TweenMax.to(obj, 0, {x:1000}); TweenMax.set(obj, {x:1000}); If there's something specific that you can't do with set() or fromTo() or something you need startAt for that isn't working, please provide a basic demo and explanation. We'll be happy to try to clear things up.

Hi and welcome to the GreenSock forums, I really don't have any experience with Bannertime, so I'm not really sure what you are asking. The file you attached is just a javascript file and I'm not really sure what it is supposed to do. Have you tried asking the Bannertime people for help with this? There might be someone in this forum that will be able to help, but we really have to keep our official support focused on the GSAP API. If you have a question about GSAP, it would be great if you could create a simple demo using CodePen, jsFiddle, jsBin or another online editor

It worked!! Thank you so much, Craig

You can create a master timeline and add your child timelines at same position using position parameter. Now if you speed up master timeline both animations will stay in sync. https://css-tricks.com/writing-smarter-animation-code/ If you plan to move that bar that "triggers" the pulse then you will have to perform a hit test to trigger pulse. Easiest way would be to compare x translate.

Take a look at PIXI JS docs and an example that shows how you can have interactive objects. https://pixijs.io/examples/#/demos/interactivity.js http://pixijs.download/dev/docs/PIXI.interaction.InteractionManager.html I didn't understand your rest of the question, I will suggest rephrase your question and try posting it in PIXI js forum. http://www.html5gamedevs.com/forum/15-pixijs/

You can change maxDuration and minDuration while defining the Draggable or you can change it on the fly. You can also perform tests on distance between object and target location inside snap function to set the maxDuration. https://greensock.com/docs/Utilities/Draggable Read 'throwProps' under Config object properties In following demo I am changing minDuration to demonstrate.

JS Bin should work just fine. Here's an example of jQuery and GSAP. https://jsbin.com/cepafenigi/edit?html,css,js,console,output Be sure you're loading the libraries that you need. Here's the GSAP link: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>

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. http://i.imgur.com/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. @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. @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. 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. Edit and Update (July 2020): I just made it to five years of hanging around the forum and you can read the continuation of my journey here. motiontricks.com Finally, without further ado, I introduce you to motiontricks.com - 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.

Regarding banner dev I'm in a bubble. I work from home, my remote coworkers and I are all either Flash expats who now hand code banners or are front end devs that have learned banners. But... I'm also noticing an uptick among some former Flash colleagues touting Animate CC. I feel like they're anomalies, but I could be wrong. I've barely explored Animate. I don't desire to. But I also don't want to ignore a tool if it has a sizable presence in the industry. I'd hate to not get a job because a studio uses Animate and I don't. I pride myself on knowing many disciplines and solutions. My question is... How many of you out there are seeing Animate used as the primary platform for banner development? In studios/departments, among colleagues etc. Is it common, is it rare? Is it 50/50 Note: I realize this forum skews towards hand coding, but we all see what our friends are doing, i want to know what your friends are doing.

We begged, we pleaded, we pressured...but CDNJS flat-out refused to support "/latest/" (despite telling us early on that it was fine to do). Super frustrating, I know. I don't think codepen suggests /latest/ anymore unless maybe it's cached from one of your old selections. I've noticed that they keep those around locally, so if you had linked to a particular version a while back, they assume maybe you want to use that again. Perhaps clear your cache and actively select the newer version next time, and hopefully codepen will update its auto-suggestions for you. We notified codepen a while back about not suggesting /latest/ and I believe they were very accommodating. They usually are. Sorry about any hassles. I wish we could control that stuff but it's out of our hands.

Yeah, that's a known issue. From what I understand, Jack has asked to have "Latest" actually be the latest, but it's not happening for some reason. On CodePen you can use the pull-down and you'll get the actual latest. (2.0.1) Hopefully that helps. Happy tweening.

Another benefit to JS GSAP setting up styles, I often have an initialization function that sets everything in the beginning. If I need to call that function again, it is quite easy to 'reset' everything on the fly. In CSS, I don't even know how you can truly 'start over' during runtime. Thanks!

Generally, I will use GSAP to set() almost every property that I plan to animate. It's easier for me to do that instead of looking through a lengthy stylesheet. Plus you'll never have any conflicts. Of course, there are many properties that will never be animated and I always leave those in the CSS. Happy tweening.

PointC, Yes, setting scale with GSAP fixes my project's bug. Thanks! I guess the reason some browsers don't propagate their styles down through a hidden element is for performance reasons; a hidden element that has no tree to traverse would be exceptionally fast. But when this 'gotcha' happens, oh boy. But how does GSAP keep track of display:none styles when the DOM doesn't; in a separate data field in its own duplicate structure? PointC and Carl, I read here and there on this forum about avoiding mixing CSS with GSAP for positions and rotations, etc. Over the weeks, I have been setting more and more styles using GSAP in the runtime JS and pulling it out of the CSS file. My CSS file is becoming decreasingly small with my JS growing. I have less and less faith in CSS implementation and more in GSAP. Would you argue it is best practice to try to do all styles directly through the GSAP engine if you have heavy use of animations? It is beginning to seem like that.

Happy to help. That's how we roll in the GreenSock neighborhood. Let us know if you have any more GSAP problems or questions. We're here to help. Happy tweening.

@pointC, @Sahil, Thanks to you both. Ok so I've got the idea of a master timeline and triggering tidy functions from the excellent css tricks article. This is where I was at just before @pointC kindly did it for me again!..... // RED DOTS TO RIGHT function dotMove() { var dot = document.getElementsByClassName("animation-inner-dot"); var tl = new TimelineMax(); tl.staggerTo(dot, 3.5, {x: 422, repeat: -1, ease:Linear.easeNone}, 0.7); return tl; } // BLINKING RED DOTS function dotPulse() { var pulse = document.getElementsByClassName("animation-pulse-dot"); var tl = new TimelineMax(); tl .staggerTo(pulse, 3.5, {opacity:0, repeat: -1, scale: 4, delay: 1.95, ease:Power4.easeOut }, 0.7); return tl; } var master = new TimelineMax(); master.add( dotMove().timeScale(0.5) ); master.add ( dotPulse().timeScale(0.5), 0 ); Now from looking at @pointC's pen I could theoretically speed up or slow down an entire animation sequence with something like the following...Basically adjusting the timescale in one place on the master. var master = new TimelineMax().timeScale(0.5); master.add( dotMove ); master.add ( dotPulse(), 0 ); master.add ( somethingElse(), 0 ); master.add ( anotherThing(), 0 ); I think I'm starting to picture how things might fit together in nested timelines as complexity builds. One thing I'm not sure of is in this code from @pointC.... In the "animation-pulse-dot" tween at the end there is the 0.7 stagger delay but what is the 1.95 value doing? console.clear(); var tl = new TimelineMax().timeScale(0.5); tl.staggerTo(".animation-inner-dot", 3.5, {x: 422, repeat:-1, ease:Linear.easeNone}, 0.7) tl.staggerTo(".animation-pulse-dot", 3.5, {opacity:0, scale: 4, repeat:-1, ease:Power4.easeOut }, 0.7, 1.95); And just one last question about the forum in general. What is considered best to do with example pens. How long should they be left in the post so others can see the example relating to the initial question. Really I'm asking at what point is it reasonable to delete example pens form my codepen or should they be left accessible indefinitely. EDIT: I realise what the 1.95 value is. Alternative place to put the start delay.... Many thanks again Mark

Thanks @Sahil - maxDuration did the trick!

I'd recommend waiting for an answer on the Pixi forum. We do have to keep the focus here on GSAP related problems and questions. This is a Pixi and general logic question. Thanks.

Thats because you are changing perspective on mouse event, so change in perspective causes a quick jump. Set perspective outside of event.

@iuscare Actually mouseover and mouseout bubbles so every time you mouse over or out on child elements it will trigger your event listener on parent. Instead mouseenter and mouseleave do not bubble so if you move your mouse on child elements, it won't trigger the event.

Craig you are a lifesaver!! i was losing my poor little mind

Please try the latest version of TweenMax <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script> I made that switch and it all seemed fine in FF to me. Happy tweening.

I would think you could give the anonymous <ul> a class or ID and only target the <a> elements in that list rather than all of the anchors on the page.

Hi @mjwlist I'm not sure I follow the question. Do you want that entire animation to increase/decrease speed? Or did you mean that you wanted to slow the dots horizontal animation, but still have them pulse at the trigger? Most anything is possible. I'm just not clear on the desired outcome here. Thanks and happy tweening.

Hi @iuscare The target of the tweens is undefined the way you have it written. // your target is a let a = el.querySelector('.inner1'); // but your tween is targeting a[0] which doesn't exist .to(a[i], .2, {opacity: 0,left: 15,ease: Sine.easeIn}) GSAP also does not have a stop method so I commented out the lines with that code. I assume you were probably looking for the pause() method? Here's fork of your pen. Hopefully that helps Happy tweening.

Hi @GreenSock, sorry for the late response – was on holidays for the week. I don't know of any risks of adding it to the package.json. I think it would make it much more intuitive to many of us, if it would 'just work', without using the /umd/ files.

Sorry, but I'm not really following your question. It sounds like you may need to read some more about media queries. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries A good article on CSS Tricks https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ If you have any GSAP specific problems or questions, we're happy to help.

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.

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&amp;page=1&amp;order=popularity&amp;depth=everything&amp;show_forks=false

When you tween any elements, GSAP attaches _gsTransform to that element's DOM object. So you can access all the current values by using _gsTransform. For example, var elem = document.getElementById('box'); TweenMax.to(elem, 1, {xPercent: 100}); console.log(elem._gsTransform.xPercent); Will return current xPercent for that element. It can be very useful to access values of elements so you can calculate anything you want. If you are using jQuery, var $elem = document.getElementById('box'); TweenMax.to($elem, 1, {xPercent: 100}); console.log($elem[0]._gsTransform.xPercent); You will have to use index of that element to access DOM object. If you are using Draggable, Draggable.create(elem,{ onDrag: function(){ console.log(this.target._gsTransform.xPercent); } }); So basically you have to access DOM object to further access these values. You can investigate further by checking objects from developer tools and get idea about what values GSAP attaches to DOM object of each element it ever tweens/sets.

Hi Marjan and Oliver, Sorry I wouldn't say hand coding in NOT smart. IMHO hand coding is a the only way to get clean and fast result. It's absolutely possible to create more than 10 sizes for less than 8 hours with hand coding. It's a matter of workflow setup (large screens + graphic editor + IDE + browser) + designing and coding experience + having enough sleep + etc. Cheers Vitaliy

Animate CC and GSAP certainly make it easy to build banners regardless of timeline or coded animation. I use it a lot. I also use GSAP for DOM. I look at the creative and make a determination based on the storyboard frames which tool would serve the animation best. I do prefer hand coding but there are short cuts and conveniences that Animate CC provides that are usually worth the compromise. As long as the end result is within spec, performant and makes the client happy...