Leaderboard

onReverseStart() is pretty thoroughly discussed in these threads. Happy tweening.

1. On line 125 you were passing function to the timeline instead of executing it. Once you execute the function, it will return the timeline instead of function itself. In your case child timeline was never getting added to parent timeline. 2. When you reverse the animation, it just reverses nothing more. If GSAP tries to do anything else, it will just create same problems when you will try to create two separate timelines for play and reverse. 3. Safest way to approach this is, create two timelines. If user interrupts, then just reverse ongoing animation. If there is no active animation then use alternate reverse animation. Little punishment to user for interrupting. 4. @GreenSock can comment on that. Usually we avoid pens with hundreds of lines of code, I just gave it a try because you seemed frustrated in other thread. Hope this helps you.

You can post your code here, while editing you will notice there are buttons at the top of editor. 7th button lets you paste code, but avoid posting more than 30-40 lines. You can also use codepen or something else if you prefer, where we can see your code and edit it as well. The link @GreenSock posted shows you step by step guide about how you can use codepen to post your demo. So far it is not clear what your question is about, 1. Are you trying to animate HTML elements like Div etc? 2. Are you using canvas or any library like p5js? 3. Which course or tutorial you are studying using Khan Academy? So we can guess what you are actually trying to do.

If I may say something, please do not take this personally, but when I have issues breaking down the problem into a smaller problem it means I am going down the wrong path... You really should be able to slice whatever you are trying to achieve into ever smaller pieces until the problem that piece represents becomes trivial. I am having a bit of a hard time visualising your scenario but still, it really feels like you are trying to swim again the river here. As far as I understand the code is going to run in Vue, and thus, I am thinking along the lines of how to set this up with Vue as the framework. Firstly, even with a Store, you wouldn't define the DOM element to target there. If anything, you should make the component inform the store it is the chosen one. Looking at your example pen, I see several functions that all do the very same thing but you use different references to your main store. All those functions could be a single one that takes the three parameters that change. // So instead of have a bunch of functions like this function hideRect01() { console.log("hideRect01 called") return TweenMax.to( SETTINGS.ui.container.rect01.el, SETTINGS.gsapGlobals.duration, SETTINGS.ui.container.rect01.tweenParamsTo.hide ) } // You only really need function createTween(target, dur, vars) { console.log("hideRect01 called") return TweenMax.to( target, dur, vars ) } // that you would call from somewhere createTween( SETTINGS.ui.container.rect01.el, SETTINGS.gsapGlobals.duration, SETTINGS.ui.container.rect01.tweenParamsTo.hide ); What exactly is this customization that you need to have? Maybe if we can understand the job it has to do, we can figure out a nice way to do it.

Hi and welcome to the GreenSock forums. Thanks for the demo. That's a pretty cool way to make a rotating sphere. The API makes it pretty straightforward to detect the midpoint of an animation. For any given animation you can query its duration() or progress() to get the "halfway" or mid point var tween = TweenMax.to(something, 10, {x:100, ease:Linear.easeNone}); to start another animation when that tween is in the middle you would schedule it start at a time of tween.duration() * 0.5 //or tween.progress(0.5) And, yes I'd use a timeline to schedule one tween to start at the midpoint of another. An issue with your setup is that your elements are dispersed all over the globe initially and each rotate 360 from their current position. So let's say an element is exactly behind the globe, if you fade it out halfway through its animation it will fade out when it is in front of the globe. no good. My first step was to set up every element in a vertical half-ring around the front of the globe and get them all to rotate the same way and fade out at the same time once I got that working I then randomized the started progress of each elements timeline using progress(Math.random()) A big component to this is using a SlowMo ease with yoyoMode set to true at the right time to get the elements to fade out and back in. https://greensock.com/docs/Easing/SlowMo I could probably take 2 hours explaining all this, but hopefully this gives you something to play with and tweak. --- Another approach might be to use an onUpdate callback to map the current rotationY to a range of opacities so that its opacity will be a factor of its rotation.

Kind of, now there is CustomBounce plugin that does a lot more than simple config. https://greensock.com/docs/Easing/CustomBounce

CustomBounce is a perk of Club GreenSock membership (which I highly recommend): https://greensock.com/club You can always give it a try on CodePen: Happy tweening and bouncing.

