Leaderboard

Ok, so I did some research on the subject and this whole typescript is quite beyond my area of knowledge. Lucky for me I got in touch with this awesome guy in Reactiflux discord app: Damien Erambert (Twitter - GitHub) and He pointed me in the right direction. Turns out that first of all you need to import the type definitions for gsap from this package: https://www.npmjs.com/package/@types/gsap And then define both the GSAP instance and the DOM ref as the return values of the GSAP instance and the ref. I've updated the stackblitz sample so you can check it. Happy Tweening!!

var tl3 = new TimelineMax({ yoyo: true, repeat: -1 }); tl3.to( '#div3', 3.5, {scale: 2} ) .addPause( 3.5, function(){ setTimeout( function(){ tl3.play(); }, 2000); } ) Yes, that timeline uses a setTimeout() which is 1) generally not reliable 2) not synchronized with the rest of GSAP's tick (or heartbeat) Additionally the function that calls the setTimeout takes some extremely small amount of time to execute, but after hundreds of repeats that time will add up. I would vote for the tl1 or tl4 aproaches.

It works! Thanks a lot!

That might be the case but your project using jQuery does not mean you HAVE to introduce jQuery into a section of code that is already working without it, does it? It would save you a good deal of time if you don't try to convert the demo to use jQuery, just use as is. What do you think?

What is wrong there is that the original demo does not use jQuery and you are introducing it withoug making the alterations to the code that are required. Before we go any further, why are you introducing jQuery in a demo that does not use it, does not require it? Why not use the code as it is?

And we shall be here ready to assist.

Ok... Let's try and work this out together. Do you know whey they are not appearing? It's because of the commented out line bellow. //dots.appendChild(newDot); But even if you do uncomment that line, it does not work. Why? Because 'dots' itself do not exist. Why? Because in the variables definition at the top of you code you have dots = hideMe.find(".dots") But the .find() method from jQuery does not give you a single array of results, it gives you an Object with a property named '0' so, really you want to do either of the following: dots = hideMe.find(".dots")[0]; // Or dots = hideMe.find(".dots")['0']; // However, note that you cannot use the bellow as the key name is a number and will not work dots = hideMe.find(".dots").0; // This will also not work dots = hideMe.find(".dots").'0'; As for the second error, is a bit similar, you are trying to get the ._gsTransoform of an element when one does not exists. You first need to define a GSAP tween on such element before you can access its ._gsTransforms.

Pretty sure with EaselJS objects you have to set scaleX and scaleY independently... they don't have a scale property. For a test do: this.myInstanceName.scaleX = 2 // will work this.myInstanceName.scaleY = 2 // will work this.myInstanceName.scale = 4 // probably won't work

