Leaderboard

Is the "paint out" animation happening after some time or an event handler, like click, hover, etc.? This is the most important part in order to choose the best course of action. I'm going to guess based on the code you added in the first post. If the animation happens some time after the "paint in" animation is completed then GSAP has you covered. All you have to do is create a delayedCall instance and execute a function to start the other animation. You can create a method in your react class in order to simplify the whole process. Something like this: class MyComponent extends Component { constructor(){ super(); // this method will create and restart the delayed call this.paintOutTimerCreator = this.paintOutTimerCreator.bind(this); this.paintInTween = null; this.paintOutTween = null; this.paintElement = null; // this is the DOM element being animated this.painOutTimer = null; } componentDidMount(){ const { paintOutTimerCreator } = this; this.paintInTween = TweenLite.to(this.paintElement, 1, { width: "110%", zIndex: "900", ease: Expo.easeInOut, delay: 2.1, onComplete: paintOutTimerCreator }); this.paintOutTween = TweenLite.to(this.paintElement, 1, { width: "0", right: "0", left: "initial", ease: Expo.easeInOut, paused: true}); } paintOutTimerCreator(){ if ( this.painOutTimer ) { this.painOutTimer.restart(true); } else { this.painOutTimer = TweenLite.delayedCall( 4, () => this.paintOutTween.play(0) ); } } // I'll assume that this part of your code is working render(){ return(...); } } As I said this code is assuming a lot of things, so it would be nice to have a better grasp of what you need. As always if you could provide a reduced sample in codepen, it would be very helpful. Happy Tweening!!!

Trying to build a complicated UI library using only className tweens will be difficult. My advice would be to avoid them. They're really not that useful, and can cause all sorts of problems if you're not careful. If you really want to animate classes, then you should use CSS. You might want to look into how modern frameworks like React, Vue, and Angular use css, or the lack thereof. CSS in JavaScript is pretty common nowadays, making CSS files completely optional. Animating properties like height and padding aren't any better. Look at what animating height triggers. https://csstriggers.com/height The browser spends a lot of time rendering a nice looking web page for you, and then on every animation frame you come along and destroy it. That makes the browser sad. ? To make the browser happy you'll need to leverage transforms. Instead of changing the width or height on every animation frame, you can reduce it down to 3 layouts/reflows using a technique called FLIP. First - Record the initial state of your element, like its position and dimensions. Last - Move your element into its final state, and record those values. Invert - Now move your element back to where it came from. You now know all the values that will be needed for a transform based animation. Play - Play the animation. The browser will go back to being happy again. I came across a couple FLIP animations that I though were pretty neat, and wanted to make them with GSAP. What I ended up with was the start of what could be a nice library for doing FLIP animations with GSAP. It's pretty easy. Just pass in the elements you want to animate, a modifier function, and some animation options. The modifier function is just a function that will change the element in someway, like toggling a class, or moving it somewhere else in the DOM. var video = document.querySelector("#video"); Flipper.flip(video, videoModifier, { duration: 0.5, ease: Sine.easeInOut }); function videoModifier() { video.classList.toggle("minimized"); } There are no width or height animations in this demo. It's all done with scaling. I'm making use of the new ExpoScaleEase for counter-scaling. Good idea? This is something I might be interested in making into a library if there's demand for it.

Hello @overdub60 and Welcome to the GreenSock Forum! I could not see the transform stutter using @Carl's codepen fork of your codepen in either Chrome or Firefox. In your codepen I did see a slight hesitation though on start. You should really look into using will-change very sparingly. It seems you are using it on properties that it wont even work on, like height. The CSS will-change property should only be used on CSS properties that regularly and constantly change, and need to be kept optimized. Only the following keyword values should be used with the CSS will-change property: will-change: auto; will-change: scroll-position; will-change: contents; will-change: transform; will-change: opacity; But you should really only use will-change for the CSS transform and opacity properties. Since they will be the only ones that can take advantage of getting a new stacking context and put on a new rendering layer. See Jack's ( @GreenSock ) article regarding this on CSS Tricks: https://css-tricks.com/myth-busting-css-animations-vs-javascript/ Also keep in mind that will-change has some buggy intermittent behavior cross browser, especially in webkit based browsers like Chrome, Safari, Opera, and MS Edge. You can see the following article in regards to that. https://greensock.com/will-change I noticed in the browser inspector that when your element animates at first, that scale is not rendering using transform: matrix3d() or scale3d() on the element. This can be achieved by adding a slight rotation:0.01 on the GSAP tween to allow matrix3d(). That will create a new stacking context and makes your animation smoother. But again keep in mind that using will-change on parent and also children elements can give you worse performance and not better performance, thus negating the use of will-change. Just my two cents, Happy Tweening