Works perfectly , I am tired of saying thanks to Osublake again and again, So I ll buy coffee for you. there you go ☕

hmmm... sorry to hear that you're getting frustrated. I can certainly understand how projects can get overwhelming. It's perhaps a good idea to take a step back and just get certain pieces and concepts working. I'll get to that in second. I took a quick look at your new version and the thing that jumped out immediately are the timelines on lines 62 and 118. You have those reversed and they shouldn't be set that way. Sometimes you want to reverse a timeline when you create it, but not in this case. You do have a complex project here. By that I don't mean the animations are too complicated, but there are many things the user could do. Someone could try to close the menu while it's animating into view. You can click a main link while the social links are animating. The menu could be closed without selecting a link. Those are just a few of the many possible scenarios. You're also targeting the same elements in different timelines so you have to decide how to reset them should they need to be targeted by a different timeline. All this is certainly doable. You just have to figure out the logic to control all possible outcomes. I find putting pen to paper and drawing a little flowchart of user interaction can help. Okay, now looking at this in small bites, I'd start with the concept of not allowing (or allowing) user interaction while pieces are animating. Take a look at this simple demo: Try clicking the menu button while the animation is playing. You'll see you can click as often as you like and the menu animation will just keep reversing each time you click. Now look at this version. Try the same thing. You'll see that the timeline will not reverse while it's playing. I've used the isActive() method to prevent anything from happening. You could also set a toggle variable to prevent clicks/hovers at certain times/events. It doesn't really matter how you check things, but this is an important concept in a project like yours as you have many moving pieces and multiple user click/hover scenarios. Can animations/timelines be interrupted? My recommendation to get you on track for this project would be to comment out all the SplitText animations and logic for now. Just focus on bringing the menu into view and listening for a click on the social/main links. Ask yourself, will you allow a click or hover before everything has animated into view? What happens if a user closes the menu without selecting a link? Once you get that set, you can start turning on the SplitText animations and controlling the click logic with a toggle or the isActive() method. I think you can get there if you just take a step back and look at it piece by piece. You're not really starting over. You're just turning off certain things while you make logic decisions. Make sense? Happy tweening.

Hi Irine, Welcome to the forums! I am finding a bit difficult to understand your description of the issue here so, forgive me if it is not what you meant. I would say you have over eningeneered your setup a bit. You don't need all those different <transition> tags. And that's pretty much the reason why your animation is overlaping. Because all those <transition> tags are independent and they do not have the means to talk to each other. To achieve what, I believe, you intend, you need to have all your elements inside the same <transition> tag. See the bellow fork of your pen: You might want to go over Vue's transition documentation, if you haven't already, they will explain all the key concepts in detail there. https://vuejs.org/v2/guide/transitions.html

I think it's just a problem with your timeline reference ... "this" won't reference the master timeline (or any timeline) in that scope. Try passing the timeline as a parameter,

Hi @Luckyde, welcome to GreenSock! This should be fairly easy to accomplish. If you cover the y rotation of the ground (as in visually obstruct it with a piece of paper or your hand), the rest is fairly straight forward horizontal parallax. Here is a CodePen kind of showing that ... not hooked into Draggable, and just yoyoing ... and also poorly executed But the principles are there.

I was wondering if there should be a config available for Bounce ease as well like the ones that are available in Elastic as well as Back eases. The use-case for example is to control the number of bounces as well as the amplitude, for lack of a better word i.e. the force with which it bounces back everytime it hits the floor. Example: jsFiddle. Thoughts?

You're welcome, @jordank On another note ... it might be useful to seek to a label on the master timeline rather than restart ... in the event that you want to loop the middle portion of a master timeline. Defining a label within each master timeline add() and then passing that label as a 3rd parameter to looper would take care of that.

I'm never absolutely certain about the 'Why?' of browser behavior. ? It's just been my experience that you'll encounter far fewer problems with SVG masks and clip-paths if you wrap them in a group and apply the clip/mask to the <g>. Even if I have one element to mask/clip, I always group it. Happy tweening.

Ah, in that case ... I think you're looking for three.js ... specifically this https://threejs.org/examples/#webgl_camera_cinematic

Sorry about the confusion. Yes, it was a problem only with rotationZ (which is just an alias for "rotation" anyway). It should be fixed in the next release, due out within the next week or so. Here's a preview version (uncompressed) of TweenMax: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js Better?

