Leaderboard

Hey everyone We’re rolling up on Thanksgiving here in America, so I thought I’d say how thankful I am for this forum. You’re a terrific group of people and one AI. I’m so glad I started participating a few years ago. It’s truly been life changing. As a thank you, I’m gonna drop a couple sliders here for the community. I know there are umpteen ways to make a slider, but this is my take on it. I added multiple control types and linked the nav dots animation to the draggable element for a bit of fun. We often have questions about sliders so hopefully these will be a good jumping-off point for someone. Happy Tweensgiving

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

You can study @OSUblake's demos from following thread on how to speed up and slow down based on path. You can set viewport based on current x translate of car to create camera like effect of following. You can get x position of car using car._gsTransform.x. But make sure the initial position of car is at 0, 0 in your SVG so you won't need to do additional calculations to get exact position of car. There is another advance demo by Blake, I don't think you need that but here is the link,

Hi @wellygirl, Look at this pen: You do not need a 'staggerTo' here. Just tween the elements piece by piece. Speed: try a height of 2000 or 5000 ... Happy tweening ... Mikel

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).

Very slick, @PointC. Thanks for sharing and for being such a central part of the GreenSock community. No doubt these demos will serve people well.

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 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)">

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

I don't know why that wouldn't work. Just set some media queries and resize the pictures. Or just use a percentage for the sizing. Feel free to fork any of the above demos and try it. If you get stuck, we're happy to help with any GSAP related problems. Happy tweening.

Hey @DesignCourse! @Ihatetomatoes - Has some on his site: https://ihatetomatoes.net/ @sdrasner 's Frontend Masters course: https://frontendmasters.com/courses/svg-animation/ Are good starting points imo.

If you want to check on a specific element, you can use the .isTweening() method. https://greensock.com/docs/TweenMax/static.isTweening() Does that help at all? Happy tweening.

