Leaderboard

That's because when a tween is defined it is rendered immediately to the start position, usually only noticed in the case of 'from tweens'. Because you are using set at the start of timeline, it is behaving same. You can set immediateRender to false on first tween and it will behave as expected. Well and you can use just fromTo tween to same thing. // To tween tl.set(".slide", { opacity: 1, immediateRender: false }); tl.to(".slide", 1, { x: 300, opacity: 0 }); // fromTo tween tl.fromTo(".slide", 1, { opacity: 1, immediateRender: false }, { x: 300, opacity: 0 });

Congratulations @Dipscom -- your membership in the comma club includes this fancy t-shirt. Only 999,000 more posts to get into the two comma club.

yPercent is the easiest, but the slowest because it has to calculate more stuff because it's based on the size of the element. And the reason for the translate and matrix transform is so that you can animate yPercent and y separately. TweenLite.to(box, 1, { yPercent: -50, // translate value y: 100 // matrix value }) GSAP has some performance stuff built in. Inspect your middle box (box2). GSAP switches from 3d to 2d at the end. However, if you set force3D to true, it will only use 3d. But really, your best bet is to just test and see what works best for what you're doing. Performance will vary a lot depending on what you're animating, and the browser. Setting will-change: transform in your CSS might provide the best performance for Chrome, but if you try that in Firefox and the element is too big, you might get a warning in your console saying that the surface area is too big, and will-change has been canceled. It's definitely frustrating figuring out what works best for everything.

Ladies and gentlemen... Boys and girls... Cats and dogs... One Thousandth Post. I will say this was far more work than it needed to be. I've actually sat on my hands without posting for about, I think, two months because I couldn't get the spare time to sit down and make a celebration pen. And then, Pedro being Pedro, he goes full-on megalomaniac with this idea to make a countdown with a different pen for each of the remaining posts. And why not do that while also working full-time and still redecorating the house? Well, it would mean not doing a one thousand posts celebration pen or, not being able to hang around here and interact until all was ready. Those were the only two options, really. Doing something simpler, abandoning the original idea, was totally out of the question. Wasn't even considered, really. The moral of the story? There will be no more celebration pens from mr. @Dipscom - not a chance. I'd rather be here chatting away. Another reason is bellow. I saw this via the notification email - which I read the summary when the mobile pinged with the email and my heart... Oh dear me. It sank. To depths not known to men. Retribution is a nice word... And shall be part of someone's future. Happy Tweening EveryOne!

Hello @rgfx. In GSAP you can force an element that uses only matrix() or translate() to use matrix3d() or translate3d() if you add either a rotation, skew, or translateZ (z). So you will have to play with it and have your browser inspector open to view what the element is using. If your doing just a scale or translate (x or y), then just add a slight rotation of 0.01, which can give you an output of either matrix3d() or translate3d(). Happy Tweening

Hey guys, just an FYI. We're going to be resetting everyone's posts and likes counts soon. The logs are getting too big. I think a fresh start will be nice and will even the playing field for those that came in a little late. Happy helping in 2018! just kidding of course Looking forward to #1000

Hi @ericshew The most noticeable problem is line 19. //Switch this tl.reversed() ? tl.play() : tl.reversed(); //to this tl.reversed() ? tl.play() : tl.reverse(); That should get everything working for you. It can certainly work with playing and reversing the timelines like that, but you'll see some harsh morph jumps when hovering on/off quickly between <li> tags. You could get some smoother morphs with rapid hovering like this: Just my two cents worth. Hopefully that helps. Happy tweening.

@dipscom, Thanks for all your help over the years and keeping it funny. Looking forward to many more posts.

Congratulations @Dipscom Pedro! I'm surprised you didn't create a bunch of confetti exploding with @OSUblake, @Carl, or @PointC face in each piece of confetti, thus starting another image face war. You will never get my real image face good sir

Hello @codek and welcome to the GreenSock Forum! Keep in mind that you could have also used the GSAP special property autoAlpha instead of opacity. And in your CSS use visibility:hidden. Then your element would not show on load by default and would be animated in with autoAlpha which is part of the CSSPlugin. GSAP autoAlpha is better for performance than using opacity by itself. CSSPlugin autoAlpha uses both opacity and visibility: hidden https://greensock.com/docs/Plugins/CSSPlugin#autoAlpha Identical to opacity except that when the value hits 0 the visibility property will be set to "hidden" in order to improve browser rendering performance and prevent clicks/interactivity on the target. When the value is anything other than 0, visibility will be set to "inherit". It is not set to "visible" in order to honor inheritance (imagine the parent element is hidden - setting the child to visible explicitly would cause it to appear when that's probably not what was intended). And for convenience, if the element's visibility is initially set to "hidden" and opacity is 1, it will assume opacity should also start at 0. This makes it simple to start things out on your page as invisible (set your css visibility:hidden) and then fade them in whenever you want. Happy Tweening