jQuery doesn't support SVG. https://github.com/jquery/jquery/wiki/Won't-Fix#svg-or-vml

@GreenSock - somebody's getting fancy today. Nice! I've been 'GreenShocked' I was just about to tag you into this thread. After I posted my demo, I looked at it in Edge 41 and I'm seeing some weirdness. Your demo is doing the same funkiness as mine. The line sometimes draws a bit, other times not. If you resize the window, it then suddenly appears. Maybe this is a CodePen/Edge issue, but thought I'd mention it and see if you can confirm? I'm using Edge 41.16299.248.0.

As usual, @PointC is right on. For the fun of it, I made a little dynamic demo that'll plot things around a circle and show you how to convert angles into the drawSVG % values so that you can do your variables accordingly: Just click on any of the green dots and you should see what I mean. That assumes you want to always start the drawing at the top. You could change that, of course. Hopefully this gets you headed in the right direction. In any case, a mask is likely what you need. Happy tweening!

Well ya, easiest way to go about it would to use MorphSVGPlugin, which won't be overkill at all unless of course you overuse it throughout the page. You can do that manually too but it is going to be time consuming to figure out how every effect should play out. GSAP animates any numbers or numbers contained within a string. So you can animate your paths by passing string of ending path. Downside to this approach is, GSAP does bunch of calculations to facilitate you to use complex paths and morph them into each other. If you try to do it manually, you will need make sure that your path is identical with only changing thing to be numbers. Your line, curve, arc should be in same sequence in both start and end path. If you can't keep the same sequence then you will need the MorphSVGPlugin. To save file size, you can use TweenLite but you will need few other plugins to make this effect work. 1. CSSPlugin to animate scale of the middle line. 2. AttrPlugin to animate attribute 3. EasePack plugin so you can use complex easing effects 4. CustomEase plugin to be able to use custom ease, as the easing effect that you have used isn't simple elastic ease. You will need to use customEase for it. 5. Finally you will need the TimelineLite as well to be able to simplify editing and to organize complex animations into single timeline. If you use TweenMax then you will only need customEase plugin as rest files will be included with it. If you don't want to use customEase then you can resort to using Back ease which will give you similar effect with minor compromise.

It appears to me that using TweenMax to handle the scaling of the object removes that little glitch on initial run. Does that work better for you?

Hi @PointC, Thanks very much for that, really appreciate your help! I understand your solution, and it works perfectly. I like the idea of a trigger container - seems quite straightforward in hindsight but I'd probably never have thought of it Thanks also @Visual-Q for your reply. Cheers guys.

Yep - your demo seems fine in Edge now. I threw a rotation:0.1 onto my demo and that seemed to solve things too. Weirdly, everything works correctly in IE11 without any extra fixes so I assumed Edge would be okay, but that's what I get for assuming. Edge is really starting to get fussy.

Great catch, Craig. That's definitely a browser rendering bug. I worked around it now by adding this to the tween: strokeMiterlimit:Math.random(). Silly, I know, but changing the strokeMiterlimit is a way to force the browser to re-render the path/mask. Seems to work well for me now. I'll add this fix to DrawSVGPlugin itself in the next release as well.

I'm not sure I follow. Do you mean the white rectangle in my demo? If so, that can be removed (or change the color) and the mask will still be fine. The white stroke in the mask is just what will be revealed, but it doesn't have to be over white. Is that what you meant?

Hi @DevSaver For a dashed line and DrawSVG, you'll need to use a mask. I wrote about that here: Using variable shouldn't be any problem. You could do something like this: You may also want to take a look at our big 'circle start point' thread. Hopefully that helps. Happy tweening.

Hi @mbower Welcome to the GreenSock forum. Looks like you're getting some elements stuck with rapid hovering. If it were me, I'd create a timeline for each element and play/reverse on hover. That way nothing can get stuck in the 'back' position. Something like this: You'll also see that I added a .trigger class around each of your rotating containers. I did that because each of the rotating containers was the trigger and if you moved the mouse during the rotation, it would sometimes no longer be over the element and trigger the reverse. By adding a trigger div that isn't part of the actual rotation, the mouse is always over the target element throughout the rotation even if you move it a bit. I don't know if that's what you'll want to do in your final project, but it's just an idea. Hopefully that helps. Happy tweening.

