Leaderboard

the main issue is that in your publish settings you have "export document as texture" selected That tells animate to pack all your vectors in to spritesheets (as bitmaps at the size they are on the stage) So you were creating a super small bitmap circle and scaling it massively. Try deselecting that option and then drawing your circle at its biggest size and scaling from 0. TweenMax.from(this.circlebig, 1, {scaleX:0, scaleY:0, ease:Back.easeOut}) see attached Animate Scale.zip

Hi @nickelman Do you have a codepen showing your progress? https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/ I'd probably approach this as a series of .from()'s as the final positioning will be trickier to get accurately than the starting point. A bit pinned at the moment but, if I have time later, I'll see if I can put something rough together.

Nice demo @Sahil. I can't believe you used the word canvas three times in your post and Blake didn't suddenly appear from a cloud of particles. ?

Yep, @Sahil is exactly right. An onUpdate is tied to a particular animation (which can be a good thing if you want it to only run during that animation), but if you've got a bunch of animations and they've all got onUpdate callbacks triggering the same function, it's just cleaner to use a "tick" event listener. Also keep in mind that the "tick" event listener allows you to ensure that the function runs after ALL of the animations have updated on a particular requestAnimationFrame cycle. Think of it almost like a global onUpdate. Or you can actually increase the priority so that it runs before the whole engine updates instead, but the default is to run after all animations render. Does that help?

I have linked some threads below but looking at your animation I don't think you need to do that. Just hide the content of your container and scale it instead of changing height/width. Once animation is done make your content visible. If scaling doesn't work for you then you will need to write responsive tweens, check following threads. You need to re-create tween/timeline to adapt to new values. There are few methods to do that like reconstructing timelines, using modifiersPlugin and using invalidate(). https://greensock.com/docs/TweenLite/invalidate() In your case if you want to use invalidate you will need to use fromTo tweens for tweens that you want to update. Another thread discussing same ideas,

I don't think there is any performance difference just both are applicable in different scenarios. You must be familiar with requestAnimationFrame, that gets called when browser is ready to render. So internally GSAP relies on rAF in browsers that support it otherwise falls back to setTimeout. Ticker's tick event occurs each time GSAP's engine updates and onUpdate gets called when particular tween/timeline updates. In your case we suggested you to use ticker(or you can use requestAnimationFrame) so you can avoid 100 clearRect calls and call it just once on entire canvas. Same goes for draw calls. Plus ticker made more sense because your canvas was updating on every frame. Instead if you had 4-5 tweens that won't repeat then using ticker won't be good idea because once animations complete you are executing those statements unnecessarily . In most cases when you are dealing with canvas, you will want to use ticker. With DOM you might want to use ticker in situations where you are adding some easing effect like mouse follow effect etc. Plus using ticker has some benefits over rAF, like you can easily add or remove event handler, pass paremeters or set scope. A lot more flexible.

actually... As long as the symbol at its natural size is the biggest you want it to appear, you can that take that symbol from the library at normal size, place it on the stage, scale it down using the transform tool, and then scale it to a scale of 1 with TweenMax. it will look fine. EDIT: quick video: https://greensock.d.pr/nv2HJb

Glad you found it inspiring, most credit goes to @OSUblake and the book I mentioned. I started participating in forum with the intentions of learning from him, it has been great experience so far. I see that you are being active recently as well, great job! Hope to see you continue do so.

Hi and welcome to the GreenSock forums. Just use the componentDidMount method (careful now with calling them hooks, it can create a bit of a confusion ) and also remember that the CSS Rule needs to be wrapped in the cssRule: {} configuration object: componentDidMount() { console.log( this.button ); const rule = CSSRulePlugin.getRule(".element:before"); console.log( rule ); TweenLite.to( rule, 1, { cssRule: { bottom: 0 }, delay: 1 }); } I know that the norm is to use the refs for to get the DOM node, but keep in mind that pseudo elements are not DOM elements (as far as I know at least but I could be wrong about it), so there is no way to get the pseudo element the react-way soto speak. My advice would be to store the rule in the component's instance (in the constructor method) and when you need to access it just use that reference to check if it exists before using it in a GSAP instance. This sample seems to work: https://stackblitz.com/edit/gsap-react-pseudo-element-tween?file=index.js Hope that it helps you in some way. Happy Tweening!!!

@Sahil @GreenSock Super helpful! Thanks again! Sahil, your CodePens are amazing, inspiring, and very easy to follow, just wanted to give you an extra thanks! I ended up using ticker for the animation I'm working on I posted it on the other thread, but will here as well in case someone stumbles on this.

I think this line of code in your Animate file might be problematic. TweenMax.to(this.circle_mc, 1, {scaleX:50, scaleY:50, ease:Back.easeOut}) You're telling GSAP to scale your object by 5000%, which enormous. It could be that CreateJS (the HTML Canvas plugin bundled with Animate) cannot deal with such a large scaling factor and that causes the browser to pixelate the circle. I previewed your Animate file in Firefox and Chrome and they both have the pixelation issue. Not sure about this, but I think that objects rendered in HTML canvas are actually raster (aka bitmaps) even if you created them as a vector in Animate or Illustrator. I recreated your animated circle with vanilla CSS and your JS code and the scaling is not pixelated. Bear in mind that the JavaScript syntax is a bit different in that I can specify "scale: 50" instead of "scaleX: 50, scaleY: 50" as with Animate. It might also help to know what you're trying to accomplish with this animation.

