Leaderboard

And a canvas version...

Another approach is to tween a frame property on a generic object. That works great for packed sprite sheets. Shown here using canvas, but the same concept could be applied to html.

Also check out the exponential scale eases here. They will do the same thing without having to create a new tween on every update.

Did you get everything working? One thing to note is the way I wrote that function in my demo will only work in modern browsers. It would be better to write the function like this. function animate(target, skewType) { var tl = new TimelineMax({ repeat: 2}) .to(target, 3, { skewType: skewType, skewX: 90, repeat: 1, yoyo: true }, "+=0.2") .to(target, 3, { skewType: skewType, skewX: -45, repeat: 1, yoyo: true }) .to(target, 3, { skewType: skewType, skewY: 90, repeat: 1, yoyo: true }, "+=0.2") .to(target, 3, { skewType: skewType, skewY: -45, repeat: 1, yoyo: true }) tl.timeScale(10); }

Like this.

Using a loop, you can cut down on your code considerably var tl = new TimelineMax({repeat:-1}); $(".paths path").each(function(index, element){ var circle = $("#circle-" + (index + 1)); TweenMax.set(circle, {xPercent:-50, yPercent:-50, transformOrigin:"50% 50%"}); var bezData = MorphSVGPlugin.pathDataToBezier(element, {align:circle}).reverse(); tl.to(circle, 6, { bezier: { values:bezData, type:"cubic" }}, 0) }) Note: I wrapped all your <path> elements in a <g class="paths"> so that adding other paths in the future won't blow up the js code.

Yeah, I think Mikel's advice is best and the easiest to implement You can learn more about MorphSVG Plugin which is a bonus plugin for Club GreenSock members here: https://greensock.com/morphSVG Or if you are more technically inclined and want lots of dynamic control, this example from @OSUblake is great Check out the demos in Blake's post here for other scripted options:

Maybe you can do something like this by animating progress, if you don't want to use customEase.

Here is how you can do it. _gsTransform object is attached by GSAP on any objects that it animates, it lets you access all transformation properties.

About touch screens, you CANNOT detect one, so don't try. http://www.stucox.com/blog/you-cant-detect-a-touchscreen/ I come across so many sites that break on my computer because I have touchscreens and assume I'm using one, when I'm really trying to use my mouse. Touch can be determined by the event type. Here's a good article on the subject. https://developers.google.com/web/fundamentals/design-and-ux/input/touch/

The frame property is actually being rounded by GSAP in that example. And in that example, the position and size of every frame is stored in this file, so I'm using the frame property as an index value to lookup the frame object from an array. https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/fighter3.js This is what the sprite sheet looks like.

In cases like this I prefer to get 1 thing right before working on 4. Reducing the problem to the smallest amount of code makes things much easier to read and understand. By aligning the path data to your circle you don't have to worry about calculating those offsets. Once you get the path data (which is an Array of points) you can reverse() it before feeding those values to the BezierPlugin var bezierData1 = MorphSVGPlugin.pathDataToBezier("#path-1", { align:"#circle-1" }).reverse();

Hi @proweb1991, create some (different) waves and morph them - like this example: Happy tweening and waving ... Mikel

Welcome to the forums, @Kerry. The main problem is that your SVG artwork isn't set up correctly - those look like lines but they're actually filled shapes. In other words, instead of there being a single path running down the center of each line (stroked), you've got outlined shapes (almost like thin rectangles that are joined). That's why it seems like yoyo:false isn't working - it's just that the circles are following the outline of the shape which goes down and back up again on the other side. It's not yoyo-ing. Once you clean up the SVG artwork so that it's simple stroked paths, I can help you with significantly reducing the amount of code necessary to do the animations. You can use a function to do the repetitive work. As for the offsets, you probably don't need to set any offsets at all - just set this on each circle: TweenMax.set("#circle-1, #circle-2, #circle-3, #circle-4", {xPercent:-50, yPercent:-50, transformOrigin:"50% 50%"}); The xPercent/yPercent make it shift over and up by half the width/height of the shape itself. The transformOrigin just ensures that transforms take place from the center of the shape. Hope that helps.