Sheesh, I'm AWOL for a few weeks and @Diaco returns. I'm missing all the big events around here. Welcome back @Diaco - good to see you.

Wait... what?! You will be receiving a DMCA takedown notice from me in just a few. I've already notified CodePen.

GSAP does use requestAnimationFrame, but I'm using it for a somewhat different purpose. To limit how often something gets called. Using setTimeout could be used in a similar way, but it is not synced with when the browser repaints. requestAnimationFrame is, and will be called before the browser repaints. Read what I posted here... And here too. The OP of that thread had an interesting demo, comparing the throttle function in lodash to requestAnimationFrame. Notice how much smoother the rAF one is. That's because it's being called at the appropriate time, right before the browser repaints. The throttle function uses setTimeout, so it may fire too early, or too late, causing the movement to jitter.

For fun, here's the original 1,000th post thread.

The position of child element is determined by parent so you can't find any built in solution for something like this in CSS or in most javascript libraries. You will just have to tween child element with same negative value at the same time.

Forgot to post this video, it explains it in more detail.

Having a good understanding of arrays will make this easier to understand. Beforehand, I create an array of arrays that hold the different path variations. So the structure looks kind of like this. var pathLists = [ [ [startPath1 + randomAltPath], [startPath1 + randomAltPath], [startPath1 + randomAltPath], [startPath1 + randomAltPath], ], [ [startPath2 + randomAltPath], [startPath2 + randomAltPath], [startPath2 + randomAltPath], [startPath2 + randomAltPath], ], [ [startPath3 + randomAltPath], [startPath3 + randomAltPath], [startPath3 + randomAltPath], [startPath3 + randomAltPath], ], [ [startPath4 + randomAltPath], [startPath4 + randomAltPath], [startPath4 + randomAltPath], [startPath4 + randomAltPath], ] ] The random alternate paths are shuffled, so there will only be 1 circle going down a certain path at a time. However, that will only happen if the duration/speed is the same for each circle for every path variation. By using a random duration for each circle/variation, there is a possibility that a fast moving circle could catch-up to a slow moving circle, and head down the same path. Eliminating that possibility completely would require more code and logic, but we can reduce that possibility by reducing the range of the random duration. Instead of using a large range, like random(1, 5), use a smaller range like random(1.5, 2).

Hello @Tasty Sites Here are 2 other ways of doing a typewriter effect in GSAP: This animates CSS width using steppedEase And this animates CSS opacity (autoAlpha) using steppedEase: Happy Tweening

Congrats, Pedro. Welcome to the comma club!

That could be a theme when I get back into particles and physics-based animation... I have no idea what you're on about. There's a legal disclaimer stating that I am the rightful owner of all of that code.

Hi @OSUblake, Fantastic! Every line, every detail is worth studying. So please use the full screen mode and your biggest touch screen ... Kind regards Mikel Hi @Kerry, I thought QUANDL would be your construction site. Nevertheless, this case is a fantastic challenge.

Thanks Sahil, it works! I did not know "immediateRender" option. Solved!

My reaction as well. I am still puzzled by 1000th post. I will just wait for #1002(just edited) post including codepen with BIG explosion.

@Dipscom Looks like you have been challenged to top that.

ONE!!!

Hi @mikel, This is my first animated svg with js. Just wanted something fairly simple like https://www.quandl.com/#ember626 where the circles are representative of data flow in one direction to one source. The more random it appears the better (in a visual sense). So overtaking (circles) would be cool. I may apply a pulse / opacity / scale effect through CSS but this would be static timing on each circle element. @OSUblake thanks that is what I am after. Maybe just a little bit slower. Thanks again.

Thanks, Just wanted to make sure the was no clear solution. I didn't notice that GSAP was using tanslate3d then switching to 2D good to know. Finally made it to level open performance tab, a good milestone if you ask me

I'm not sure that'd help, Blake, because typically screens run at 60hz anyway, so even if setTimeout() was used it's not really gonna look much different. Frankly, my plan is to remove support for useFrames in GSAP 2.0.0 because it's so infrequently used and I don't think it merits the kb. So it'll always be in 1.x, but I would encourage folks not to start depending on it too much for future versions. Like I said, almost nobody uses it (from what I can tell). If I hear from a lot of people that they need/want it, I'll certainly reconsider.

