Leaderboard

Hi, After many questions here, now it's time to see the result : https://jaiunsite.com/ thank you gsap !

@DD77 Craig and Pedro have done a great job in trying to help you figure out problems in your project. Though I would like to intervene because we can't spend so much time on a single question. We try to keep this forum focused on GSAP API related questions only. We occasionally do help members a bit more but with the intentions that they will use it as example to learn from and can expand it into what their desired goal is. I get it that you are using GSAP but still all of your questions are related to general JavaScript. Now to use GSAP or any animation library you need strong foundation of CSS and JavaScript basics so you can position your elements how you like and make them interactive through JavaScript. We don't resources to answer and explain JavaScript related questions. We have already provided you some helpful resources that will help you build your foundation. And we would be happy to point you to more resources to learn from if you need. We also have a sub forum where you can post to hire a freelancer to help you with your project. Or you can also look for a personal instructor. Feel free to post your requirements at the following link: https://greensock.com/forums/forum/15-jobs-freelance/ Hope this will help you resolve problems in your project. All the best.

A common thing to try if the first iteration of an animation is a bit jerky is this: tl.progress(1).progress(0); That allows GSAP to pre-record all the values before playing. Happy tweening.

You can use variable to store positions if your content isn't dynamic or you know you won't be changing it. If not, then you will need to get their position by using getBoundingClientRect and calculate the difference between their position. If your elements are of different size and you want them to stack on each other then you will need to calculate their center by using height and width(you can get height and width from getBoundingClientRect). Following is demo I made for another thread where I am changing the parent of element and then calculating the difference between the changed position and original position. You can use similar logic to achieve that effect. Just instead of recording values after changing parent you will have to loop through elements to record and calculate difference in position. Well all elements will have same ease but it will look different based on distance. If you meant they should start depending on how far they are and their speed while arriving should be same, then you will have to set their duration and start time by calculating the difference between distance.

If you're trying to replicate just the menu, I don't know if using ScrollMagic is the best approach, or at least the one I'd use. Instead I'll recommend to use Draggable and ThrowProps plugin to control the animation. Here is a very simple example of controlling the progress of an animation using Draggable: https://codepen.io/rhernando/pen/Batoc Also keep in mind that Draggable has a trigger property that allows you to update the target element by using the pointer/click event somewhere else. In this sample you can move the blue square by dragging anywhere in the grey area: https://codepen.io/rhernando/pen/IiHgq Hopefully that helps you getting started. Happy Tweening!!

I wonder if you could start creating a demo with your questions? It's much easier to provide the best advice and assistance with a demo rather than some pasted code. Here's how to do it. More info in this thread: I think this thread may help with your question. Thanks and happy tweening.

Another approach (though not always practical) is to create every element at 0,0 with position:absolute. It makes calculations and animating elements to specific coordinates pretty easy. Happy tweening.

Absolutely!!!, either a TimelineLite or a TimelineMax will do the trick, just create a container with an overflow hidden property and use flexbox for center it in the viewport and then create a dummy element and trigger a draggable instance anywhere in that container to update it's progress. If possible create a simple example of what you have in order to get a better idea of what you're trying to do. In the mean time here are some resources about using the Timeline classes: https://greensock.com/sequence-video https://greensock.com/position-parameter Also take a look at this in order to create a reduced codepen demo: Happy Tweening!!!

That explains some of your Draggable questions. I really like it, I don't remember seeing draggable used like this. Great work.

This affirmation is not correct, is it? You don't mean when you click twice in the same button. You mean when you click on a button A, then click to go back and then click once again on button A. Now, how is this new question any different from everything we have been discussing here? Go over your code, line by line, read and understand what each and every single line is doing. If you can't understand what the code is doing, go and take a course on basic JavaScript because you really need it. I will give you a hint to solve your issue: you need to remove ONE line from your code and it will work. I will not tell you which line it is.

Nice! Some fun interactions!

This is such an awesome read guys, props to all of you. Miles away from what I can do, but I'm super inspired reading through all these examples. ?