I've been getting a bunch of people asking me about how to do a smooth page scroll effect, so here it is. Scrolling is just a transform. If you scroll 100px down, the browser will translate the page -100px up. We can do that with GSAP. TweenLite.set(contentToScroll, { y: -window.pageYOffset }); So how do you prevent the browser from scrolling the content? Position your content in a fixed container, and set the height of the body equal to the height of your content. This will allow the page to scroll, but the fixed container won't move. Now animate the y position of your content based on the scroll position of the page.

Thanks for the demo. GSAP is definitely your best bet for the animation. I looked at your SVG and it looks like you have lots of pre-existing transformations applied to the markers. I would suggest you design your SVG with all the markers having no rotation at all and let GSAP set and animate the rotation. It will be easiest too if you give each marker a transformOrigin based on a common point in the SVG coordinate system. With GSAP we use svgOrigin: https://greensock.com/svg-tips#svgOrigin In the demo below I use a 1-second delay on each animation so you can see that the SVG was designed with each marker having 0 rotation and living in the same spot.

Showing how that might look. There is a way to read the point values directly from a polyline element, but I just manually included them. Note that a circle is already centered by default, so I'm not using the -50 xPercent/yPercent here.

You need to set controller property 'vertical' to false.

Jack your observation was exact. I had thought the joined shapes would act as paths. Won't be doing that again. I have adjusted the paths as you suggested (above in the codepen). Could still really use your help to reverse the direction to down from the top & reduce the amount of code required. It looks like I am declaring the circles to start at the bottom with offsetY: 300, The x positions of the top vertical parts of the paths are: #path-1 122.5 px #path-2 407.5 px #path-3 692.5 px #path-4 977.5 px Thanks again for your help, Kerry

Thanks Sahil for your suggestion! This seems to work great Thanks for your help!

You can do that with custom ease. https://greensock.com/docs/Easing/CustomEase

@msolari Another issue that puzzled me is, you are defining a 'tlcA' timeline which basically has no duration. So as soon as page loads, the 'tlcA' onComplete callback is called which animates the main animation. For this animation you don't really need to use any callbacks, you can do same thing by using one timeline. Though I don't see any benefit of setting opacity here. Well, just to add a little more, it also helps us a lot when demos are simple and all ids, classes and variable are have descriptive name. Again, feel free to ask any questions.

No we don't have any quota for questions, so feel free to ask questions whenever you get stuck. Just it makes it easy for us when someone reads/follows tutorial when we suggest something. So if are getting stuck on new issues or something is complex for you to understand everybody here will be happy to help. And sometimes it is easier to ask for help rather than banging your head for hours, so don't worry about it. As for your question, you are using a tween rather than timeline. You can always set it's 'paused' property to true so it won't auto play. Your fromTo tween isn't playing because you aren't calling that fadeIn function anywhere in your code. If you haven't seen already you should go through these videos which will help you a lot, https://www.youtube.com/watch?v=sXJKg8SUSLI https://www.youtube.com/watch?v=tMP1PCErrmE https://www.youtube.com/watch?v=QO1mLs96krY https://www.youtube.com/watch?v=ZbTI85lmu9Q https://www.youtube.com/watch?v=8ETMjqhQRCs

You can simply scroll to certain element and don't need to calculate offset. As to answer why it is scrolling randomly, you are trying to scroll to the offset of that slide. So when your 2nd slide is in center, it's offset is 0. So when you click on second link again, scrollTo plugin scrolls to 0 which is first slide. If you click on 3rd link, it doesn't animate because offset of 3rd slide is same as where current scroll is. Plus if you click too quick the whole animation gets messed up because now you are referencing offsets while slides are at random positions.

Hello @Joooonatan and Welcome to the GreenSock forum! Here is a video tut of the position parameter that @PointC advised Happy Tweening! :0

Hi @Joooonatan Welcome to the forum. If you start a timeline with a negative delay, I'm pretty sure you'll rip a hole in the space-time continuum. Actually, I think you may be looking for the position parameter. If you add those nested timelines to a master timeline, you can start them at labels, hard-coded times or relative to their normal start time. It could be something as simple as this. var tl1 = new TimelineMax(); var tl2 = new TimelineMax(); var master = new TimelineMax(); tl1.to(someElement, 20, {...}); tl2.to(anotherElement, 10, {...}); master.add(tl1); master.add(tl2, 10); That would start tl2 at the 10 second mark on the master timeline. That's just the basics of the powerful position parameter. Check out this post for more info and a better understanding. https://greensock.com/position-parameter You should also look at creating your timelines in functions and returning them for use on a master timeline. Here's @Carl's recent article to show you how it's done. https://css-tricks.com/writing-smarter-animation-code/ Hopefully that helps. Happy tweening and welcome aboard

