Leaderboard

Hi @SoldierCorp Welcome to the forum. You can also turn that into a loop to tidy things a bit. Doing that would also give you the option of creating a separate timeline for each group and the first one could restart before the last one ends to create even more of a 'wave' feel. Just my two cents worth. Happy tweening and welcome aboard.

You know, the problem here is there are just too many cool things available in GSAP.

You'll want to use relative offsets to allow successive tweens in the timeline to being before the previous one completes. Here is an example of that in action: And more on sequencing here: https://greensock.com/get-started-js#sequencing

Hi, The gsTransform object is used primarily to store properties related to CSS transform values so that you as a developer do not need to read values from a 2D or 3D matrix. Originally it was intended to be a private property for internal use. Please see the list at the bottom of the page: https://www.w3schools.com/css/css3_2dtransforms.asp width and height are not related to transforms and I don't think xOrigin and yOrigin are css properties. These are the values stored using a more recent version of TweenMax Object { force3D: "auto", perspective: 0, rotation: 10, rotationX: 0, rotationY: 0, scaleX: 1, scaleY: 1, scaleZ: 1, skewType: "compensated", skewX: 0, skewY: 0, svg: false, x: 100, xOffset: 0, xPercent: 0, y: 100, yOffset: 0, yPercent: 0, z: 0, zOrigin: 0 } open this demo in a new window and open js console If you inspect the box you will see that the transform-origin is part of the inline style.

Yeah, I'd definitely recommend avoiding pseudo elements if you can because they can get complicated to target (browsers don't grant access to them the same way they do "normal" elements). If you need any more help, just let us know. Happy tweening!

Great examples, guys! Here is another approach from @OSUblake using the ModifiersPlugin which isn't necessarily simple, but it is dynamic. Blake's ModifiersPlugin collection: https://codepen.io/collection/AWxOyk/ more on ModifiersPlugin: https://greensock.com/modifiersPlugin If you're animation is canned, as you say, Shaun's solution should work very well.