Sorry, I'm still confused about what this should be doing. I'm also not seeing any images. Just a yellow box. Are the images part of the scroll animation? Or does the line animate to the images and then the user can navigate the images? If the images are not part of the scroll, how does the user control it?

Brilliant thanks, I'll get working on it and update with a codepen link if I get stuck

Nice work! Thanks for sharing.

@Devon Bortscher I should have pointed out some problems with your demo before re-writing it. 1. As you already might know, you can use stagger tweens to add uniform delay when animating multiple elements. 2. You are using infinite: true, in GSAP if you want animation to repeat infinitely then you need to set repeat property to -1. But also for what you were doing you didn't need to set any repeat values. I decided to make a video tutorial explaining how my demo works. It seems like you have already figured, but in case you want to know more you can watch the following video.

1. isActive() Since you have so many timelines and animations that could be running, you may want to just use a global variable to allow/disallow clicks instead of isActive(). I mentioned it earlier in this thread, but here's a really simple example. I've used a canAnimate variable and a status variable to approximate what you have happening in your project with things being open or closed. This also avoids the animationIndex variable that you increment with some of your clicks. 2. Target all other links except the one that was clicked. There are many ways to do this. Earlier in the thread I think I showed you how to use jQuery's :not selector. Another way to handle this would be get the children of the siblings and animate those divs. 3. Main menu isActive() - see #1 above 4. When you want to reset everything, there would be a number of ways to do it. You could seek() the progress() of the various timelines, you could set() the elements where you need them. You could also use clearProps(). https://greensock.com/docs/Plugins/CSSPlugin#clearProps As with all things GSAP (or JavaScript in general) there are many paths to the same destination. Happy tweening.

Pretty tough to say since there is no demo posted, but your question sounds a lot like the same thing you asked in this thread 3 pages ago. Have you gone back through this whole topic again?

I ended up pursuing incorporating Animate CC with Doubleclick Studio Dynamic successfully, (including creating Publish templates, that allow any designer to output Dynamic), despite Studio support absolutely being on record that they can't (don't want to) provide support, if you are using Animate. My coworker did a preliminary GWD Dynamic campaign with white glove support from Google, leading the way. The consensus was that GWD had several disadvantages. GWD is slow. GWD is no Animate. Using web fonts, rather than whatever font you want, varied the LTF of a lockup, substantially. Over the years I have saved lots of DCRM HTML5 templates, that for the most part seem to have been removed from the database.

This is lovely...

Nice work on the video, @Sahil!

Yup.

You can get total duration by calling timeline.totalDuration(). Then set totalDuration of your another animation to same as totalDuration of your timeline. If your timeline has other animations as well, then you can add your slides related timeline to another timeline first and get it's total duration then add it to your main timeline.

Thank you so much, PointC! You are supreme! I'll check out your stroke-dasharray thread now. Have an excellent day! Best, Blake

BTW @elegantseagulls I've noticed how much you've been jumping in and participating around here. I think that's fantastic. The forum always benefits from additional ideas and fresh eyes on projects. Keep up the good work.

FreecodeCamp has a ton of material to get you from start to finish, not only on JavaScript but in general web dev plus more.

Nope. It's pretty clear we're not gonna make it to the finish line here. This is what we needed. function onReverseComplete() { toggle = "closed"; } Now you can create and start a new timeline each time a box has reversed. This can be applied to your actual project now. You'd just substitute the image covers for the boxes in the timeline creation function. Here's the final version. I think @Dipscom & I have gone above and beyond with you on this project and it is apparent that additional training and practice is required here. I would strongly encourage you to visit the GSAP learning area and blog. Read through everything and really try to understand it. Practice more with your own small demos and projects. https://greensock.com/learning https://greensock.com/blog/ I'd also recommend some basic JavaScript training. There are loads of online resources for that. Best of luck to you.

Hey Jp! You set the bottom to be 100vh, not the top. #pub-anim img{ position: absolute; bottom:100vh; } As far as performance goes, DOM element-wise, that's pretty much it. The only way to get more performance is to move those elements inside a <canvas> and run a ton of those calculations on the GPU. But, if you only going to have a dozen or so cats, you should be ok.

