Leaderboard

First off, where the heck did you get that curve from? That's an insane amount of points for a shape so simple, haha. The main difficulty is setting up your SVG correctly. So you should go ahead and recreate the exact shape that you need. To create a fade like that you could create two ovals (probably using <ellipse>s), one with the blueish color fill and one with a white fill (or whatever the background color is going to be). Then offset the white one, maybe adjust its height, and make sure it's on top. Once you have that, then create a path that goes around all of the visible (blue) area. You can do that by duplicating the blue oval and then converting it to a path. GSAP's MorphSVG has that conversion functionality built in. Make sure that it has a thick enough stroke-width to cover the blue in all sections. If you constructed your SVG like I described, then you don't even have to turn the path into a mask, you can just leave the stroke as white. Thus in your SVG you shouldn't see anything because the white oval and path with stroke should be covering your blue part. But if you delete the path with stroke you should see the shape that you have above. Then in your JS you can use drawSVG on the path with stroke to hide it, i.e. something like TweenLite.to("#pathWithStroke", 1, { drawSVG: 0}); or in GSAP 3 gsap.to("#pathWithStroke", { duration: 1, drawSVG: 0});. And voilà! You will have the animation that you need. Here's a really rough implementation of it. https://codepen.io/GreenSock/pen/BaaGvqW If you need help animating it from a certain point see this thread, but hopefully you create your SVG in such a way that this isn't necessary

There is no cycle in v3. Use gap.utils.wrap() or gsap.utils.wrapYoyo(). https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap() https://greensock.com/docs/v3/GSAP/UtilityMethods/wrapYoyo() var tw = gsap.to([myMapContents, myMapShadows, myMapExtras, myGridClose, myGridFar], { duration: dur, x: gsap.utils.wrap([deltaX, deltaX * .96, deltaX * .8, deltaX * .6, deltaX * .4]), y: gsap.utils.wrap([deltaY, deltaY * .96, deltaY * .8, deltaY * .6, deltaY * .4]), ease: "power2", onComplete: moveMapComplete, onCompleteParams: [instance], onUpdate: onTweenUpdate, onUpdateParams: [instance, dur] }); Notice the string ease. Much shorter. "power2" is the same as "power2.out". Be sure to check out the release notes.

That's the correct way. What problem are you having? But you don't have to import any eases. Just use strings. They're much shorter.

And imports are no longer global. You will need to add import { gsap, TweenMax } from "gsap" in every file where you use it.

I agree with Zach in this, I think you're over-complicating things a bit (something we all have done to be honest ). You can easily create an empty timeline using useState() and later in the initial render you can add child instances, labels, callbacks, etc. to it, in order to avoid errors: const [tl] = useState(gsap.timeline({paused: true)); useEffect(()=>{ // here add instances to the timeline }, []); You're right about adding paused timelines to a parent one. Normally in that scenario I create the child timelines paused and when I add them to the parent I un-pause them: const masterTl = gsap.timeline({ paused: true }); const childTl = gsap.timeline({ paused: true }); // add child instance masterTl.add(childTl.paused(false)); // later on your code you only control the parent Timeline Finally, avoid adding instances to a timeline because of a state update using useEffect, this will keep adding instances and callbacks to your timeline on every state update and at the end you could end up with a lot of unwanted callbacks and instances inside your timeline. As suggested create the timeline at runtime and then, if possible, add all the instances to the timeline on the initial render. Then control the timeline using useEffect. Here is a simple example of creating and controlling a timeline using Hooks: https://stackblitz.com/edit/gsap-react-hooks-timeline-instance-toggle Happy Tweening!!!

Hey @st3f and thanks for being a Shockingly Green member! perspective is actually meant to go on the parent of elements that are being transformed in a 3D way. So if you apply perspective: 200px; to .container then it will work as you expected. transformPerspective actually sets the transform: perspective(); on the element, which is meant to be set on the element and not the parent. Note that there are a lot of browser bugs in various browsers related to 3D transforms, especially with perspective, so sometimes it might take one or the other (or a combination) to get the effect that you're desiring. GSAP does its best to fix these errors but sometimes there are edge cases that you might need to play with a bit to get working. A side note is that if you .set() a property (like perspective) and you're not wanting that to change, you don't need to also include it in your tweens like you did with the .to() in the example. The property will remain on your element(s) until it is removed or changed later. Happy tweening!

Hi, You should try using the Transition wrapper from React Transition Group to unmount the elements after the animation is complete. This was discussed in this thread, where @OSUblake shares His approach to this as well: You could definitely use the intersection observer API, to set the in property in the <Transition> element to remove the elements if you want to animate them out. If the element is not going to be visible anymore (because of the scroll position) then you could use the intersection observer and simply use state or props to conditionally (not)render the element. Finally as an advice you're running a ternary operator several times in the useEffect hook based on the hoveredvalue. Since you're in a function just create an if statement, an object and add the properties as keys and the values depending on the value of hovered. In terms of performance it shouldn't really matter (unless you run a few hundreds in a short span of time), but your code will be easier to read and maintian, just my two cents on the subject. Happy Tweening!!!

