Leaderboard

You're welcome! As for ongoing questions ... if they're pretty much related to the title of this post, then following up here is just fine. If it's a new topic altogether, it would be best to create new post with a title relevant to the question at hand. That keeps threads shorter and entirely relevant. That said, feel free to ask as many questions as you like! Someone is sure to jump in and offer help or advice. As far as ScrollMagic .. you may get some pointers, but that is not a GSAP product, so you may not get an answer specific to your issue (if you have one). Happy tweening!

That sounds pretty complicated because the scroll speed of the user isn't predictable. And a scroll event might fire every 16ms (it might be much faster than that with touch), so a lot of what's on the screen can change during those intervals. You would be adding animations to a queue for elements that might be out of view on the next tick, which would be delaying animations that do need to play. To trigger animations when they are in the viewport, I've been using the Intersection Obsever API. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API This demo is set up to animate elements by the row: https://codepen.io/osublake/pen/6fd214ecd74e7091ec7b609bb0270f97

And this one. https://codepen.io/MAW/pen/KdmwMb

Hey, basically when you want to stop the timeline and create it again you don't need to pass the duration or anything to the pause method, because that would create a jump to the timeline's end and that could look a bit odd (unless that is exactly what you're after). Since I presume that the progress of the timeline is not needed as a state property in the component, you can create an instance property in the constructor to store and update the progress: constructor() { super(); // default to 0 or null this.currentProgress = 0; } Then when you pause the timeline you can run this code // stop the timeline this.tl.pause(); // record it's progress this.currentProgress = this.tl.progress(); // kill the timeline this.tl.kill().invalidate(); // then create the timeline again this.animateMapMarkers(); // set the updated timeline's progress to the one stored and resume this.tl.progress(this.currentProgress).play(); That is the most logical and simple sequence I can think of to do that. As for the click events, I took a quick look at the API of react map gl yesterday and by going through it quite fast is not extremely simple to get up-to-speed with it. Perhaps a more in-depth dive and playing with it would allow getting your feet wet and better understand how it works. Happy Tweening!!!

Hey Stephen, First thanks for supporting GSAP by buying a license, very cool of you guys!! Second, I had a chance to take a peek at the code (not an in-depth look though) and what caught my attention is this: componentDidUpdate(){ console.log("========\n Updated \n========\n") this.animateMapMarkers() console.log("2 Progress on update: ", this.tl.progress()) } This code is executed on every update, at some point your component could have more properties in the state object or props coming from the parent component or a store (Redux, Mobx, etc), so you need to update the animation only on a specific state update, one that actually calls for completely creating the animation again. My guess is that the slider progress shouldn't trigger a side effect that re-creates the animation but updates it's progress. Keep in mind that the componentDidUpdate method has a couple of params pass to it that allows you to compare the previous state and props with the new ones and execute code accordingly https://reactjs.org/docs/react-component.html#componentdidupdate Perhaps that is the reason why the slider is not working, because every time the slider is updated the state property is updated as well and that trigger the componentDidUpdate method creating the animation again with it progress at 0. As far as the map pan/zoom events if possible try to use an event start to pause the timeline and an event end to create the timeline again. For example as soon as the user starts panning the map, you pause the timeline and update the state and re-create the timeline only when the panning event is completed, like that you avoid a bunch on unnecessary renders of the component. Also If I was you on the start event I would register the current progress of the timeline, pause, kill and invalidate it and in the end event I would clear the props of all the elements, create the timeline again and set it's progress to the value you stored before. It seems that react map gl allows to create some custom events, but at a quick glance the API seems a bit convoluted to me and there are no clear examples of how to create and implement that in a component and how to subscribe to the specific events since the event handlers will reside in the same component, perhaps using a method inside the component class that instantiates a new controller adds the event listeners and returns the controller, could work. You can always ask in stack overflow and create an issue in the repo. This is as much as I can do right now, sorry for not being more helpful. Hopefully is enough to get you started. Happy Tweening!!!

It really depends on what the "type" is. Typically it's "x,y" which refer to the translateX/translateY transforms, and those are relative to the element's original position in the document flow (before any transforms are applied). You could think of it as if it's from the top left corner of the element in that case I guess. But if the type is "left,top", it'd refer to those values which are dependent on other factors like whether the element is position:relative or absolute (and would be affected by the offsetParent).

Not sure what the point of that would be. You can use snake case, just make sure it's a string. These do the same thing. TweenMax.to(element, 1, { marginLeft: 100 }); TweenMax.to(element, 1, { "margin-left": 100 });

Hi @Daniel Hult I think this issue is that you've defined your tween inside your play/reverse function. You'll want to define that outside, and just use the click listener to play or reverse the Tween. Here's a fork of what that looks like (I also used TweenLite instead of a timeline to further simplify, but both ways will work). https://codepen.io/ryan_labar/pen/oNvwqYo?editors=1010 Note: You'll also want to set reversed to True, so that it play in the forward direction on first click.

Hey dgs. Welcome and thanks for being a Club GreenSock member! There's a few different ways to do this sort of animation. The way that I would do it is something along the lines of this: var tl = new TimelineMax({paused:true}) tl.to(".box", 1, {"scale": 0.3}) var maxDistance = 400; window.addEventListener("scroll", function() { var yPos = window.scrollY; tl.progress(yPos / maxDistance); }); https://codepen.io/GreenSock/pen/BaBpELw?editors=0010 I'm happy to explain any part of this if you're having any trouble!

If you check the console you'll see that headingRedf is not the <h1>, but rather an object. This will make it move. tl[0].to(headingRedf.current, 1, { y: +30, }).to(headingRedf.current, 1, { y: 0, }); You're also getting a console error about exports not being defined. That's all I can offer with my lack of React knowledge. Happy tweening.

Are you literally trying to remove the ease from memory? You can do this: CustomEase.create("myEase", "M0,0 C0,0 0.056,0.442 0.175,0.442 0.294,0.442 0.332,0 0.332,0 0.332,0 0.414,1 0.671,1 0.991,1 1,0 1,0"); delete Ease.map.myEase; But that's pretty much pointless. The performance of your app will improve 0.000000000%. Even if you have 10,000 different custom eases in memory, the performance difference will be negligible. When it comes to profiling animations, the main things you should be mindful of are rendering and painting times in the performance tab.

Knowing the iOS version and Browser Version go along way in finding what could be happening since various render bugs are related to various versions of the OS and Browser. They are sneaky that way.. To check iOS Version / Safari Version: On an iPhone, iPad, or iPod touch To find the iOS version installed on your device, go to Settings > General > About To check iOS Chrome Version Open Chrome on your iPhone or iPad. It's the round red, blue, yellow, and green icon labeled “Chrome” that's usually on the home screen Tap ⁝. It's at the top-right corner of the screen. Scroll down and tap Settings. ... Scroll down and tap Google Chrome. ... Find the version number next to “Version.”

I'd probably do something like this: https://codepen.io/PointC/pen/XWrYwQK I just used the loop index to make a little delay. You could also use a function to randomly generate one. Or manually create an array of delays if you want detailed control. That's what I did in this demo. https://codepen.io/PointC/pen/yPbYRY Hopefully that helps. Happy tweening.

That makes a lot more sense to me! I thought I had seen similar code before, now I know it's from that demo The main issue is that you are using one SplitText for all of the letters. You need to divide them up by section so that the effect works in the way that you're wanting it to (this will also allow you more control). var sections = ['.under-circle .line-item-top', '.over-circle .line-item-top', '.under-circle .line-item-bottom', '.over-circle .line-item-bottom']; sections.forEach(function(section) { //splittext animation } The second issue is that you were applying two animations to a couple of the sections: '.line-item-top', <-- Applies to 2 elements; needs to be made more specific '.over-circle .line-item-top', <-- Applies to 1 element; also affected by the first selector! Same thing for the line-item-bottom elements. So I added an under-circle class to the container for the top section. https://codepen.io/GreenSock/pen/yLBEybE?editors=0010 Hope that helps.

Sure you can, the JS that you have is 100% correct. You just didn't move the duplicated stop colors to go in the opposite direction Take a look at the SVG in the demo below: https://codepen.io/GreenSock/pen/ZEzojQe?editors=0010

Hi, Unfortunately stackblitz is giving a generic error, so there is no way to actually pinpoint what and where is happening here. For mutating state, if you're using setState() then you don't have to worry about it. React is handling things for you when updating the component's state. Immutability is suggested when you use a store software such as Flux, Redux, Mobx, VueX, etc., where the dev is in charge of creating and maintaining the state. In those cases is recommended to create a new object instead of changing the current one when a state mutation happens. Although VueX does handles that for you. A few pointers though. Is not at all necessary to do all that convoluted filtering when is not needed. What I mean is that when you create the app you have all the data in the state. On top of that you filter that data in sub-sets and add all those sub-set to the state as well. Basically that creates a duplicated data set. Data filtering is not an extremely expensive process. It all depends on the amount of data, but under 500 elements it should really fast specially if the filter test is simple like your case. When the user actually wants a sub-set of the original data, create it and set it as the state property. So instead of having a bunch of state properties for all the cities and every possible sub-set, just create one that is what the user wants. More arrays in your app means more memory, more CPU to handle all of them, which leads to more battery use in devices and so on. Right now you're using onTheMap for the data set shown in the app, keep using just that when filtering the data. My best guess is that the animation is not being stopped when the data is updated, therefore GSAP looks for an element to animate which is being returned as null, therefore throwing the error. My advice is to try a version of the app with no animations whatsoever and just show the filtered elements (dots on the map) and then if that works add GSAP to the mix, remembering to stop, kill and re-create the animation again as the data changes. Sorry I can't help you more than this but unfortunately Stackblitz doesn't give us more to work with. Hopefully this will help you in some way. Happy Tweening!!!

That's not how .reverse() works. https://greensock.com/docs/TimelineMax/reverse() Posting code snippets isn't helpful. Fork your previous demo, and show us that it's not working. Also, I saw your demo on mobile, and I think you're going to have problems when the page has been scrolled. This might be helpful to look at. https://codepen.io/osublake/pen/WwgQEV Here's another good demo to learn from. https://codepen.io/osublake/pen/zMqevJ That demo is from this thread.

Did somebody say confetti cannon? https://codepen.io/PointC/pen/RyaJmj I'd recommend going with something like what @OSUblake posted above. Simple and easy. Happy tweening.

You need to register PIXI with v5.

Ah ... I see. Makes sense based on both the image and the text each towing in their successors. While presentationally that's cool if Javascript is doing its thing ... it's a bit out of wack from an accessibility standpoint (and certainly if Javascript fails for some reason). I would recommend the HTML side of this is structured semantically, and then let Javascript reconstruct for the presentation. Have a look at the Pen below ... Lines 4 through 30 are just about manipulating the DOM to go from semantic markup to presentational structure. Lines 32 through 58 are just about looping through slides and titles to create a timeline and set its initial position. Lines 61 through 91 are about controlling the timeline and looping around when needed. You would probably also want to look at suppressing click events during slide tweens. https://codepen.io/sgorneau/pen/jONGJre?editors=0110 Hope this helps!

There were 2 different load methods. One is for load events like with the window or images, and the other is a shorthand method for Ajax. The former is deprecated, the later is still part of the API. https://api.jquery.com/load/

Ha. Yes they did. I found a couple other questions related to this. https://stackoverflow.com/a/55996413/2760155 https://stackoverflow.com/a/57102037/2760155 https://stackoverflow.com/a/55105849/2760155 In those answers, they create an array of createRef(), which requires extracting the current values into a new array to get the actual elements. Not sure which approach is the best one to use. https://codepen.io/osublake/pen/380bc625dc8c3464518a988e799691f7

Use a media query, and create different timelines depending on the layout. https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/matches

You're trying to use the position parameter on a standalone tween. That will only work for a timeline tween. You'll want to use a delay on that tween.

That's what we hope to do here at GSAP - do all the hard parts so that you guys can focus on the fun, exciting, and cool stuff

Hello sharik and welcome to the forums, There are a few different ways to do this. I would recommend looking at GSAP's SplitText and our timeline. The core of it is: have an array of words that you want to change out. Make sure the there are <span>s or something surrounding all words that you want to replace (and replace with). After a certain amount of time, fade out the old word, place the new one in the DOM (without being visible), get the width of the new word and adjust accordingly, then fade in and slide down the new word. Then repeat that process as needed. Does that makes sense? Let us know if you run into any issues and we can help with those. Here's some more information about SplitText and TimelineMax. P.S. Are you sure you want to make a direct copy of that group's website? It does not make your company stand out if you are just copying another company completely. I suggest that you change things up a bit more. Maybe include things from other site's designs so that the mix the sites becomes your own.

Try this: https://codepen.io/mm00/pen/qBWRWKY

Glad to hear you're enjoying the tools! What you're asking for isn't exactly a super simple case, but here's one approach: https://codepen.io/GreenSock/pen/vYByKZN?editors=1010 Is that what you're looking for? Hopefully it's easy to dissect. Happy tweening/dragging!

This sounds like you're talking about a "medium" sized website which can be a little awkward to handle because there's definitely not a "right answer" and a lot of it boils down to preference. When I see this type of situation, I immediately think: what needs to be loaded on every page (the overall framework) and what is more so specific to certain pages. Then I personally would put the general stuff in its own JS file, etc. and load page-specific JS files as needed. I may or may not use a static site generator to do this (it depends on the nature of the site). Another person might do roughly the same thing but use a component based framework to do so (which is essentially a more complex static site generator). It boils down to 1) what are your needs, 2) what are you most comfortable using, and 3) what sort of timeline are you working on (because if time doesn't matter so much you can play around with different ways or teach yourself a new way, etc.).

Thanks for pointing out the typo. Ill get that fixed. I’ll use useRef() going forward and move the timeline initialization out of the useRef() call. It definitely sounds like the better option. As for the component re-rendering every click. NavHamburger actually has ‘menuExpanded’ state that is toggled on and off with each click. I included it for demonstration in this CodePen, because I'm currently using NavHamburger in an app where its parent’s (a nav bar) ‘menuExpanded’ state is passed to it through props. So unfortunately, the NavHamburger will re-render due to the 'menuExpanded' state change.

Wouldn't reducing the movement factor and duration a bit give you the desired result? https://codepen.io/PointC/pen/GRKBdYZ Does that help? Happy tweening.

TL;DR: I dislike ScrollMagic and think there are better ways to do this Exactly what the better approach is, I'm not sure, but I sure do dislike ScrollMagic. https://codepen.io/GreenSock/pen/JjPZwQo This is what I was suggesting you do onComplete: onComplete: function() { // destroy timelines horzScene.destroy(); processScene.destroy(); // remove added styles TweenMax.set(".scrollmagic-pin-spacer", {clearProps: "all"}); //keep window in place scroll(0, innerHeight); } It seems like preventing reversal before the completion will have that padding issue. I don't have the time to try and debug that situation I think the methodology of ScrollMagic to fake scrolling by using padding is fundamentally flawed.

@Luckyde, you may find this helpful: This was using MorphSVG, but I believe the concept is similar.

You definitely shouldn't be using that file you linked to - that's just for Codepen demos (it'll redirect if you try using it on a different domain). Use the CustomEase file that you get in the download from this web site - log into your account and go to the "Downloads" section of your account dashboard. That has CustomEase in there. You could drop it into your node_modules/gsap folder or just use it loose, as long as you've got GSAP installed via NPM it should work okay but I'm not familiar with every build tool out there so your mileage may vary.

I would create labels, have the slider intervals mapped to specific labels, and use tweenTo() to, well, tween to those labels

Interesting. Is everything in the production build, or just the dev build? Like I said earlier, I haven't worked with modules (the tree shaking part) with PixiJS, so I don't know what should happen. To minimize the build, select what you want from here. It will show you what to import. Be sure to click on the "Bundler" button in the top-right. https://pixijs.io/customize/ That has nothing to do with es6. Tree shaking is an optimization done by build tools. You will now be required to register plugins. gsap.registerPlugin(SomePlugin, AnotherPlugin); That is the only way to prevent tree shaking from removing plugins that you don't call directly. That will also prevent every plugin you import from becoming a global when using modules. Currently everything you import is global.

Here's a little demo I did a few months ago as an answer for another thread, but maybe it'll give you some ideas. It works, but if the duration is too quick you get a chunky line. https://codepen.io/PointC/pen/NmqowR Happy tweening.

Hey Steph and welcome to the forums! I recommend that you check out this very helpful article by Craig, especially demos 3 and 4. The effect is different (moving and scaling instead of scaling and changing the opacity) but the technique is the same. Feel free to give it a shot and post back in this thread if you run into errors that you can't figure out. But if you do that, a CodePen of your issue would be very helpful. See the below for more information about that:

Why not just use a stagger? tl.staggerTo(bars, 0.1, { opacity: 0.2 }, 0.06);

Hey @FeranD, Welcome to the GreenSock Forum. You can not get everything ... But as you said, you can partially allocate the overflow. Maybe this example will help you further. https://codepen.io/mikeK/pen/bGbqBKP Happy tweening ... Mikel

I have all I need for now, thanks I wanted the MorphSVG features but with the ablity to have vertices show up as dots. So the posts from @mikel are excellent for this thread, though not working with MorphSVG.

Happy to help. Sounds like you've got it now. 👍 You can also use each: instead of amount if you need exact staggering durations for each element. Stay tuned for the next release of GSAP 3.0 when advanced staggering adds some fun new features. Happy tweening.

Yes, but it's very choppy because it can't animate the in-between values. To animate font weight using font-variation-settings, which can fill in the in-between values, you have to use a compatible font. Here's a good place to find some. https://v-fonts.com

I'm a little confused - do you have what you need now or were you still looking for some help? I thought you were gonna post something of your own that you were trying to add anchors to, but it looks like you just copied one of our codepens that already had anchors showing. If you need some help with something of your own, just let us know and we'd be glad to take a peek. Otherwise if you're all set, even better!

Hey @sumith, One of my favorite magazines TheNewYorker uses this technique and has kindly provided the code on Github: uturn - detect scrolling behavior with a requestAnimationFrame debounce Happy debounced scrolling ... Mikel

@PointC aaaahh - thank you so much for that resource! 😅 Did not know about that page 🤭It is very helpful indeed. Best wishes.

Hello Zach, I was able to arrive at a solution. Between your comments and OSUBlake's and Diaco's codepens for multiple drag objects and multiple targets I was able to piece together some code that worked. Thank you all for your time in helping all of us grateful GSAP users.

You'd use this.x in the callback. this inside of Draggable callbacks returns the Drabble object itself unless you specifically set the scope using one of the on____Scrope (like onDragScrope) functions. Modifying your code from above, you could get the values like so: Draggable.create("#firstNamedQuanDragImage1", {type:"x,y", bounds:"#nQL_DragDropGrid1", edgeResistance:0.5, cursor: "pointer", onDragEnd: function(e) { console.log("x: " + this.x + ", y: " + this.y); } });

As a sidenote to this story: All users who had this issue host their site at SiteGround. We contacted with the hosting provider and it turned out that they have an option Site Tools -> External Links Rewrite which rewrites urls in JavaScript files too. Site owners just need to switch it off and everything should work fine. They promised that they will try to fix these false replacements.

Might want to check someone’s history, skill set, and experience before you accuse them of trolling.