An easy way to keep things random is to create a new animation when the current one finishes.

I haven't worked with Celtra in years but they used to not support external libraries at all. Celtra is a full adBuilder and deployment system. You would build the whole add inside their system and only work with the components they made available and some vanilla JS. There was some talk of them supporting external libs at some point but I don't know if that ever went anywhere.

PS Check out my thread on circles along a path using stroke-dasharray. It's easier than creating all those individual circles. Happy tweening.

Sorry, I'm not really understanding this. It would be of great help if you could create a reduced test case in CodePen as explained here: Leave out ScrollMagic and any related code entirely. Its important to understand first whether or not GSAP is behaving as it should on its own. Thanks!

Hi guys, Now it's possible easily install these snippets for Atom text editor - I made an Atom GSAP package. I know there is another GSAP snippets package from Pier Bover, but I prefer using snippets from Carl so I did the porting for Atom text editor.

No question is a dumb question. I do not know the answer. Would love to hear it.

Hi, I don't mean to spam the forum, but I recently finished a project where I implemented an additive animation approach. It was a bit difficult, but really worth the effort. Thanks to OSUblake (and the rest of you in this thread) for creating some great examples to learn from. This is the site: http://www.beoplay.com/landingpages/portraits Try scrolling quickly and you will see the background image animations (zoom and pan) blend into each other, instead of overwriting (which would be normal behaviour).

Kevin, I really appreciate you taking the time to explain how this works. Your second post really helped my understand how relative animations work. I must say that you are an absolute genius!!! The whole negative delta thing was confusing to me because I wasn't doing relative animations in my previous demos. It wasn't until I started working on recreating your floated content example that it hit me… and it hit me hard. I was floored. It's so simple and obvious now. So here's the demo I recreated. Click anywhere and start dragging the box around to resize the container. Go crazy with the resizing. Click back and forth between the far left and far right side to create an interesting swinging effect. Pretty cool, right? There's a lot of stuff going on, so there must be a lot calculations taking place. Nope! This is what floored me. If additive animations were a part of GSAP, you could create that entire animation by calling one simple tween on each element. TweenLite.from(element, 1, { x: lastX - element.offsetLeft, y: lastY - element.offsetTop }); That's it! You could do same thing with a flexbox layout. I've never seen a flexbox layout animation that didn't involve a bunch of calculations and/or cloning of elements. Now we know it's possible to do using a very simple tween. I was curious how text would work so I dropped in the SplitText Plugin. Now this could make for some really interesting animations. @Jack When it comes to the different overwrite modes, I have never used this feature, so I'm only familiar with "auto". I understand that this would increase complexity and file size. If it makes the file size too big, couldn't this just be a TweenMax only feature or maybe an optional utility class that could hook into the engine? Concerning performance, I think you should look at the overall animation and not just GSAP. While it's true that the engine will have to do more work, other things can be simplified so the overall performance impact might be negligible in some cases. For example, look at the animations used in these waves or the GreenSock cape. They're both really nice, but require some expensive calculations to be performed on each update. You could simplify both of these animations by animating a set of points in a zig-zag pattern. The additive animation process will blend the movement into a nice smooth motion. So instead of doing trig calculations on each update, all you would need to do is apply those points to a catmull-rom spline and it should look pretty close to a sinusoidal wave. I haven't tested this, but I'm pretty confident that several additive animations running at the same time would perform better than doing a bunch of trig caclulations on each update. I know that animating waves is not something you typically see, but it does illustrate how additive animations could possibly improve performance by reducing the overhead somewhere else. Waves: http://codepen.io/waterfallmedia/pen/ZbOjRO/?editors=001 GreenSock Cape: http://codepen.io/GreenSock/pen/WQjRXE/?editors=001 Floated boxes: http://codepen.io/osublake/pen/30f4dc1606d31a0026313181cb10f03b?editors=001 Split text: http://codepen.io/osublake/pen/9b01ac4ad954828b502df87710d75a0c?editors=001 Catmull-Rom Solver: http://codepen.io/osublake/pen/BowJed/?editors=001