If you know the index position of the element it should be something as simple as this: document.querySelector(".anyclass:nth-child(3)"); If you don't then you'll have to do a querySelectorAll(".anyclass") and then iterate through that collection and find a specific attribute in the targeted element. Happy Tweening!!!

What Shaun said is definitely the core of the issue. A small side note is that in GSAP 3 it's more proper to put the duration inside of the vars parameter, like so: tl.from(".bracket-l", { duration: 1, x: midPointOffset }, 0) .from(".bracket-r", { duration: 1, x: -midPointOffset }, 0);

Maybe not. ScrollMagic needs to change the onOverwrite property. Open an issue with them. ScrollMagic isn't a gsap product. https://github.com/janpaepke/ScrollMagic

Jack (and team), thanks for continuing to put out such an outstanding platform! Not sure what's my new favorite feature (maybe the auto height?), but regardless thanks for all the hard work, kudos are well deserved!

Here's a fully random version in GSAP 3.0 using the new each, wrap and repeatRefresh: https://codepen.io/chrisgannon/pen/eedc13af50b6269167c85a2667d522dc

Ok, delved in (read) the docs and throwprops is inertia, and realised I needed to register them...

Hey Joe. Thanks for being a Shockingly Green member! I think the main issue is that the easing on your timeline tweens are not linear (but the playback of your video is). Changing that seems to fix the issue. https://codepen.io/GreenSock/pen/poopgRw?editors=1000 Cool effect though! Side note: I recommend using a position of 0 instead of "-=1" for the second tween just incase the duration of the first tween changes.

Started from the bottom now we here

Do you have a GSAP question? You probably have a problem in your css, like position. *, *::before, *::after { position: relative; }

hey nice bug It convert number to string! https://codepen.io/djmisterjon/pen/YzzRRWL

Sorry about that - yes, this edge case was handled differently in v3 on purpose but upon reflection, I think it's best to revert back to the old behavior. That'll happen in the next release which you can preview at: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js Thanks for reporting this!

ooohhh, now I get it. The scope, always the scope is my problem in js... "instance" is a class I use to draw things. Thank you very much, I think I've found a way

Another benefit is that you can use function based values. And it fits with keyframes and makes the code more readable/clear. Trust me - it's a little annoying at first for people who are very used to the "old" way, but I'm pretty confident you'll grow to appreciate it after a while.

Hey Shakespeare and welcome. You can do this sort of thing by animating a mask. The thread below gives more info on how to do it: Let us know if you need more help!

Doh! Old habits are hard to break! 🤪

Why do you need matrix3d? It uses translate3d because you can use units now.

Hey Ced, As I said in the other post, since your users can't scroll normally you shouldn't use most of the scroll position detection that I gave you. You can just fire some some timelines based on which navigation item is clicked. https://codepen.io/GreenSock/pen/eYYMwGw Note that I also used GSAP's scrollTo plugin to give it a smooth scroll to each section, starting the timeline once that section has been reached. Let me know if you have any questions with this approach.

For the pause thing, I think you might be looking for addPause. https://greensock.com/docs/v2/TimelineMax/addPause() For the promise stuff, I think it could be done much better. If you need stuff to run sequentially, just do this. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await async function doStuff() { await $txt(id); await $txt(id); await $txt(id); await $txt(id); await $txt(id); await $txt(id); await $txt(id); } Demo using await. https://codepen.io/osublake/pen/dvdoze