Awesome! I just released one today: I'm planning on covering several more, TimelineMax definitely being next. So far, learning has been a breeze!

Hi @tri.truong, This is an option, a bit tricky Happy tweening ... Mikel

If you really need something that'll report if there are any active tweens, here's a function that I whipped together for you that is **not** officially supported, but should get you what you need (if I understand your goal correctly): var root = TweenLite.to({}, 0.1, {}).timeline; //reports whether or not there are active animations on the root timeline (global) function isAnimating() { var child = root._first; while (child) { if (child.isActive()) { return true; } child = child._next; } return false; } So you'd just call isAnimation() anytime and it'll return a boolean. This doesn't take into account gaps inside nested timelines (meaning it'd still report true when the playhead is over the gaps), but I'm guessing you don't need that anyway. Happy tweening!

Hi @DesignCourse Welcome to the forum and thanks for joining Club GreenSock. The Learning Section and Blog here on the site are excellent places to start. https://greensock.com/learning https://greensock.com/blog/ Just reading the forum on a daily basis is an excellent education too. After that, melt your brain by visiting @OSUblake's CodePen profile. https://codepen.io/osublake/ Happy tweening and welcome aboard.

That's close but in your case you are not using different strokes so you can do everything in render function to optimize further. TweenLite.ticker.addEventListener("tick", render); function render(event) { ctx.clearRect(0, 0, canvas.width, canvas.height); // set style and beginPath for (let i = 0; i < lines.length; i++) { // call draw function of prototype but don't stroke in prototype // to avoid stroke calls because you are not using different strokes // or draw lines here directly if you are sure you won't need to make changes // like randomizing stroke etc } ctx.stroke(); }

Hello @tri.truong and Welcome to the GreenSock Forum! I couldn't load your website link in Firefox on Windows 10. But GSAP does have a auto scroll plugin called ScrollToPlugin. https://greensock.com/docs/Plugins/ScrollToPlugin It allows you to do the following To scroll the window to a particular position To scroll to the element with the ID "#someID" To tween the content of a div To scroll when define an x (translateX) or y (translateY) value or both Some codepens of this: And this: There is also the GSAP tweenTo() method tweenTo() : https://greensock.com/docs/TimelineMax/tweenTo() .tweenTo( position:*, vars:Object ) Creates a linear tween that essentially scrubs the playhead to a particular time or label and then stops. If your still having issues please create a reduced codepen demo example so we can test your code live. Happy Tweening!

Hi @SergLine, The reveal of the shadow can be improved. Here's a workaround of @OSUblake, using CSS variables. Kind regards Mikel

I read your question and your code several times and I'm kinda lost as to exactly what you're trying to do here. Do you want a single timeline that gets played forward or backward based on button clicks? Or are you literally animating completely different things based on parameters? If so, what do you want to have happen to the "old" (previous) animation in that case? Like...what if someone clicks back and forth really fast? Are you wanting to kill the previous animation and start from totally different values? Maybe a reduced test case with just 2-3 boxes that illustrates precisely what you're trying to do would help. I'm pretty sure there's a much cleaner way to code whatever you're trying to do; if I could wrap my head around your goal, I'll be able to tell you better. Right now, it looks to me like you risk creating competing tweens, and I have a sneaking suspicion that you coded your tweens in a way that doesn't express what you're truly after (I could be wrong though). There's a mis-match between what you wrote and what you're getting, but I'm seeing the correct behavior based on your code (as far as I can tell at least). Side note: you don't need to define an ease in your "from" vars object - that only belongs in the "to" vars. And xPercent/yPercent values should be raw numbers, not strings with percentage signs. GOOD: xPercent:100, BAD: xPercent:"100%".

Welcome aboard, Gary! The other guys provided some great links to get you going, but I wanted to personally extend an invitation to post any questions you've got here - we love helping folks. This community is one of the best parts of using GreenSock, in my totally biased opinion. And of course let us know when you release any tutorials - we'd love to give them a peek. Happy tweening!

That's a bizarre issue since objects you draw in Animate are vectors. Perhaps you can try to make a completely new Animate file and use the timeline to scale it up i.e. don't use GSAP and see if the problem persists.

I'm not sure why it took me so long to join, a lot of people on my YouTube chan (@DesignCourse, nearing 300k subs!) have requested GSAP content. The greatest UI animations I've seen almost always revolve around GSAP. Hopefully I will pick it up quickly! Edit: I'm going to start learning asap, but if anyone has some recommendations in terms of courses/existing tutorials, let me know. Thanks.

