Leaderboard

In Sahil's demo jQuery is being used to create a jQuery object based on the selector string https://learn.jquery.com/using-jquery-core/jquery-object/ var c = $('#circle'); // jQuerey object //is much different than var c = ("circle"); // a string

Nevermind and sorry, I found that I had to recreate the var inside the resize function $(window).resize(function(){ var stagger_menuxl = new TimelineMax(); stagger_menuxl.kill(); megamenu_fadein_panels(); });

I'm not quite sure I follow, but is this what you need it to do? Please be sure to load the necessary scripts in your demos. (Yours was missing jQuery and TweenMax.) Thanks.

It might be related to base64 images in Chrome which have various bugs when dealing with base64 images, along with being cross domain? So its probably related to some chrome shenanigans of them breaking things and then fixing them. Oh, and then them breaking it again.

Also, it looks like you are trying to animate to a relative value, like rotate the element 300 degrees more than the current rotation. You can do that like: TweenLite.to(element, 1, {rotation:"+=300"});

There's a few things amiss. Best thing to do in this case is to log out the values you are trying to use. For instance console.log(c) // "circle" console.log(c[0]) // "c" I don't think c or c[0] are what you are expecting them to be. Also here: var rotation = c[0]._gsTransform.rotation + 3.6 * parseInt(drawVals.start); You are trying to find a _gsTransform on a string (not a DOM element), but equally as important is that a DOM element ONLY gets a _gsTranform AFTER you set or animate one of its transform values. Hopefully that helps you tweak your approach. If you need more help, let us know.