First of all, thanks for joining Club GreenSock, @lgehrig4! It sounds like maybe you're using the ES Module file in a standard <script> tag, but in your environment it'd be best to just use the one from the "minified" folder in your downloads. For context: We provide several versions of each plugin for maximum compatibility. Some people want to use ES modules in their build system, so that's the "ESM" stuff, or the bonus stuff that's in "bonus-files-for-npm-users" folder. If you want to use an ES Module file in the browser, you must set type="module" in your script tag, like <script type="module"> and then put import statements in there, but if that doesn't make much sense to you don't worry - just avoid the ES module files (you don't NEED them, we just provide them for people who prefer those) Again, for a standard <script> tag, simply point to the SplitText.min.js file from the "minified/utils/" folder in the zip. Does that help? Happy tweening!

Thanks for the replies. That makes sense how you described it. Basically with tweenFromTo, a Tween is spun off of the Timeline. Based on that description, I would expect TweenMax.killAll() to solve my problem...and it does! Though, another unexpected behavior is after killing the tween with TweenMax.killAll(false, true, true, false) (the last false is for timelines) I would expect to be able to run tweenFromTo again by clicking the Start button. +1 vote for renaming kill() to politelySayNo() and killAll() to nuke() 😁 https://codepen.io/sallf/pen/OJJgypR

Hey @Page Tailoring, Just do it ... https://codepen.io/mikeK/pen/WNNLbLZ Happy tweening ... Mikel

It should actually be pretty easy - you just put your animation code into a function that you call initially as well as onresize. Store a variable for the timeline outside of that function. Record its position and re-set it on the new stuff so it all feels seamless. Pseudo code: var tl; // timeline function buildAnimation() { var time = tl ? tl.time() : 0; if (tl) { tl.kill(); } tl = gsap.timeline(); tl.to(...) .to(...); // do your animation tl.time(time); // set the playhead to match where it was } buildAnimation(); //kick things off window.addEventListener("resize", buildAnimation); You can invalidate() a timeline anytime - that'll force it to re-record its starting values on the very next render. Feel free to do that in an onRepeat if you'd like (or whatever).

Hey kretivzirkel and thanks for posting. This is a known behavior and the intended one, though we are trying to figure out a better way to help users understand what's going on there. Plugins like CSSPlugins are part of the core in GSAP 3, so they're not really plugins (something outside of GSAP). But internally they're kind of treated like plugins and their functionality is pretty much the same as a plugin. So it's a weird situation where it doesn't really fit perfectly in either place. Does that make sense? So to reflect that in the documentation, we placed things like CSSPlugin in the "Core plugins" page under GSAP which is more accurate for the API. Then we made a link to those from the Plugins page because they're still kind of plugins and we figured people would look for them there. Do you have any suggestions about how we can show that better off visually? Now that GSAP 3 is out, we will start to turn our attention to details like these to improve them.

Hey Brad, cool site! Welcome to the forums. Your animations look pretty smooth to me (given I don't scroll too fast too many times right in a row - I think that's more of a logical error. Is that what you're referencing?). Is it a particular browser that's giving you trouble? or a part of the site's animation that it happens with? That's a bit of code to look through even though most of it is unrelated. Guessing somewhat blindly, I'd guess that it's because the overwrite property has a different default in GSAP3. In GSAP 2 it was "auto" by default but in GSAP 3 it's false. You can test it by putting gsap.defaults({overwrite:"auto"}); to the top of your script. P.S. Small note: "out" is the default ease, so you can just say "expo" instead of "expo.out" if you want to.

Hi guys, Since I'm fairly new to javascript, I just want your opinion about my solution. Is it ok to do like this? I am trying to not make a too many intersection observers. Therefore I create the timelines based on the class names of the parent div's. Is it a performance killer? Hope this makes sense.

Thanks for your hard work! The default settings for a timeline have been most wanted feature for me recently. Thanks for all other features, I'll test them in near future) Keep up the good work!

Hey exhumator, You can look at the code in the head of the page there to see his approach. Legally you're not allowed to copy his code but it would help give you insight as to how to approach it. Alternatively email the creator (rez@lol.pm) and ask him if you can use it and what your purposes are for it. You don't need to use pixi. I highly recommend using <canvas> (like he did) or WebGL though.

Here's the math to cover an entire area with a circle... https://greensock.com/forums/topic/18880-page-transition-with-barbajs/?tab=comments#comment-87730 https://codepen.io/osublake/pen/PdZQrL

In GSAP 3 you can assign an ID to a tween (or timeline) and use gsap.getById() to look it up. Not sure if that's helpful If you're really worried about garbage collection (the browser cleans up pretty well by itself) you can consider adding a default onComplete for your tweens that cleans up however you need.

How about Free gifts ? ShockinglyGreen ❤️😁 or just one free shockinglyGreen feature like : morphSVG plugin or discount for club

Hey unvs, Thanks! I'm guessing you're running these if checks immediately after the timeline is being created and plays? I was able to get it to work with a very short delayedCall. I'm guessing it's because the timeline doesn't become active until the next animation frame? @GreenSock can check me on that. Not sure if it's meant to be that way given it wasn't that way in v2. v3: https://codepen.io/GreenSock/pen/wvvxYoZ?editors=0010 v2: https://codepen.io/GreenSock/pen/MWWBPpy?editors=0010 Thanks for bringing this to our attention!

Hey @AJT, Welcome to the GreenSock Forum. You could use a cockie. Take a look at this example. Your cockie would be 'homeVisited' and the conditions as needed. Happy tweening ... Mikel

Is there any particular reason you're not just using scale instead of width/top/left? It'd probably perform much better too. Transforms are faster for the browser to render. Your code would be simpler too. As for why Edge is rendering it oddly, that's tough to say without seeing it in the browser - do you have a reduced test case, perhaps in codepen?

https://codepen.io/GreenSock/pen/gOOgwZV?editors=0010 I did several things here: I switch out the anchors that you had for real buttons. There's no reason why you should use an anchor for moving slides/images, anchors are for navigation. I switched your (now real) buttons to use the disabled attribute instead. This is not only more semantic and accessible, but is easier to manage via CSS. I simplified your enable/disable function. You really are just checking two things: 1) is the counter at the first position? and 2) is the counter at the last position? Based on that information, you set the state of the buttons. I changed your (not working) animations for each box to animate the container instead. It's simpler and more logical. I added a resize event on the window to keep it responsive. I assumed you would allow the button to be clicked before the animation completes. If you don't want this, you will need to keep track of the animations and check .isActive(). Let me know if you have any questions about my approach! Happy tweening.

Hi, Thank you for your quick reply... I created a CodePen @ https://codepen.io/storyproblemdoctor/pen/JjjbjJE

Thank you Zack. That did help. I'm glad to hear that I didn't make a poor chose with what to call in GSAP. Any other tips would be appreciated. As for GSAP 3, what I have seen of it has me excited. I might do a performance profile of this same use case implemented in GSAP 3 to see if there's any boost.

perhaps this will be of some help

I have figured out how to get the resizing to work: I understood the need to .clear() the timeline on each resize, but it was confusing me how to fix the animation as particles would randomly fly from mid-way through other lines on the polygon. I fixed this by immediately setting the start point of the animation to the last point of the shape (Where the last path ends), which has done the trick. Took me some time to figure it out but I got there It could probably be a little neater but it works! Now all I need is to initially fly the particles in from the edges of the canvas, any help achieving this would be much appreciated as I have no idea how to go about achieving it.

Yeah, sorry about that - I put that 1000-second limit on GSDevTools to avoid situations where crazy long (like infinite) timelines couldn't really be controlled intuitively (imagine dragging 5 pixels and that making the timeline shoot ahead by thousands of seconds). I didn't really think folks would intentionally go beyond 1000. You should be able to simply set a "maxDuration" vars property to override that if you'd like, like GSDevTools.create({..., maxDuration:5000}); Does that help?

Just wanted to share some nice functions I came across that can be used with the ModifiersPlugin. Doing a normal modulus calculation restarts the value at 0, which may not be what you want. 500 % 500 // => 0 This function will allow you to do a modulus operation for a min/max range. wrap(500, -100, 500); // => -100 function wrap(value, min, max) { var v = value - min; var r = max - min; return ((r + v % r) % r) + min; } And this is a modified version of that function that will make the modulus value "yoyo". mirroredWrap(600, -100, 500); // => 400 function mirroredWrap(value, min, max) { var v = value - min; var r1 = max - min; var r2 = r1 * 2; v = (r2 + v % r2) % r2; return v > r1 ? (r2 - v) + min : v + min; } With the first wrap function you can do some interesting stuff, like making an object appear in two different places, kind of like in those old asteroid games. http://codepen.io/osublake/pen/XpbmYr/?editors=0010 And with the mirroredWrap, you can do stuff like creating multiple bounces with a single tween. http://codepen.io/osublake/pen/mRJeNX/?editors=0010 .

@PointC Why did you use a stagger? That got me thinking about something, using the same element in a stagger. I never tried it before, but it will work if there's no overlap in time. TweenMax.staggerTo([".red",".red",".red",".red"], 1, { x: "+=50" }, 1); Another experiment. Using lodash to fill an array with the same value. So this will create 20 tweens. TweenMax.staggerTo(_.fill(Array(20), ".blue"), 1, { x: "+=50" }, 1); Not sure if I would ever do something like that, but it might come in handy somewhere down the line. http://codepen.io/osublake/pen/bEaymJ?editors=0010

I was able to get it working using what Sebastian wrote in this thread. // Using the uncompressed file in node_modules/gsap/src/uncompressed/TweenMax.js var window = {} , navigator = { userAgent: "" } , dummyElement = { style: {}, getElementsByTagName: function() { return [] } } , document = { createElement: function() { return dummyElement } }; // START OF FILE var _gsScope = (typeof(module)... ... this || window, "TweenMax"); // END OF FILE module.exports = TweenMax; Inside your module you should be able to do this... var TweenMax = require("gsap"); var foo = { x: 0 }; TweenMax.to(foo, 1, { x: 100, onComplete: onComplete }); function onComplete() { console.log("foo.x == ", foo.x); // 100 }

We recently added a clearProps property that CSSPlugin recognizes that allows you to clear out any inline styles, you can clear them all or just specific ones. Check the CSSPlugin Docs: http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html To clear the scale: TweenLite.to( elem, 0.5, { ease: Back.easeOut, scale: 1, clearProps:"scale"}); also to clear all transforms just use clearProps:"transform" Grab the latest js files and give it a shot. Also, the css{} object wrapper is no longer necessary: http://www.greensock.com/update-2013-01/