Hi Rodrigo! Man, I just forgot the life-cycle componentDidMount ?! Thanks for the answer, I'll implement with your tips and I'll come back to let you know if it worked as expected About that: "My advice would be to store the rule in the component's instance (in the constructor method) and when you need to access it just use that reference to check if it exists before using it in a GSAP instance." - Thanks for the advice, I'll also test this idea. Again, thanks <3

Have you tried using just one ":"? Like :before? Some browsers report things that way.

@Sahil @GreenSock Thank you so much for your tips! I was able to apply them, as well as some I picked up diving a bit deeper in the forms here. Here's what I'm hoping is near the final product:

Mikel, hi! During this time I decided to make the animation of the shadow a little different, changing dx and dy of feOffset. Here is: I think it looks nice Honestly, I thought it was not possible, to animate drop-shadow. Thank you for this example! It pushed me to learn more about CSS variables)

Hi, I am really excited to showcase my new product which is built on top on GSAP mainly! (Also I found it a chance to promote my product) Fides is an unique, essential intro teaser template with minimal typographic animations which would be perfect as landing pages for Black Friday, Cyber Monday, Christmas, New Year. It is suitable for all niches and easily customizable. Following is the part of the preview of the intro. Since the file upload size is restricted, i inserted a very small portion of the intro here. To view the full intro, please click here. If you want to buy my product, please click here. Please let me know your thoughts on this.... Thank you Cheers, Sven.

Well, it's the ticker event specifically, which is updating what you see (yours is using setInterval, but can also use RAF or RAF Synced) ... which is inside the fnStartAnimation function...which is called AFTER the makeResponsive function (your hiDPI function) -- that code is at the bottom of that script tag. So it's an order of execution thing. However, you kinda wanna keep the ticker event within the start function and have that start after the hiDPI function, otherwise you'll see a quick hiccup when the hiDPI function takes effect.

Hi Celli, See fork below and where I added your code (in the HTML column of CodePen inside the fnStartAnimation function). It's just a copy and paste of your code but you can see around where you should add it. At that point, stuff is all loaded and everything animates just fine. You can make your own function for this particular purpose, just need to make sure the canvas is all set first.

Hi and welcome to the GreenSock forums, Thanks for the demo! When tweening attributes like that it's important that the element already has an attribute with the values you are tweening and it has the same number of numbers. Please read the section "tween complex string values" here: https://greensock.com/gsap-1-18-0 in your SVG markup you had gradientTransform="translate(0,0)" but in you are trying to tween that value to "rotate(360, 250, 250)" which is much different and contains 3 numbers. I changed your svg to have <linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse" gradientTransform="rotate(0, 250, 250)">

That'll depend on how you want to set up your CSS. Maybe something like this: How you handle it is entirely up to you. If you have other GSAP related questions, we'll be happy to assist. Happy tweening.

Yeah, what Sahil already posted are the best examples of showing the complexity of what you want to achieve. It's no small task. I also thought of this example from Chris Gannon which is a bit simpler all around but necessarily easy. Just for inspiration

If don't want to wait for animations, set the globalTimeScale to a really high value. https://greensock.com/docs/TweenMax/static.globalTimeScale()

Ya moving all draw calls to single place would be better for performance. As you are using same stroke, you can construct path in loop and stroke it just once. Also use clearRect on entire canvas because everything is updating on every frame. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas As for coding style, I would have used prototype maybe, because that's how I learned to do using Foundation HTML5 Animation book. You will find it useful if you plan to do more stuff with canvas.

First of all, thanks for providing a reduced test case! Very helpful. It sure looks to me like you are. Your code is building a timeline and then calling reverse() but the playhead is at the very beginning (time:0) at that point, so nothing is really gonna happen if you reverse() it because that just tells the playhead to go back toward the start (...but it's already there in this case). See what I mean? Did you want it to jump to the end and reverse from there? You could dl.progress(1).reverse(). Or the super-secret short way is simply dl.reverse(0).

So decided to do performance test with Custom Ease vs Bezier, and also show look and feel. Performance looks very similar. Here they are if anyone is interested: Any and all feedback/ideas are welcome! Thanks!

Yep, I'd agree with @OSUblake. Technically, though, I personally favor CustomEase when creating very nuanced movements because (at least in my experience) when I try to recreate an effect using a bunch of sequenced to() values it just doesn't quite feel as fluid. That's not because of anything in GSAP - it's just the nature of the beast. Like I've seen lots of attempts at doing an Elastic.easeOut or a realistic bounce with squash/stretch using straight-up CSS keyframes and it looked really weird. With CustomEase, it felt natural. In terms of raw runtime performance, the CustomEase one is likely the best but there's a bit more up-front work to create the ease itself and cache the values. Once they're built, though, it's very fast to actually get/set the values during the tween. I optimized the snot out of it Again, performance-wise I doubt you're gonna notice any real-world difference in any of them. Rendering performance in the browser is typically 99%+ of the load on the browser especially with SVG. Happy tweening!

It's a waste of time to worry about such things because they probably won't matter. At least, not for the scenario you described. Go for the solution that is the easiest to read, understand, and update, C. If you notice a performance problem, investigate it, but there's a 99.99% chance that it will be related to what you're animating, i.e. SVG.