Still, you don't need to create another variable to use the tweenTo method. Also, not what Carl has said up there, you don't want to keep adding a brand new staggerTo every time you call the animateSkeleton. The firs thing I say you need to do is understand the difference between creating your timeline and controling your timeline. They are separate things, you don't want to be triggering changes to your timeline (well, sometimes you do but, in your case here, I don't think so) when controlling the playhead. So, really, you want to build the animation in one set of functions and control it with a different set. var tl = new TimelineMax(); function createTimeline() { // Sudo code guessing game tl.to({}, 1, {}); // blah tl.staggerTo( images, .1, { opacity: 1, onUpdate: function() { this.target.className = 'played' // Are you aware this is running on every single frame of the animation? }, onComplete: function () { // I'm pretty sure these two lines bellow do not work as in this scope 'this' is the timeline itself this.target.style.opacity = 0; this.target.classList.remove('played'); } }, .035, 0, removeElemWithNoFullOpacity ); } function animateSkeleton() { images.removeClass('played'); TweenMax.to('.image-sequence', 1, {left: '15%'}); tl.tweenTo(1); } function finishSkeletonAnimation() { if(mySwiper.previousIndex < mySwiper.realIndex) { TweenMax.fromTo('.image-sequence', 2, {left: '15%'}, {left: '-30%'}); tl.tweenFromTo(1, 4); } } Now, if what you you want is to control that little section of the total animation that you named 'rotateSkeleton', that will be a bit more convoluted. You'll probably be better off assigning labels to the sections you want to tween to and tween to those sections as needed. Does that help?

I might create a giphy account just to be able to rebuke those gif attacks of yours. The truth is, you are slowly leaving the dark side. You will embrace the truth! You will LEARN AND BE ONE WITH THE UNIVERSE! Renounce the grubby framework. Cleanse yourself. Be with us! :D

Just helping a fellow GSAP user, besides this forums are open territory, right? If you think otherwise, bring it on buster!!!

Soooooo, Rodrigo's slowly moving away from the grubby framework into the light... Yes? You better watch where you going, else you step on unfamiliar turfs. Yah?

Hi, I still have no idea what you're trying to achieve and what your issue is, but I updated a previous sample of a basic GSAP/VueJS app to use the Scramble Text plugin: https://codesandbox.io/s/l261n378km Feel free to fork it in order to use your own code. Happy Tweening!!

The vast majority of the demos we use show GSAP animating the CSS properties of DOM elements. GSAP can animate any numeric property of any JavaScript object which is why it also works with canvas (easeljs, pixi, three.js, etc). When working with Animate CC (easeljs) you need to just make sure you are animating properties that exist. That documentation for DisplayObjects is really good to keep handy. Its important to note though that the GSAP syntax for timelines and tweens is EXACTLY the same regardless of what you are animating and where it is rendering. Yup That's tricky, unfortunately their is no audio synching in Animate CC (for html5 output) So even though you may see a sound wave in your timeline and be able to roughly visualize and set up where animations can begin and end... there are no guarantees and its far from perfect.

Line 40 of your example pen. //dots.appendChild(newDot); It is still commented out. Do you understand what this line and the surrounding for loop is doing? The dots are already created. They are just not being placed in the DOM. That's what that commented out line is doing. So, you have a perfectly working example of what you trying to achieve. Do you understand all the lines on that demo? I know you might not, I have been in situations where I had to replicate someone else's code and did not understand all that was written. Would you like to go over it?

Hi DevSaver, We will always try to help a fellow. There's quite a bit of code to go over here, can you be a bit more specific than that? What exactly are you after here and what is the problem you are facing?

Hey Lacika, Could you give us a bit more context? I mean, Looking at this one function is a tad hard as I don't know where that 'tl' is coming from, why you are using a timeline and then, a TweenMax and why you have a timeline already set as a 'tl' but also set as 'rotateSkeleton'. Also, GSAP doesn't really know when/if a setTimeout is fired or not... Could you show us a reduced case of what you are trying to achieve? The bare minimum is enough, because from what I am seeing here, you're mixing up too many things and that's what's causing your issue.

Hi! Thank's for helping, I was lost how to define @types t: ReturnType<typeof TweenLite.to> | null;

Are you referring to the IAB specs that specify a max frame rate of 24? https://iabcanada.com/content/uploads/files/IABCanada-AdGuidelines-English.pdf I've been dev'ing banners for years on ad platforms like DoubleClick, Sizmek and AdGear and have never had a scenario where I had to change the frame rate using Jack's or other methods. Banners made with GSAP or other tools should meet the specs for most if not all ad networks out there. Video files are a different story though and you'd have to change that in Adobe Premiere, After Effects, etc. The only scenario I can think of where you might have to change the frame rate would be where you're animating large numbers of elements at the same time and / or very quickly. In that case, it might be better to simplify the design and / or animation because you can never be sure of what the end user's device is going to be doing while the banner is playing. If your animation is too complex the end user might experience choppy performance.

Thank you for the detailed answer. Yes it makes sense now. I try to make it. If can not then I will post what I have done and ask again for help.

Yeah, I'm confused for the same reasons as Dipscom. The one thing that jumps out as a red flag is this: rotateSkeleton = tl.staggerTo(images, .1, { opacity: 1, ...}) This means every time your function is called you are putting a NEW staggerTo() on the end of the tl timeline. Your tl timeline is just getting longer and longer and longer each time

Hi and welcome to the GreenSock forums. Unfortunately there is not much we can do with that code snippet you posted. Please create a reduced sample illustrating the issue you're having in codepen: Also you can use codesandbox: https://codesandbox.io Here you can get the scramble text plugin available to work with sandboxes: https://codepen.io/GreenSock/pen/OPqpRJ Happy tweening!!

Hi, React yes, but React with typescript is out of my range, since I don't use typescript. I made this sample and it seems to work, at least on stackblitz: https://stackblitz.com/edit/gsap-react-typescript But I see some errors being displayed there, probably because of something I'm not doing correctly typescript-wise. I'll summon @OSUblake, our resident typescript wizard and see if we can get an explanation and a cool, mind-blowing/jaw-dropping example Happy Tweening!!

one approach would be to tween the progress() of the timeline instead of setting it like I did that for when you scroll down. Feel free to play with the values and add it to other conditions

@RyRInfo, have a look here to see how I tween a span behind an SVG to look fluid like. A few notes ... The "fill" is actually a span with a background color that is showing through the SVG and I'm tweening that span. This is all inside of a div with a border and border radius with overflow:hidden to mask any of the span outside of the circle. You could so something similar by leaving the R&R letter fill transparent in your SGV, but actually leave the area outside of the letters white to "mask" the span. I put mask in quotes because it's not an SVG <mask>. That is also another option ... explained here. https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask Also note that the amount of the tween is based off of a data-completion attribute on each wrapping div ... so a bit of the JS is just calculating how much to tween the span. I just find making a knocked out SVG and stuffing it into a DIV with overflow hidden an easier way to do these things. Here is a simple CodePen showing that. Hope this helps! EDIT: Did the SG for my initials ... it's not of mixup of GreenSock initials

Hi and welcome to the GreenScok forums. After reviewing your file, we have some advice to you as it seems you're not very familiar with some key-core concepts about GSAP. First and most important in order to simplify and speed up the support process, we advise users that they create a reduced sample in codepen that illustrates the issue they are having. To learn how to do that please look at this post and video from @Carl Second, among many amazing tools, GSAP has the CSS Plugin, that takes cares of any non-experimental CSS property you want to animate in a DOM element. Having said that, in your file we could spot quite a few of these: var tween = TweenMax.to(sec, 1, {transform: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 421.8, 1010.15, 0, 1)'}); var tween2 = TweenMax.to(sec, 1, {transform: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1004.58, 1011.1, 0, 1)'}); var tween3 = TweenMax.to(sec, 3, {transform: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1008.7, 3100, 0, 1)'}); Now for what I see mostly you're applying a 2D translate in these cases. Well GSAP has you covered, all you need is to pass x and y values to it: var tween = TweenMax.to(sec, 1, {x: 421.8, y: 1010.15}); var tween2 = TweenMax.to(sec, 1, {x: 1004.58, y: 1011.1}); var tween3 = TweenMax.to(sec, 3, {x: 1008.7, y: 3100}); Quite simpler and cleaner, right? If your concern is passing the animation to the GPU, no worries, when animating any type of transform property, GSAP uses a transform matrix for you, so it gets rendered by the GPU on it's own layer. You can read more about the CSS Plugin here: https://greensock.com/docs/Plugins/CSSPlugin The final issue is applying more than one GSAP instance on the same element and the same properties at the same time. When that GSAP overwrite manager will kill any pre-existing tween and apply the new one. In your case it kind of works like this: You create tween, the instance read the start and end values, and then starts to apply the updates to the css styles. A few milliseconds later you create tween2, GSAP sees that the target is already being animated and the properties are the same, it kills the existing tween, records the start and end values and start applying the updates to the css styles. A few milliseconds later you create tween3, same as #2. If you want to concatenate a series of animations during time, my advice is to create a timeline. Here is an extract from the docs, regarding overwrite: overwrite: String (or integer) - Controls how (and if) other tweens of the same target are overwritten. There are several modes to choose from, but "auto" is the default (although you can change the default mode using theTweenLite.defaultOverwrite property): "none" (0) (or false) - no overwriting will occur. "all" (1) (or true) - immediately overwrites all existing tweens of the same target even if they haven't started yet or don't have conflicting properties. "auto" (2) - when the tween renders for the first time, it will analyze tweens of the same target that are currently active/running and only overwrite individual tweening properties that overlap/conflict. Tweens that haven't begun yet are ignored. For example, if another active tween is found that is tweening 3 properties, only 1 of which it shares in common with the new tween, the other 2 properties will be left alone. Only the conflicting property gets overwritten/killed. This is the default mode and typically the most intuitive for developers. "concurrent" (3) - when the tween renders for the first time, it kills only the active (in-progress) tweens of the same target regardless of whether or not they contain conflicting properties. Like a mix of "all" and "auto". Good for situations where you only want one tween controlling the target at a time. "allOnStart" (4) - Identical to "all" but waits to run the overwrite logic until the tween begins (after any delay). Kills tweens of the same target even if they don't contain conflicting properties or haven't started yet. "preexisting" (5) - when the tween renders for the first time, it kills only the tweens of the same target that existed BEFORE this tween was created regardless of their scheduled start times. So, for example, if you create a tween with a delay of 10 and then a tween with a delay of 1 and then a tween with a delay of 2 (all of the same target), the 2nd tween would overwrite the first but not the second even though scheduling might seem to dictate otherwise. "preexisting" only cares about the order in which the instances were actually created. This can be useful when the order in which your code runs plays a critical role. Remember, please do your best to create a reduced case sample so we can take a better look at it and that illustrates what you're trying to achieve. Happy Tweening!!