Hi, Honestly going through all the motions to teach you how to work with redux is out of my capacities in terms of the required time and where exactly you are right now in terms of your coding knowledge. Redux basically let's you rescind, as much as possible, of using component's states in order to keep reference and track of different properties that might change during the app's life cycle. Before redux (and also is worth mentioning it's predecessors Flux and ReFlux) and mobx, a React app had references in the states of different components. The issue was that when you needed to access the state of a sibling component all hell was unleashed, because you needed a method from the parent component to be called in Child A in order to pass that property to the parent and then to Child B. Of course the deeper a component was in the app's tree, the bigger the unleashed hell. It was coding nightmare. Enter redux. Redux is just an object (store) with all the properties you want to keep track and it's accessible via the connect high order function from react redux in all the components of the app that you need. The point is that in order to add and update the property in the store you need actions and actions creators. Those are added to the component's props so they can be accessed and used easily. I strongly recommend you to go through the egghead course (I believe is free) and redux's official docs in order to get a better grasp of how to work with redux and react, is really not that complex. Regarding the error is fairly simple. You're trying to render something that comes as undefined. Similar to this: class Route extends Component { render(){ return <div> // some component here, most likely a function is returning undefined </div>; } } In the comment I mention a function, but also could be a ternary operator or some iteration of a map array helper. Without the entire code and the data structure is impossible to tell. A common scenario is that, since the render method can be called more than once as the state and props are updated (mostly during async code) an array could be empty or something else could be coming as undefined, therefore passing that to the render method which ultimately returns that error. You can use chrome's debugger to put a break point in that render method in order to check the call stack and the scope or use console.log() in the render method, before the return statement of course: class Route extends Component { render(){ console.log(/*check props and state here in order to track what could be returning as undefined*/); return <div> // some component here, most likely a function is returning undefined </div>; } } Happy tweening!!!

Well, you *can* get the x/y of the tweening element at any time in the tween. Craft your timeline in a paused state ... use .progress() to position the playhead at a specific point after your initial tween is defined. Then retrieve the top/left at that point to use as the values in your second tween. Finally, play the tween from 0.

I was asked yesterday about animating to/from backgroundSize: "cover" or "contain" with GSAP, so I figured I'd share the solution here in case it helps anyone else. The problem: GSAP interpolates between numbers, but how is it supposed to interpolate between something like "300px 250px" and "contain" (not a number)? So I whipped together a function that basically translates "contain" or "cover" into their px-based equivalents for that particular element at whatever size it is then. Once we've got it converted, it's easy to animate. //this function converts the backgroundSize of an element from "cover" or "contain" or "auto" into px-based dimensions. To set it immediately, pass true as the 2nd parameter. function getBGSize(element, setInPx) { var e = (typeof(element) === "string") ? document.querySelector(element) : element, cs = window.getComputedStyle(e), imageUrl = cs.backgroundImage, size = cs.backgroundSize, image, w, h, iw, ih, ew, eh, ratio; if (imageUrl && !/\d/g.test(size)) { image = new Image(); image.setAttribute("src", imageUrl.replace(/(^url\("|^url\('|^url\(|"\)$|'\)$|\)$)/gi, "")); //remove any url() wrapper. Note: some browsers include quotes, some don't. iw = image.naturalWidth; ih = image.naturalHeight; ratio = iw / ih; ew = e.offsetWidth; eh = e.offsetHeight; if (!iw || !ih) { console.log("getBGSize() failed; image hasn't loaded yet."); } if (size === "cover" || size === "contain") { if ((size === "cover") === (iw / ew > ih / eh)) { h = eh; w = eh * ratio; } else { w = ew; h = ew / ratio; } } else { //"auto" w = iw; h = ih; } size = Math.ceil(w) + "px " + Math.ceil(h) + "px"; if (setInPx) { e.style.backgroundSize = size; } } return size; } The only catch is that the image must be already loaded, otherwise it's impossible to figure out the native dimensions of the image (aspect ratio). While it's technically possible to add this functionality into CSSPlugin, it didn't seem advisable because it eats up a fair amount of kb and it's EXTREMELY uncommon for folks to want to animate to/from a background-size of cover or contain. So maybe 0.0001% of the audience would benefit but 100% would pay the kb price. Didn't seem worthwhile, so a helper function like this struck me as more appropriate. Feel free to chime in if you disagree. Happy tweening!

Hey everyone, I just spent some time fighting with MS Edge so I though I'd post a quick tip about it. I needed to pull some SVG text from a center point and stretch the spacing to the edge of a rectangle. Easy enough I thought. I'll use text-anchor="middle" and tween the textLength to the width of the rectangle. That worked perfectly in Chrome, but Edge wasn't in the mood to play nice. I won't bore you with all the details, but basically Edge will correctly use the middle text anchor for initial setup. However, when you try to animate textLength along with that attribute, it reverts back to text-anchor="start' so the letters won't space apart correctly. They'll all space out from the left. Not good. Edge also has a problem reporting back the textLength for an animation start point. I opted to use the BBox of the text to get a starting point for GSAP to animate the textLength. To overcome the anchor problem, I centered the text BBox and then animated it to x:0 while the textLength animates which will give the illusion of spacing from the center. While on the subject of textLength, I came across another little oddity last week. I often animate SVG text along a textPath by tweening the startOffset attribute, but I thought I'd try adding some textLength with it to space out the letters a bit and found some strangeness. When you set your initial textLength attribute, Firefox only works with that on the actual text element, but Chrome only works with that attribute being set on the textPath element. A bit odd. Here's a quick demo showing the behavior. I used two tweens on the timeline so you can easily comment out either if you want to see the weirdness. The animation along the path works no matter what, but the textLength attribute placement is a bit fussy between Chrome and FF. Of course, Edge doesn't work at all no matter where you put the attribute. Big surprise. It will animate along a path just fine, but when you use a textPath element it doesn't seem to care about textLength. Hopefully this helps anyone trying to do some interesting SVG text animations. If anyone needs me I'll be over at the MS campus protesting their fussy browsers. Happy tweening everybody.

Very interesting, Craig! Clever. Thanks for sharing the insights. Dropping some "GreenShock" bombs yourself, huh?

There goes @GreenSock again -- GreenShocking the community by whipping up new functions and dropping them into the forum like it's nothing. I can honestly say I've never even thought about animating from contain to cover, but this is pretty darn cool.

Hi @mrtips I'm not sure what your final project will be doing, but here's a slightly different take on your request. By using Draggable's endX and endY I have one div chase another after you throw the first one. I'm not sure if that'll be helpful for what you're doing, but thought I'd throw it out there as an option. Since you're a Club GreenSock member (thank you), you also have access to the ThrowProps plugin which has a cool velocity tracker if that is part of your master vision. More info: https://greensock.com/docs/Plugins/ThrowPropsPlugin https://greensock.com/docs/Plugins/ThrowPropsPlugin/static.getVelocity() Hopefully that helps. Happy tweening.

That's exactly what I was looking for. Thank you @Shaun Gorneau

thats a very interesting take that I might be able to use as what I have is a canned animation. THANK YOU!

Always good info from the Oracle of CSS. This is one of those things that should be so simple, but is made into Mission Impossible. It reminds me of vertically centering something back in the day. It took a team of 16 people working 12 hours shifts for 6-8 weeks to vertically center some content in a div.

Hello @keepRunning and welcome to the GreenSock Forum! Yeah browsers wont even let you style specific CSS for <option> HTML elements. Chrome or other webkit based browsers used to allow CSS to style both <select> and <option> elements, but they have been pretty poopy pants about styling <option> tags lately. So the browser will reject certain CSS properties for visual, layout, and transforms on <option> tags. The HTML DOM interface won't allow it. The browsers only allow things like font-size, font-family, font-variant, font-style, color, background-color, background, etc like Blake said above When i look at the spec for <option> tags there is no mention of this https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement https://www.w3.org/TR/html50/forms.html#the-option-element Only other route is like Sahil advised is where the original <select> tag is hidden. And then you create a custom dropdown with animated option tag using <ul> and <li> tags.. or use a jQuery UI dropdown select that is jQuery custom HTML. Happy Tweening!

Ahh, sorry missing closing parenthesis there. It should be: <button onClick={this.buttonClickHandler.bind(null, '/')}>Home</button> By the actions path I mean, that since you're using redux you have actions and action creators. Normally in small projects you put all your actions and action creators in one file and export each one as a named export. In larger projects people like to ether put each component, it's own reducer and actions in separate folders, or create a components folder, an actions folders and a reducers folder to place each components actions and reducers and export them via an index.js file. I'm assuming that you have some degree of experience working with redux and react-redux. If you're not very familiar with it you can check this resources: https://redux.js.org/faq/code-structure https://medium.com/front-end-hacking/the-three-pigs-how-to-structure-react-redux-application-67f5e3c68392 https://marmelab.com/blog/2015/12/17/react-directory-structure.html https://egghead.io/courses/getting-started-with-redux The egghead course is by Dan Abramov himself (the creator of redux). He goes kind of fast but the concepts are very clear though. Happy Tweening!!!

Nice job @Sahil! A while back I was toying with the idea of releasing a tool that'd make this sort of thing easier but I put it on the backburner for a while. I called it "BendyBox" - it basically lets you convert any DIV or RECT into an object thats bendable in various ways. It swaps in an SVG to create those effects and you can register various animation effects that you easily call later, like "drop", "spin", etc. Advanced demo: Basic (with quasi-documentation in comments): Again, not sure if we'll make it an official GreenSock tool yet, but I figured this is a good place to share about it. Feedback is welcome.