I'm not big into social media, so I'm used to most of my work going unnoticed. This time was different. I wanted people to see this, and it paid off. Early in the morning I saw a notification that said Kevin Doughty liked your pen. I had to do a double take to make sure it was the real Kevin Doughty. Score!!! I hit the mother lode. Just look at this. This is what you call a responsive layout!!! To bad I have to leave right now. I'm going to have to come back to all this craziness later tonight.

I’m happy to hear you’re interested in additive animation. You might not be so happy as this post turned out a lot longer than I thought. I developed the technique five years ago and made the feature requests to Apple, which is what brought me here. I actually blogged about GreenSock a couple of years ago, but perhaps I came off as attacking the platform instead of making a proper feature request. [1] (My bad.) As was pointed out in this thread earlier, it is difficult to convey what is happening and why it is beneficial. There are drawbacks as well. It is a powerful but counter-intuitive technique that I hope to explain. In short, you animate from the old value minus the new value to zero. Animations do not get removed, instead many can run concurrently. The values get added together, to themselves but also to an underlying, non-animated value. When an animation’s duration has elapsed, its effective value is zero and can be removed without side effects. All that remains is the underlying value. Combined with an easing function, it gives seamless blending and beautiful curves. It lends itself to discrete app state. In simple use cases the developer no longer has to reason about current animated values or quasi indeterminate state, and can focus solely on destination values and layout. Because multiple animations can run concurrently, it gives complete separation of concerns. Animation of an element triggered in one part of your code does not need to know about animations running on the same property triggered elsewhere. Let’s consider interrupting an in progress animation. The typical way to handle interruption has been to prevent it by completely blocking the UI until the animation is done, or to replace it with a new animation that begins where the previous left off. The former is a complete disaster but prevents visual discrepancy. The latter is an improvement but not without drawbacks. This is CSS transition behavior. Interruption will give sharp sudden angles, or asymmetric timing when reversing an in progress animation, like a hover. (The reverse distance travelled is shorter than the original, but the duration stays the same.) Additive animation provides a solution, and a simple one. There are other ways to accomplish animation blending. Facebook POP is the most notable, ported to the web in Rebound.js. POP relies on a single animation per property. Interrupting will mutate the animation to include smoothing/dampening. Of course nowadays everyone advocates immutable data. Mutating may not be such a big deal, but does prevent optimization like running on a separate process. But also information gets lost. Unlike additive animation, POP cannot blend two keyframe animations. [2] Web-Animations also takes a blending approach. At the very bottom of the spec they have a note claiming to have a solution to blending timing functions but deferred it to a later version. [3] Frankly, I will believe it when I see it. I think all blending techniques are overly complex and fall short of desirable behavior. Blending animation duration and easing/timing functions doesn’t make sense to me, and I have not seen any other solutions to blending path or keyframe animations, all of which an additive solution can do easily. Additive javascript implementations have appeared. Unfortunately they may never see the same performance benefits as native Core Animation, which actually runs the animations in a separate process with a very high priority. Currently Mozilla is implementing what they call Electrolysis (e10s) which will mean Firefox will have separate processes per browser tab, like “Chrome Helper” et al, but still will not compete with Core Animation in terms of performance, because what drives animations gets lumped together with everything else. Thus I don’t think the Javascript community has yet been convinced, because of availability of these competing techniques and for lack of a performance benefit. Unfortunately they miss out on blending keyframe animations, and running multiple animations on the same property of an object simultaneously. From an API standpoint, first and foremost is to automatically convert developer input from absolute to relative values. Relative means from old minus new, to zero. A transition for a change from 2 to 10 would instantly set the new underlying value to 10, then an animation from 2 to 10 would be converted to -8 to 0 behind the scenes. When added to the underlying value, the negative value puts the element back to the apparent start value. When interrupting and reversing the above example animation, say at an animated value of 5.5, the underlying value is instantly changed from 10 back to 2. The second animation’s converted values are from 8 to 0. The previous animation continues to animate to zero, which when added to the new underlying value of 2 does not cause a sudden jump because the second animation puts the element again back to where it started from, this time 10. The animated value can be ignored. Matrices are more complicated but the operation is concatenate the old transform with the inverse of the new, with zero being the identity matrix. In my opinion, there is no benefit whatsoever to use additive animation without this conversion, or with a destination value other than zero. So I prefer to call it “Relative Animation” and let the additive nature be a private implementation detail. My experience with GreenSock is very limited, please forgive me if I make statements about it that are not accurate, but two years ago I found its additive/relative functionality is not the same thing that I describe. It does look like GreenSock’s overwrite setting might permit concurrent animations on the same property and element, but I have not tried it out. The documentation does not mention additive. I think all operations can either replace or override any other animations, optionally without destroying previous ones, which could then come back into effect, say, if the previous has a longer duration and the newer ends sooner. You need to have a strong concept of non-animated vs. animated values. In Core Animation that means model vs. presentation values, and is wonderful. Web-Animations has specified vs. computed values. My concerns about a GreenSock implementation is that its animations seem to be predominantly forward filling. By that I mean when animating an object from A to B, the value persists at B after the animation is complete because the animation is still active and its values still applied. A forward filling system can work, and may be required for things like transform rotation. To animate from 0 to 90 degrees (non-additive seems a lot simpler) the way I do this using Web-Animations is to also have a non-additive constant animation, from 90 to 90 degrees that is forward filling and does not get removed. I call them underlying value animations, when toggled they get replaced instantly, while their relative interpolations do not. This complication is not necessary in Core Animation because of its clear distinction of model and presentation values, sadly absent from CSS. This is an implementation detail that probably could be taken care of by GreenSock’s own internal handling of state. I bring attention to forward filling because there are benefits of animating relative to an underlying value specified elsewhere. The web already has CSS to layout elements. It would become unwieldy to layout only with forward filling animations, in anything but the simplest of use cases. A developer could position an element via left and top using element.style or the style sheet, then animate its transform for performance. This is easy to do as both the absolute and relative destination values are zero. Paul Lewis blogged about this technique, but his version was not additive and so does not handle interruption. [4] The I_Am_Ralph_T physics animation also animates transforms to zero, and they are interruptible, but not additive (I don’t think). [5] A problem with animating CSS laid out elements relatively is browsers will re-calculate layout, but also unfortunately redraw before I have a chance to calculate the deltas, causing flicker. Web-Animations has a single line to fix this, requiring vendors not redraw immediately. [6] Thus, relatively animating floated content is now possible in Chrome but not yet viable in Safari. I should also point out that getBoundingClientRect gives animated values, which means the developer has to use offsetLeft and offsetTop to calculate non-animated values for relative animation. Using non-animated values is normally a benefit, perhaps not in this case. Having to work around APIs that did not anticipate relative animation is a drawback. Another feature more complicated animations might need is the ability to copy animations from one element to another. I’m not sure if this is possible now or makes sense with the GreenSock API. The path produced by many additive animations can be complex and hard to recreate. If the developer needs to insert a new element alongside an existing animating one, copying animations can accomplish this. Of course this and many of the features of additive animation can also be replicated by nesting elements. Drawbacks to additive mostly involve having to deal with an unknown number of animations instead of only one. You would have to track and copy many animations, for instance. In the WWDC 2014 #236 video, it is mentioned that it is hard to “catch” or instantly stop animations. All animations would need to be removed, then a new underlying value set to compensate. I would argue that the true relative pattern is to never remove them, instead permit them to finish. This is a case where a true physics simulation might be superior. If animations are not removed, very slow or different animation durations could be a problem. It might give expected behavior, it might not, but I tend to prefer short and unchanging durations. I forgot to mention, physics can be simulated in additive Core Animation or Web-Animations by calculating your own keyframes to give a nice springy effect or wobble, but it can be somewhat simplistic. I find the wobbling usually blends well. Large value changes cause a greater wobble, smaller and more continuous changes, having a smaller delta, barely produce a wobble and do not look bad. But again, this might be a bit simplistic for some. I found that in javascript, scientific notation shows up often, especially when you animate to a value of 0 with a little wobble. CSS cannot parse scientific notation, which would cause flickering, so it needs to be converted. To calculate keyframes, say for example A, B, C, D, E, F, G, relative conversion means A-G, B-G, C-G, etc. Another neat trick is a solution to rotating matrices. Since you cannot determine intent from a destination value matrix alone, for example if it should rotate 720 degrees multiple times or a combination of flips, the traditional approach has been to use keyframe animations with half rotations, or use a provided special animation function where the developer explicitly says to rotate n times (which cannot be determined otherwise.) Additively this can be accomplished by simultaneously running twice as many half rotations. I have my own animation framework that is a derivative work of the Web-Animations legacy javascript shim. It is a significant departure from Web-Animations, instead meant to resemble more closely Core Animation’s API, or at least its usage. I do not however recommend people use it for anything other than experimentation as I haven’t implemented tests and make breaking changes on a whim. But I have examples below. Also, I am very impressed that you were able to figure out additive animation from the slides in that WWDC video, because of the errors. In that picture, the second animation’s duration should be the same as the first, they imply the second is shorter for some reason, from 1.0 second to 0.4. The end time would also be different. But anyway, there isn’t really an animation API for the web out there that gives me all the tools I would like. The Web-Animations team refused my proposal to implement a property to enable conversion from absolute to relative values. This means in the future there will never be a CSS Transition property that uses relative (or additive) animation, but additive CSS Animation might be possible. My hopes are with GreenSock now! 1. Dissing GreenSock: (No not really. I called it negative delta back then, it is poorly written, and should be no surprise that I did not convince anyone.) http://kxdx.org/greensock-is-nice-but/ 2. POP cannot not blend keyframe animations: (no one can, but me… for now. Maybe you can change this.) https://github.com/facebook/pop/issues/64 3. Proposed smooth timing function: (Maybe it doesn’t mean what I think it does) http://www.w3.org/TR/2015/WD-web-animations-1-20150707/#acknowledgements 4. Paul Lewis: (FLIP sounds a lot catchier than negative-delta) https://aerotwist.com/blog/flip-your-animations/ 5. iamralpht (Sigh. Physics is very nice, I can’t deny it) http://iamralpht.github.io/physics/ 6. Changes made within the same task are synchronized such that the whole set of changes is rendered together: http://www.w3.org/TR/2015/WD-web-animations-1-20150707/#model-liveness 7. Animating floated content, requires Chrome: (click or resize window) http://kevindoughty.github.io/Hypermatic/relativeFloat.html 8. Blending keyframe animations !!! (compare single click vs. double click vs quintuple click) http://codepen.io/kvndy/pen/YyXLWp 9. Chained together animation sequence, requires Chrome: (click) http://kevindoughty.github.io/Hypermatic/relativeLayout.html 10. Implicit animation. The blue div uses constant underlying value animations, but is not something I would do unless I had to. More notable is how the orange and purple divs get animated automatically on element.style change, without CSS transitions or explicitly adding animations. They are declared and triggered automatically: http://codepen.io/kvndy/pen/meJYEj

Hello JLernDesign, and welcome to the GreenSock Forum! It will be pretty hard to help you based on just an image. Could you please setup a codepen demo so we can see the actual SVG markup, as well as the GSAP code you have written. This way we can see what your trying that is giving you trouble. Here is a great video tut by Carl, on How to create a codepen example demo. By seeing your code live and in context, we can better help you! Thank You!

Hi, onComplete is never called on a repeating tween. And yes, a tween that is yoyo-ing still has its playhead moving forward and like you found in the docs... is not ever reversed. Determining whether the tween is in a forward or psuedo-reversed iteration can be determined by assessing the animation's totalTime, totalDuration and duration of repeatDelay (theres a formula floating around the forums which I'll look for) Regardless, your solution is quite good. Toggling the reversed() state can be achieved a little simpler though: slideTL.reversed(!slideTL.reversed()) see it in action: http://codepen.io/GreenSock/pen/tbCBc And also, you could use the same technique on a TweenMax or TimelineMax