Yeah, pretty much all of this has to do with immediateRender behavior. It can be a blessing or it can trip you up if you don't really understand it. Currently (and this is changing in 2.1), timeline.set() calls have immediateRender default to false UNLESS they're at the very beginning. There are reasons for this which I'll spare you in the interest of not making this overly complex The new behavior in 2.1 will make immediateRender:false the default for all set() calls. Also keep in mind that from() and fromTo() calls always default to immediateRender:true. Again, that's by design because most people WANT that behavior but in your case you've got a bunch of things affecting the same elements, so the immediate renders are affecting other tweens. For example... var tl = new TimelineLite(), obj = {x:0}; // <- obj.x starts at 0 tl.to(obj, 1, {x:100, lazy:false}) //you might expect obj.x to start at 0 and go to 100 but... .from(obj, 1, {x:200, lazy:false}); //this renders the starting values IMMEDIATELY (before the preceding line even renders on the next tick), thus the previous line will actually animate obj.x from 200 to 100! And then this line animates from 0 to 200 because when it rendered the first time (immediately), obj.x was indeed 0! To solve this, we can just set immediateRender:false on the from() tween. So in the demo above, obj.x animates from 200 to 100, then jumps to 0 and animates to 200. Setting immediateRender:false on the from() tween makes obj.x animate from 0 to 100, then it jumps to 200 and animates to 0, all because the immediateRender doesn't affect the starting values of the to() tween in this case. So I just always tell people to be very careful when using from(). If you need tight control over starting and ending values, just use fromTo(). Zero-duration tweens (which are what set() calls are anyway) are inherently tricky logic-wise too, so sometimes it's a good idea to just use very short durations like 0.0001 instead of 0. The problem with zero-duration stuff is discerning what values should be rendered in various scenarios like...if the playhead lands EXACTLY on top of the set(), you'd probably expect it to render its end values. But what if the playhead of the parent timeline was moving in reverse? What if it's at the very start of a timeline and the playhead runs into it backwards? You'd probably expect it to render its starting values in that case. So again, if you run into any issues, it might help to avoid zero-duration stuff and just go really small. And watch out for multiple from() calls on the same target. Once you really understand how immediateRender works and how/when values get recorded, it can all make sense, but sometimes it's a little tricky to understand.