I notice couple of problems, 1. You are using 3 year old version of TweenMax. 2. You are using will-change everywhere, which can be counter productive because it puts additional work load on GPU memory if I am not mistaken. 3. You were using Tween but updating your scale using onUpdate which is unnecessary as you can directly tween your element. See if following demos help,

SVG elements are created differently than html elements. Using vanilla js you create html elemnts using, var elem = document.createElement('div'); While you create svg you use following syntax, var elem = document.createElementNS("http://www.w3.org/2000/svg", "text"); I did quick search to see if jQuery supports creating svg elements but didn't find anything. Here is how you can create your element while still using jQuery. Also, from wherever you forked this demo, it is using really old version of Draggable.

Hi, The thing here is that componentWillUnmount is not designed for that actually. From the React docs: Basically the lifecycle methods are there only as hooks or event emitters, soto speak, pretty much like GSAP's own callback system. The onComplete, for example instance is not going to wait for something else to happen before executing the provided callback. Like that componenWillUnmount is not going to wait for some animation or anything else that might take more time than it's own execution to complete and remove the component. So that's not a good place for any of that type of code. In fact this particular hook is not as used as others lifecycle hooks. A good thing would be to know exactly what you're trying to do.For your code I assume that you're still working on the loading overlay from the other day. If you're trying to simply animate out the component without removing it from the DOM then I'd recommend a simpler approach, such as a regular event handler like a button or something similar. This sample animates a DOM element with a delay (wait two secs) and then with the button you can toggle the animation Another option is a callback in the GSAP instance itself. As I mentioned it'll be best to know exactly what you're trying to achieve and take it from there. Happy Tweening!!!

You can do it with a set ... but my bigger question is, what is it you're trying to achieve? I have a hunch that what you want to achieve can be better handled without multiple background images. https://codepen.io/sgorneau/pen/xWgepN

@PointC ya certainly morph will be tricky but I think it's doable in two steps just like my demo. ya I will set profile pic there.

Nice work @Sahil I was just starting on something similar when I saw you post your solution. I think animating the d attribute string is a better approach in this case. I think morph might be a bit tricky. I haven't tried it, but I have a feeling it wouldn't be quite as smooth. Well done! PS Why don't you have your picture on your CodePen profile? How can I be sure it's really you?

They're looking for this line in your html file: <script src="https://s0.2mdn.net/ads/studio/Enabler.js"> </script> Then make sure your click-throughs and other events are using their Enabler class.

Hello everyone, Thanks for your help! My rotator looks nice now! All the best!

@EugeneA I gave it a try for 5-10 minutes, my quick feedback is 1. It seems like a useful tool with plenty of options to work with, though yet to try everything. 2. User interface while interacting with objects is sort of unnatural with colorful handles. I think people will find it more useful if you use icons showing what each handle does. 3. If transform origin is changed, the resize handles start behaving unnaturally, which is hard part to work around but anybody using visual tool will expect it to work like adobe resize handles work. 4. Overall the interface seems like simple and user friendly. 5. Isn't there option to export mp4 instead of avi? @cartimundi Just saw your question, this tool exports animation as gif or video, might be what you are looking for.

Luaskaaspary, I'm guessing your post above where you just quote jamie's answer from 5 years ago was a mistake. If you have an actual question please let us know, otherwise I'll delete it. no biggie.

From what I can tell there would be no benefit to using your second method. Calling a function every 1000th of a second isn't going to get you more visual updates than ENTER_FRAME.

I don't know anything about FB ads, but if you need to create some GIFs from your SVG animations, check out @chrisgannon's SVG2GIF. https://github.com/chrisgannon/SVG2GIF Happy tweening.

Here's an example of a function for running animation on FullPage section load. Note this is only the function you need to call the function inside the callback. jQuery.animateOnSectionLoad = function (){ var activeSection = $('.section.active'); $( ".animation-element",activeSection).each(function(){ var animationTarget = $(this); //run your gsap animation on animationTarget variable // assumes of course you have class animation-element on tag being animated }); }; Appended post to show callback with FullPage initialization $(document).ready(function() { $('#fullpage').fullpage({ //events onLeave: function(index, nextIndex, direction){}, afterLoad: function(anchorLink, index){ // function inserted in callback $.animateOnSectionLoad();}, afterRender: function(){}, afterResize: function(}{}, afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){}, onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){} }); }); Notice there are also many other callback options for Full Page. Would be a good idea to reference FullPage in title of this post so people know that is what it's in reference to.