Yeah, one of the worst things about CSS/WAAPI is the very limited easing options. You simply CAN'T do a lot of the expressive eases (as Blake indicated). However, you can try to get close by using our ease visualizer. Just select the ease you want to emulate, then toggle over to "Custom" and make sure you have NO anchor points (CSS can only do a single cubic-bezier segment), and drag the control points on the very end (the handles) to best mimic the original ease curve. Again, most of them you won't be able to match. Then, in the bottom where the code is, you'll see the custom ease data. The string you want will look kinda like "M0,0,C0.116,0.676,0.532,1,1,1". Ignore everything before the "C" and the last two numbers ("1,1"). Plug them into the cubic-bezier and you're done. So, for example: //before... "M0,0,C0.116,0.676,0.532,1,1,1" //after... "cubic-bezier(0.116,0.676,0.532,1)" I hope that helps. Of course it makes me sad that you're forced to use CSS instead of GSAP Good luck with the project.

I don't see where you did that. Whenever you want to make changes to a demo you're asking a question about, please create a fork, and post the fork so we can see the incremental changes. It helps avoid a lot of confusion. To avoid jitter on mousemove, make sure you're throttling those events. Setting will-change: transform in your CSS might also help, but that introduces another set of problems. https://greensock.com/will-change I just quickly made a fork of your demo with those changes, and it seems to reduce the jitter a lot. I'm sure the onMove could be improved some more, but I'm really not 100% sure what you're trying to do.

Twooooo! edit / carl / you gotta click it

Oh, nice. I really didn't describe the process, but it sounds like you figured some stuff out, like using PIXI.Rectangle. I'm just going off the top of my head here, but I think you should use getBBox() instead of getBoundingClientRect(). That should allow you to scale the dimensions correctly. And the size of your svg/viewBox should probably be the same as the bbox of your typo element. Ideally, you want everything starting in the top-left corner, but your SVG isn't set up like that. I'll have to see about making an adjustment for the x and y values. SVGRect {x: 179.45834350585938, y: 233.4530029296875, width: 440.5416564941406, height: 133.09402465820312}