Thanks ? I started out learning how to make games instead of websites, and I think that has helped the most. Game development takes user interaction, animation, and performance to a whole other level. I've learned a lot from Keith Peters with his Coding Math videos and HTML5 Animation with JavaScript book. https://www.youtube.com/user/codingmath http://lamberta.github.io/html5-animation/ And from Daniel Shiffman with his Coding Train videos and Nature of Code book. The Nature of Code uses the Processing language, but it's pretty easy to understand and convert to JavaScript. https://thecodingtrain.com/ https://www.youtube.com/user/shiffman https://natureofcode.com/ I would also recommend making a bunch of pointless things. It might like sound like a waste of time, but that's where most of my skills come from. I really like the point Steve Gardner makes in this video about making pointless things. If his mission was to create pop.svg before he made all the pointless things, he couldn't do it. It's the journey of making pointless things that got him to pop.svg. That got me thinking about all the pointless things I've made on CodePen. I've never checked before, but I sure do have a lot. I couldn't find a way to get the number of pens I've made, but 116 is the last page, and there are 25 pens on every page, so around 2900 pens. If I only had 50 pens, I would probably be pretty lame, worrying about stupid stuff like "which framework should I use, and does it have hooks?" So that's the journey of what got me to where I'm at, making games and pointless things.

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.

Good evening all I found the answer here, thanks go to Carl, and thanks for looking into it,Shaun. http://greensock.com/forums/topic/10063-how-to-controlplayreverse-to-a-specific-tween-inside-a-timeline-then-pause-after-animation/ You have to use TimlineMax's tweenFromTo which can 'scrub' the playhead between two labels. So if I have a label "a" and a label "b" and "a" comes before "b" then tl.tweenFromTo("a","b") will in effect play the timeline as if it was in reverse with the difference that I now can stop when the playhead reaches the "a" label - whereas with the reverse() method you don't have the label control in that way (with reverse you can as far as I can see however control from where you want to reverse - which is different from wanting to control where you want to stop reversing to). (Unless I missed something in the docs) So this worked just fine: var tl = new TimelineMax() var $frame1 = document.getElementById('frame1'); var $txt1 = document.getElementById('txt1'); var $txt2 = document.getElementById('txt2'); tl.set($txt2, { opacity: 0 }) tl.add("a",1) tl.add("b",4) tl.add(TweenLite.to($frame1, 1, { alpha: 1 })); tl.add(TweenLite.to($txt1, 1, { scaleY: 0, ease: Elastic.easeOut }, 2)); tl.add(TweenLite.to($txt1, 1, { alpha: 0, ease: Elastic.easeOut }), "-=.7"); tl.add(TweenLite.to($txt2, 1, { alpha: 1 }), "-=.5"); tl.add(TweenLite.to($frame1, 1, { backgroundColor: "#08b200" }),"-=1"); tl.play(); var callbk = tl.eventCallback("onComplete", doReverse); function doReverse() { tl.tweenFromTo("b","a") tl.remove(callbk) } Thanks,