Sorry, the engine doesn't and really can't work like that. An onComplete, by design, is fired when a tween has run for its full duration, not when a target value is reached. Consider an Elastic ease where the target value is met 4 or more times BEFORE the tween is finished: It would be very strange if an onComplete fired the instant the target value was reached. Same thing with a bounce. Also developers often rely on the precise timing of an onComplete firing so that they can make certain assumptions about the state of their animations before certain events happen. Assume you had 2 separate tweens that moved 2 boxes across the screen and you wanted them both to move down after 5 seconds TweenLite.to(".red", 5, {x:200}) TweenLite.to(".blue", 5, {x:300, onComplete:moveAllDivsDown}); function moveAllDivsDown() { TweenLite.to(".red, .blue", 1, {y:200}); } It would be very strange if some "outside force" set the ".blue" element to an x of 300 prematurely and then it called that tween's onComplete and forced both elements to move down before 5 seconds had transpired. -- I think in your case the best solution is to just have your own checks in place using onUpdate, onStart or whenever necessary.

Alright, I spent several hours looking into this and I've got some things to share. First of all, here's a fork of your demo; the only thing I changed was pointing to new versions of GSDevTools and TweenMax: Some comments: GSDevTools basically "records" for the first 2 seconds after it loads, and figures out the duration based on all the tweens/timelines at that point. If your goal is to use GSDevTools as a global timeline, you can't really mess with the timeline part-way through. It's a little bit like a movie/video scrubber playing and then when it gets to 75% done, you suddenly remove the last chunk of the video completely and expect the scrubber to still work properly. Not that you're doing something "wrong" - it's just not a good fit for a scrubber tool on a global timeline like GSDevTools. You should be able to dynamically update a timeline that's directly wired to a GSDevTools instance, though (not globally synchronized), Like: GSDevTools.create({ animation: tl, // <- your master timeline instance globalSync:false }); The main reason I had to update GSDevTools and TweenMax (actually, TimelineMax) was that the tweenTo() stuff is tricky; they must update their duration dynamically onStart due to the nature of...well...it'd take a long time to explain, but basically I had to implement fix because this demo exposed an extremely rare scenario where the duration would update incorrectly. Hopefully this gives you what you need to charge forward with building your banners and tapping into GSDevTools. Again, instead of defaulting to the global timeline, you might want to set a specific animation instance and turn globalSync off. That'll give you the most flexibility for wiring up the scrubber to a particular timeline, even if it's dynamically updated (to some degree at least). Let me know if things work well for you with the updated TweenMax/GSDevTools. I always like having them tested more in the wild before doing any official release, just in case there's something else that pops up. Does that help?

1. I already provided 2 demos that showed how to make it work perfectly (degrees matched where the mouse position was), but if you're asking me to dig into your 700+ lines of code in a complex demo that uses a different framework (D3) and isolate where the logic may be wrong, that's not something I have the time to do, sorry. Hopefully you can take one of my earlier demos and apply the same concepts to get it to work in your complex project. 2. Here's an updated demo of a previous one I provided, and it now has an animated (gradual) change on press, but an instant update whenever dragged: I hope that helps. Happy tweening/dragging

transform values like x and y are relative to the objects natural position. If you have an item with left:100px and another with left:200px, their x value is 0. If you give them both an x of 100, they will move 100 pixels to the right of their current position landing at 200px and 300px respectively. The solution for you is to give all your balls position:absolute. This will in effect put them all in the same place with x:0, y:0. You can then place them in a row and space them however you like (I use a TweenLite.set()) and then if you tween them to the same x,y values they will end up in the same spot

lol, i had to google this myself and it seems JS has a native toLocaleString() function that does the trick too https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

Hello @jack challenger and Welcome to the GreenSock forum! Here is another way if you need the last two decimal places if its a currency: Happy Tweening!