Hi again @Zokdok isActive() can work on a single tween, or a timeline. You can see in that codepen example that its using the tween variable that is referencing a single tween to check if its active (running) var tween = TweenLite.to(box, 2, {x:endX, ease:Linear.easeNone}); if(!tween.isActive()){ //only reverse the direction if the tween is not active // do something with tween } that could have happened when the site was migrated to a new forum system, sorry about the inconvenience for missing forum history. Happy Tweening!

Hello @Zokdok and Welcome to the GreenSock Forum! There are number of ways to detect if an animation, tweens, or timeline is running using the GSAP isActive() method. Found here in the GSAP Docs: .isActive( ) : https://greensock.com/docs/TimelineMax/isActive() .isActive( ) : Boolean Indicates whether or not the animation is currently active (meaning the virtual playhead is actively moving across this instance's time span and it is not paused, nor are any of its ancestor timelines). So for example, if a tween is in the middle of tweening, it's active, but after it is finished (or before it begins), it is not active. If it is paused or if it is placed inside of a timeline that's paused (or if any of its ancestor timelines are paused), isActive() will return false. If the playhead is directly on top of the animation's start time (even if it hasn't rendered quite yet), that counts as "active". You may also check the TweenMax.progress() or TweenMax.totalProgress(), but those don't take into consideration the paused state or the position of the parent timeline's playhead. Example of usage: Hopefully that helps.. Happy Tweening!

This is SO helpful. Thanks, you saved my day!

@OSUblake has written a ton about canvas. If you search the forum, you'll find many helpful threads. Here's one about migrating from SVG to canvas. Happy tweening.

You can't animate most flexbox values because they're words, e.g. flex-start, space-around, column-reverse. You can't say, animate to column reverse. The browser has to do the layout. But that's actually a good thing as that's one less thing you have to calculate. To do a flexbox animations, start off by recording the position of your element in it's current state. Now change its flexbox style and let the browser reposition it. Now record the new position of your element. You now know where the element was, and where its supposed to be. Now move your element back to it's old position and animate it to it's new position. This all takes place in between animation frames, so you won't see the jump. This technique will work for every flexbox property. It will actually work for any type of layout that the browser handles, like the new CSS grid. For more information, check out these threads.

Yep, that affects EVERYTHING (hence the "global" part).

Thank you! I was struggling so much. You are all awesome.

This is exactly what I was looking for. Thank you very much

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.

@Sahil Really helpful tips here! Thank you! I'm still wrapping my head around some of the canvas properties and how they work, constructing the path in loop will really help simplify. Appreciate the resource links too! thanks!

Thank you @GreenSock for pointing this out. There wasn’t any shaking anymore, because my brains malfunctioned and I changed the original pen after @Jonathan’s first answer ?

I didn't see any problems with it. The only other thing you could consider doing to optimize performance (though probably not significant) is to batch all your canvas drawing into a single onUpdate that sits on your timeline (or a TweenLite.ticker.addEventListener("tick")) instead of an onUpdate in every tween. But again, we're probably splitting hairs here. @OSUblake is our resident canvas expert, and @Sahil has been diving in lately too, so those guys may have other advice.

Hi, Like this one? Happy shadowing ... Mikel

Hi @dorijacobson It's really hard to say without seeing the code you have. Can you provide a CodePen of the issue?

Hi @wellygirl, I've been thinking about how the movement to the left could run more precisely. Here is a version with stepsEase (unfortunately it jumps): Here's the try with a callback. But it does not work in the backward movement (?): Hope, you will find your solution. Mikel

For animations like that you'll most likely want to use canvas or WebGL. Seems like three.js would be a good possibility for your needs. https://threejs.org/ This is not to say it can't be done by cloning DOM or SVG elements. It's just that it probably won't perform as you'd like. In answer to your question, no there isn't any out-of-the-box duplication feature of GSAP. You'd create the elements in a loop or by cloning an original. After they're created, GSAP will have no problem animating them. Hopefully that helps a bit. Happy tweening.

Hello @Alan Kell and Welcome to the GreenSock Forum! Without a codepen we wont be able to see performance issues. First i would say that you should change the CSS property top in your tweens to use y (translateY). Since animating a position offset like top (as well as left, bottom, or right) will cause your element to trigger layout which is bad for performance. Using CSS transforms will allow your element to be animated without causing a layout calculation on every render tick (frame), which means silky smoothness. See CSS Triggers - top: https://csstriggers.com/top But as far as setting CSS properties with jQuery css() method. You should use the GSAP set() method instead of using the jQuery css() method. So this way you are setting CSS properties via GSAP so it can keep track and record what CSS properties you change. Otherwise you are changing css properties outside of GSAP. So you can change the jQuery css() method from this: // change jQuery css() method $("#modelSwipeLayer").css('display', 'none'); $("#ctlTopCurve").css('display', 'block'); $("#ctlTopCurve").css('z-index', '1'); $("#ctlHeader").css('height', '40%'); $("#imgHeader").css('marginLeft', $(window).width()); $("#imgHeader").attr("src", "/Content/Images/hero-image-3.jpg"); $("#imgHeader").css('z-index', 0); $("#IndividualDashCompareDescriptionContainer").css('display', 'block'); $("#IndividualDashMeasureDescriptionContainer").css('display', 'block'); $("#imgHeader").css("opacity", 0); $("#imgHeader").css("marginLeft", 0); To this using the GSAP set() method and using the GSAP AttrPlugin for setting your image src attribute: // to the GSAP set() method and AttrPlugin TweenLite.set('#modelSwipeLayer', {'display': 'none'}); TweenLite.set('#ctlTopCurve', {'display': 'block', 'z-index': '1'}); TweenLite.set('#ctlHeader', {'height': '40%'}); TweenLite.set('#imgHeader', { 'marginLeft': $(window).width(), 'z-index': 0, attr:{ "src": '/Content/Images/hero-image-3.jpg' } }); TweenLite.set('#IndividualDashCompareDescriptionContainer', {'display': 'block'}); TweenLite.set('#IndividualDashMeasureDescriptionContainer', {'display': 'block'}); TweenLite.set('#imgHeader', {"opacity": 0, "marginLeft": 0}); But its always better to create a reduced codepen example for use so we can test your code live: Resources: GSAP set() : https://greensock.com/docs/TweenLite/static.set() GSAP AttrPlugin: https://greensock.com/docs/Plugins/AttrPlugin Happy Tweening!

Hi @bennyboy1978 Here's a demo I made for this thread. You may find it useful as it deals with blur events.

Hi @bennyboy1978 If I understand your question correctly, I think this should work for you. $("input").focus(function() { TweenMax.to($(this).siblings(), 0.6, { y: -45, x: -20, ease: Power2.easeOut }); }); Happy tweening.

I didn't notice any shaking. Hm. Oh, and I'd definitely recommend using scaleX:2 rather than attr:{transform: "scaleX(2)"}. Much faster.

TweenLite is the base file that all the other files import from, and it seems to be working correctly. You can check what's installed by logging this out. console.log((window as any).com.greensock); Everything else like the CSSPlugin, TweenMax, TimelineLite, TimelineMax, etc ends up being undefined in the build. I have no idea what the build optimizer is doing to cause those problems. My guess is that Angular doesn't like the way TweenLite works with the Window object. I think your best bet is to add GSAP files to scripts in your angular.json file if you want to use the build optimizer. I didn't check, but you may need to use the umd versions for that.

Hello @Josef and welcome to the GreenSock Forum! Sorry your having this shaky issue. I was also seeing a slight jitter shaking of letters, but in Firefox and Chrome on Windows 10. To better help you troubleshoot this: Can you please verify what OS and OS version you are seeing this on? What Chrome version is this? I believe this is caused by the animating of the width attribute. You can see how it is less or not shaky when you comment out that tweens that animate the width attribute. Maybe you can animate scale instead of the width attribute? But we are still looking into this so i can test on an Apple device so i can see exactly what you are seeing. Thank you while we look into this for you

Hi @Zaperela and welcome to the GreenSock Forum! Here are some helpful resources on CSS transform-origin: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin https://tympanus.net/codrops/css_reference/transform-origin/ https://teamtreehouse.com/library/changing-the-transform-position-with-transformorigin Even though SVG does not support 3D transforms at this time. That wont stop you like @PointC advised from separating your SVG into separate parts. Then you can wrap each SVG in a <div> tags and animate the <div> tags using 3D transforms. And here is just a simple example of swinging a door open and then closing it, so you can see the structure and use of transform-origin. But there are many ways to achieve what you want. Best of luck to you! Happy Tweening

Sure, wanna give it a shot on codepen? Just use this URL: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText.min.js Is that what you were hoping for?