Nice trick! The values that you are trying to apply are too small to see changes in Firefox. (At least that's what it seems like) Chrome is doing weird stuff, it doesn't render any changes. So I tried adding circle to svg and applied filter to it and it started working, only to stop when circle got out of the viewport. Then I set the svg's position to fixed and it worked. Maybe you can add tiny svg in background somewhere with fixed position and have it's opacity to 0 or stroke/fill same as background. Though not sure what is the reason for such behaviour.

Was this it?

When i inspect Chrome, GSAP is indeed interpolating values for the svg filter. But Chrome isn't rendering anything, oh Chromernet Explorer 6

Chrome shall henceforth be known as Chromernet Explorer 6.

That extra space is the 70px offset. TweenLite.to(window, 1, {scrollTo:{y:"#section3", offsetY:70}}); Happy tweening.

Hi @Jchrist Welcome to the forum. The plugin is working correctly. There just isn't enough window real estate after section three to scroll the window that far at certain heights/widths. You can't manually do it nor can the plugin. You'd want to place some elements after it or set a specific size. Here's a fork where I've just set an arbitrary size for the body. You'll see that it work correctly at any window size. Hopefully that helps. Happy tweening.

Interesting. Yeah, that's a pretty uncommon need, but I took a crack at accommodating it with an updated DrawSVGPlugin, so you could just add "live" to your drawSVG value and it'll keep the length updated (live). Like drawSVG:"0% 100% live". If you've got other ideas for a better API, let me know. Here's a fork of your original: I have NOT updated the official version of the plugin yet - just the codepen-only one. Let me know if it looks good to you.

You should be able to click the little 'Export' button at the bottom right of the pen and that will give you most everything you need for local experiments. You'll just need to link to the CDN for TweenMax, but everything else should work fine. Happy tweening.

ahhhh obviously!!! sorry blonde moment, aha. really appreciate the explanation

I think I figured out a way around that odd Firefox behavior, and I posted it to the codepen-only file for now: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js Better?

more on it here too https://stackoverflow.com/questions/51123831/ng-build-prod-cannot-set-property-autoactivated-of-undefined

Great work Jonathan, Sahil, and Craig! @zozo, since you are Shockingly Green you can save yourself some trouble. If you load MorphSVGPlugin you can use its convertToPath() method to fix all those lines. MorphSVGPlugin.convertToPath("line"); test this in FireFox:

perhaps this will be of some help

I was on it too. It is because firefox doesn't report measurement when we use getBBox method on hidden elements or in this case line inside the mask. And GSAP uses getBBox because it is not path, so you should convert your line to a path. PS: Yup I have started digging into files, seems fun.

The mighty @Jonathan beat me to it, but I just came to the same conclusion. For some reason the line is throwing an error in FF when it is in a mask. Outside of a mask (or clip-path) it draws fine. Here's the project stripped down to just the problem line and mask. I'm not quite sure what's happening there either.

Thanks guys. The error was due to a wrong handling of data, the strings did appear but they didn't have their class attribute attached to them, so that caused the error of not tweening. Appreciate your answers!

Yup, we have the GSAP Overview on the docs homepage which shows which tools are on the CDN: https://greensock.com/docs However, I've also added 2 questions to the FAQs that will be easy to find if anyone searches for CDN: https://greensock.com/faqs/#/Search/CDN/ Hopefully this helps avoid more confusion in the future. Sorry for the frustration. Thanks for the feedback!

@axe-z I haven't played too much with React 16 and GSAP yet but it seems that it hasn't change that much. With that in mind this samples use React 15, Transition group 2.2.0 (latest is 2.2.1) and React Router 4.1.2 (latest 4.2.0) so they should come in handy in order to get you started. Simple component transition using GSAP https://codesandbox.io/s/yvYE9NNW Using React Router to animate the mounting and unmounting of the components: https://codesandbox.io/s/mQy3mMznn Happy Tweening!!

Hi and welcome to the GreenSock forums, Thanks so much for the clear description and clean demo. Super helpful. Historically the solution would have been to loop through all the SVGs, read the attribute and target and then create unique tweens for each circle and plop them into a timeline with offset start times. The reason a loop like this would have been necessary is that staggerTo() required that all animations used the same end values. All stagger methods (staggerTo, staggerFrom, staggerFromTo()) now support a cycle property which gives you complete control for the end value of each tween. https://youtu.be/0HhjSPVuR https://youtu.be/0HhjSPVu Using an array for your cycle values you could alternate the drawSVG values like so: .staggerFromTo(".js-fill", 1, {drawSVG:"0%"}, { cycle:{ drawSVG:["25%", "75%"] //alternate these values }, ease:Power2.easeIn }, 0.2) For what you need to do you can use a function to return a unique value for each target. In the code below you will see that I use jQuery to snag the data-percent attribute of the target's SVG parent .staggerFromTo(".js-fill", 1, {drawSVG:"0%"}, { cycle:{ drawSVG:function(index, target) { var percent = $(target).parent().attr("data-percent") // find parent SVG of target and grab data-attribute console.log(percent) return percent; } }, ease:Power2.easeIn }, 0.2) There is more info on cycle in the docs for each of the stagger methods. Definitely watch this video:

Here's the thing: I think they are super simple examples floating around but not much more harder than that. I have been looking for how to do: Shared Element Transitions - animation pattern where you reparent an element w/ a translate and tween to new pos? See tweet for example Staggered Tweening - Animating the elements within the component <Header /> - ele1 - ele2 <Main /> - ele1 - ele2 <Footer /> - ele1 - ele2 I dont want to only animate the header Main and footer but the elements within them. So the ele1 in <Main/> fades in right after the ele2 in <Header/> --- Ive considered AnimatedJS but despite its power, its a completely different paradigm and more verbose code. If anyone has suggestions on achieving the above let me know. When I figure it out I will definitely share and open source it. With that said thanks for sharing your code zachschnackel. .

I have been using React and GSAP together since react was first created. I have tried using it in a number of ways, but have found that tweening values in vanilla javascript objects combined with the use of the greensock onUpdate function (combined with onUpdateParams) and then pushing the values into a react component has been the cleanest. This completely avoids the need for using findDOMNode (or getDOMNode if you have an older version of React).

I've been using greensock since the as3 days (and love it). Over the past year I've been using React full time. I want to echo what Steven has said. The react questions that seem to be popping up when linked to animation and/or gsap often appear to stem from a lack of understanding about how React works - especially regarding the virtual dom and the importance of the key attribute and lifecycle methods. Jack has asked for examples of gsap breaking react (in a few threads I believe) but no examples have really popped up. There is no doubt that the linked enhancer above can help smooth out things - but you definitely can work with gsap+react without it. Simple things to remember: Use ref instead of findDOMNode | In most cases, you can attach a ref to the DOM node and avoid using findDOMNode at all. source: https://facebook.github.io/react/docs/react-dom.html#finddomnode When using ref, prefer ref callback over the older (yet supported) string variation: | If you are currently using this.refs.myRefName to access refs, we recommend using this pattern instead. source: https://facebook.github.io/react/docs/refs-and-the-dom.html Key is key Key is super important with repeated elements because it's Reacts way of telling if its the same element or not. If an item in a loop has the same key on the next cycle, react won't attempt to unmount the old and mount a new, instead it will just update its props. This is really important for animations because you don't want the next cycle to remove an element that is currently animating. ReactTransitionGroup Also very important when items are being added or removed to the DOM. By wrapping your element in ReactTransitionGroup, you can delay when an element is actually unmounted - meaning you can hold off until an animation is finished before an element is removed from the vdom. gsap is no different from all the other non-React-aware libraries out there. TinyMCE, Google Maps, etc can all work with React despite having very complex architecture. Before you scream - "but there is 'react-google-maps' and 'react-tinymce' on npm!" They are quite simple wrappers that, like above, utitilise the lifecycle methods and refs to tap into the dom while staying react. Happy to throw some codepens together if needed. *Edit* Super simple example, can provide more: http://codepen.io/cjke/pen/qqWJzv?editors=0010 Things to note is that the overall state is kept declarative (as per Reacts liking). The component is given props about its current state (is it animating, etc) and a child component communicates its internal state outwards via callbacks (again this is standard React - think like a normal input component, pass value={value} in and onChange callback). During the timeline animation, the state is maintained (the counter - ironically this is set is via gsap, but the counter state count could be from clicks or anything).