Hello @friendlygiraffe, why not just use an SVG clip-path or SVG mask? Examples of animating the SVG <mask> element using the GSAP AttrPlugin: You want to stay away from animating left, margin-left or width since they trigger layout like @Sahil advised above. which means the browser has to calculate the layout on each render tick, which equals bad janky (lost frames) jitter bug https://csstriggers.com/width https://csstriggers.com/left https://csstriggers.com/margin-left Happy Tweening!

That's not really GSAP related question. Most of the javascript related answers can be found with a simple google search, it will be great if all questions asked on this forum are directly or indirectly GSAP related only.

Ya, modifiers plugin gives you access to access calculated value on each frame, it gives you opportunity to modify these values before applying them. You can read more about in docs. It is really powerful feature. Following is thread with countless examples by @OSUblake, he basically requested this plugin and has done a lot of work to demonstrate all the crazy possibilities. Again the mapping function is something Blake posted, it lets you map two values in ratio. I am using it to avoid excluding height 'auto' of child element. Here is what happens if you don't use it. If you have played a lot with timelines, progress etc you will quickly understand what is going on. I don't fully understand mapping function either but I can see myself using it a lot in future, if you play with absolute values you will understand what is going on. Blake might explain it in detail once he reads it.

@friendlygiraffe whenever you are animating any element, make sure to set it's position. Otherwise you will see a lot of unexpected behavior. @craftedbygc When you are animating width, transform origin doesn't really matter. It is only taken in consideration when you are doing any transforms like scaling, animating skewX/skewY etc.

You could use TweenCanvas for that: https://github.com/3dimm/TweenCanvas

Here is similar thread. I am not completely sure but I remember reading @Jonathan's comment recently where he advises to not animate margins as it will cause browser to repaint layout.

Hi @boonier You still have some problems with your resize function, or rather with your paintCtx function. Every time you call it, you're starting another draw loop with requestAnimationFrame. After several resizes, you're demo is going to grind to a halt. It might be easier to use GSAP's ticker instead. And if you haven't already, check out that thread I linked to. There's some good tips on there, like translating 1/2 pixel when a drawing a line that has an odd width, or how to resize your canvas using devicePixelRatio. I made a couple changes to your pen. Nothing that deals with the animation. Just some of the stuff mentioned above. I like what you got going on here! I think I might post back later with my own version. One thing that could be improved upon is the hit detection. If you move your mouse around, you'll notice that it skips a lot of blocks, especially when moving very fast. The reason for that is because you're not able to detect and track every single point the mouse has moved in between animation frames. There is a way to figure that out if you know how to draw a line. By drawing a line, I'm not talking about with canvas, but how to draw a line on a grid, like with Bresenham's line algorithm. By plotting a line between the last mouse point and the current mouse point, you can figure out which grid squares the mouse has passed through.

I use scrollmagic and tweenmax in my angular projects and I recently swapped over to a newer ES6 version of scrollmagic called Scroll Wizardry its a drop in replacement so you can replace your calls from scrollmagic to scroll wizardry. I am not sure how much difference the performance is but it seems to work great for me. https://github.com/homerjam/scrollwizardry and if you use vue.js here is a wrapper for it, but if you use something like angular or plain JS you can just call it the standard way. https://gist.github.com/zurie/f816c1d6569d28b2eafa7fea71b7ed95

GSAP can cover so many topics, so I think a choose your path option might be the best thing. I want to... Learn the basics Animate SVG Animate UI components Create a banner Drag stuff When I first started learning, I was only interested in dragging stuff, but I had to sit through and watch a bunch of videos about making a Burger Time banner, which I didn't care about. And dedicating a section on animating UI components would be huge. Showing people how to animate stuff with click and hover events would eliminate half the questions you get on this forum.

Thanks for the advice, Jack! Glad to say I figured out a solution this morning. I used font face observer (https://github.com/bramstein/fontfaceobserver) which is a library that allows you to fire a callback once particular fonts have been loaded (and it probably does some other things). Web font loader is an alternative to this, although it's a heavier library (and as mentioned above, I couldn't get this working anyway). Still a bit puzzled as I use split text all the time and haven't come across this issue before. Anyway, this looks to be a pretty solid solution should anyone else happen to come across this

Hi edmcamoil Welcome to the GreenSock forum. Have you tried this in your CSS? font-kerning: none; We had a similar question in another thread recently and that seemed to fix it. Happy tweening.