Aha! Great catch. Sorry about that. Okay, it has to do with the complexities in measuring angles that cross thresholds (like 179.9 degrees to -179.9 degrees is literally just 0.2 degrees apart functionally, but mathematically they're 359.8 degrees apart). Draggable has code in place to handle that, but you ran into a very particular case with bounds where it glitched. That should be fixed in the upcoming release which you can preview (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js Better?

Every time I hear somebody talk about burning witches, I always think of this scene from Monty Python.

Diaco beat me to it Anyways, here's what I came up with: Edit: movement triggers when hovering. Edit2: Made the flow feel more natural. Added a slight rotation to see it from the side. If you want to see it from the top, just remove the rotation from the stage class.

Hi @DD77 pls check these out : and the second one: are these what you looking for?

Three!!

Not sure what happened to demo I posted, it was working while I was editing it. Anyway, you can do it like this and save yourself from all the calculation.

Hi Tasty, If you remove the ease on the stagger, you can clearly see why it's delayed: Using the 'visibility' property: Low duration stagger:

Hi @geddski At first, for the Club GreenSock bonus plugins on Codepen; you can find the codepen safe versions here: https://codepen.io/GreenSock/pen/OPqpRJ And about your issue; pls try to wrap your spacing entities with a span tag. <span>&nbsp;&nbsp;.....</span> Splittext completely respects to <br> tags. btw, you can use "&emsp;" instead of "&nbsp;"

Welcome to the forums, @Cleo It's kinda tough to troubleshoot blind (a codepen would be super helpful) but it looks like your "items" only consists of one element with the ID of dd-heading. So perhaps your selector is wrong? Again, I don't know how you set up your HTML, so it's difficult to diagnose. Remember, though, you're not supposed to use the same ID for multiple elements (they must be unique). Did you mean to use a class instead maybe? Also, in your out(), you're simply playing the timeline which probably isn't the best idea because what happens if someone rolls their mouse over...and then very quickly rolls out (before 1.5 seconds has elapsed to reach the pause)? Nothing would happen. The animation would just keep playing. In order to get that out() animation to play, they'd be forced to wait the full 1.5 seconds before rolling out. That's just a logic issue with your code, not a GSAP thing. Maybe it'd be simpler to just build an animation in the over() and a different one in the out() so that they can dynamically determine their starting values based on whatever the properties are at that moment (even if a previous animation is part-way finished). If you still need some help, it'd be awesome if you could provide just the simplest codepen that demonstrates what you're attempting. Happy tweening!

I've spent hours researching this and every indication is that it's a bug in iOS Safari that only applies to iframes. Here's proof: Notice that if you view that in an iframe on iOS, it doesn't work. It's supposed to scroll to 400px from the top after 1 second. There is no GSAP involvement whatsoever. It's pure JS. Thus far, I can't figure out any workarounds to force iOS Safari to work. I have submitted a bug report to Apple, so hopefully they'll get it resolved. Sorry for the bad news.

Hi rgfx Your section's width is bigger than its child and content doesn't overflow, try to remove section's width in your CSS or set to smaller value

Check out this demo from @OSUblake I think it will be a great foundation for this effect

Hi and welcome to the GreenSock forums, This post looks very similar to your other thread here: in which Sahil provided a few examples (which are pretty much the same that I would provide) Its best to keep one thread going per topic. These forums don't really aim to provide a free service where people build out projects upon request. We really focus on the basics of the GSAP API so that people can achieve their animation needs. It can take a lot of time trying to convey all the logic involved in something like a slot machine with multiple spinning elements which need to stop at random increments and stuff like that. As mentioned in previous post, the ModifiersPlugin https://greensock.com/modifiersPlugin will help you achieve an "infinite carousel" effect where elements will have their position reset after they move a certain distance. If your scrolling numbers can be simple bitmap images (not DOM elements) a much easier approach is just to tap into the power of repeating background images

What you were doing with progress was creative, but the very tiny issue with that is your elements disappear once animation completes. For that you can wrap elements by using Modifiers plugin. You can read about wrapping function here https://greensock.com/forums/topic/15737-modifiersplugin-helper-functions/ and check docs for ModifiersPlugin, it basically lets you modify values before actually applying them. I know this might seem more complex to you than what you had done but if you care about those tiny details you can take this approach. Another thing is, you were using really old version of TweenMax, cdnjs has dropped support for 'latest' links so it is actually old version. Finally, I am not sure if your approach of explicitly calculating boxsize by multiplying with 2 is correct but I have very little experience with SVGs so you know better or someone else might point out. As for timeline, timeline is sequential so it will run each tween after another so you can't really use it in this scenario. You can add all tweens in timeline with position parameter 0 which will make them start at same time but you won't be able to take advantage of your progress approach. I often see people use timelines and add tweens to it on hover effect, and they start wondering why animation doesn't stop. That happens because timeline is going to play every single tween added to it. Also timeline just acts as container, so if you create 10 tweens and add it to timeline, you are still creating same amount of tweens. Just timeline makes it easier for you to manage your animation. Hope that clears your doubts, though feel free to ask if you have any questions.

Hello GreenSock community, This is my 1,000th post here on the forum so I thought I’d say thank you to all of you. You’re such a fantastic group of friendly, creative people. Your code, questions and demos inspire me every day. I learn just as much by answering questions as I do by asking them so the first thousand has been a wonderful education for me. Thank you all for your participation here in GreenSockLand. Special thanks to Jack and Carl for letting me hang out and talk through 1,000 posts. You guys rock! To commemorate the occasion, I made a new little demo. I’ve been having so much fun lately with CustomEase, CustomBounce and CustomWiggle that I thought they should be the focus of the 1,000 post commemorative demo. Commemorative 1,000 Post Demo: http://codepen.io/PointC/pen/PpqyaO/ Speaking of the new CustomWiggle feature - (shameless self-promotion) – if anyone missed my Wiggle World demo, be sure to check it out. It allows you to interactively play with some of the new wiggle settings. Wiggle World: http://codepen.io/PointC/pen/ZLPdoY/ Thanks again everyone for my first 1,000 posts. I’m looking forward to another thousand. You’re an awesome community. As always, happy tweening to all. - Craig PS If there are any forum lurkers out there who are a little nervous about jumping in, please give it a shot. The GreenSock neighborhood houses a truly special group of people on the web.

It isn't quite as simple as adding that dragResistance factor, mostly because of some complications with handling rotation and the way Math.atan2() works, but I hacked away at it and I believe the attached files should give you what you're after. This is a preview of the upcoming 1.11.0 release. Note that rotational data is not degree-based instead of radian-based in order to be consistent with the way CSSPlugin interprets things (plus it seems more intuitive). This change affects more than just Draggable, so please make sure you're using the attached versions of TweenLite and CSSPlugin too. You can set the dragResistance to a value between 0 and 1. Please give it a shot and let me know if it works well for you. When I dropped it into your test codepen, it seemed to work well. GSAP_1.11.0_rc1.zip