Hey Beau, I understand the frustration. The reality of things is that React works in a declarative way and the discourage to use string refs and find dom node has mostly to do with some specific issues and some excessively paternal approach by the React team. The paternal issue comes from the fact that the deprecation of string refs has to do with some edge cases and because of a few things that could go wrong the entire API is changed for everyone. Take GSAP for example, Jack does His best to ensure that GSAP serves as many scenarios as possible but never compromises performance, file size nor legacy support, and when those changes do come, believe me there is a lot of questions and samples going around before the decision is made. But that's how GSAP works and perhaps we've been a little spoiled by that, but that's how serious Jack and Carl are about how this works. IMHO there's nothing wrong with using string refs and fond dome node if you know what you're doing. At some point developers have to take responsibility for the code they write and not expect that the frameworks make all kind of loops and hoops to ensure that every blunder is supported. As I mentioned in another post yesterday this is some very specific issue, because you have to take in consideration the lifecycle of your app and it's components in order to make the best decision. There are some cases that you can safely reference the elements using the classic get element by id if, when you create the variable you're sure that the DOM node will be rendered in the app. In other cases if you're not sure is better to use refs. This simple codepen goes into the detail of how refs are accepted today: In the console you'll find an array with all the rendered elements that can be used with GSAP. This is the so called "React way" for referencing DOM nodes. Now the pain comes when you're using a third party component that doesn't expose the DOM node, like this case: import ThirdParty from "third-party"; const elements = ["label-1", "label-2", "label-3", "label-4"]; class MyApp extends Component{ constructor(){ super(); this.elements = []; } render(){ return <div> { elements.map( e => { <ThirdParty key={e} ref={ node => this.elements.push(node) } /> }) } </div>; } } In this case the array will have a collection of the four React components being rendered and not the nodes being added to the DOM. In this case find dom node comes in handy because it allows to reference the actual element in the screen. If the plan is indeed remove find dome node from ReactDOM then things will get more complicated, because developers will have to bake their own version of this component in order to expose the ref to the DOM node or the developers of third party components will have to come up with some way to find those references. One of the simple ways to do this could be for components to accept an id property in order to later reference that and get access to the DOM node. Finally don't get discouraged from using GSAP with React, there are ways to use it and the more is being used, the React team will become aware that to create complex animations and rich environments GSAP is the way to go and they'll have to come with some way to actually gain access to the dom elements. Right now we have to keep using this type of approaches with the hope that things will change and become simpler in the future. Also keep in mind that the article you mention was written when React was in version 15 and string refs and find dom node were not deprecated and that wasn't a long time ago, unfortunately this world moves way to fast and doesn't wait for anyone... Happy Tweening!!!

How can I do the following declaring only ONE circle in my svg element? http://codepen.io/anon/pen/XmgQYL

Hi Greencat, Just wanted to update you on a new solution for this problem. Whenever you morph a path we now save the original path data on a data-original attribute of that path so that MorphSVGPlugin can grab it later. <path id="circle" d="M409.6,198.066l26.833,54.369l60,8.719l-43.417,42.321l10.249,59.758L409.6,335.019 l-53.666,28.214l10.249-59.758l-43.417-42.321l60-8.719L409.6,198.066z" data-original="M490.1,280.649c0,44.459-36.041,80.5-80.5,80.5s-80.5-36.041-80.5-80.5s36.041-80.5,80.5-80.5 S490.1,236.19,490.1,280.649z"></path> So taking an example above of morphing a circle into a few animals and then back to a circle, you no longer have to save a reference to the original circle shape yourself (as I previously recommended) you can just do tl.to(circle, 1, {morphSVG:"#elephant"}, "+=1") .to(circle, 1, {morphSVG:circle}, "+=1"); Check this out: http://codepen.io/GreenSock/pen/rOjeRq?editors=001 This feature is implemented in version 0.5.0 which you can download now and the "CodePen Safe" version that we use in all of our demos. Special thanks to Elliot Geno for the suggestion.

Dont forget the squash and stretch .. codepen full mode: http://codepen.io/jonathan/full/EVXgGV/ codepen editor mode: http://codepen.io/jonathan/pen/EVXgGV/