Leaderboard

Hi @TradingBo What I did is not obvious, and there's probably not a lot of people that will understand why it works. To make the HTML cubes behave like the SVG, I wrapped the cubes in a container, and instead of changing the size of each cube, I just scale the container to match the scale of the SVG. That's the hard part, because getting the scale of the SVG isn't obvious. The .getScreenCTM() returns the transformation matrix of the SVG. When there is no rotation, this is what the values of the matrix represent. var matrix = svg.getScreenCTM(); matrix.a = scaleX; matrix.b = 0; matrix.c = 0; matrix.d = scaleY; matrix.e = x; matrix.f = y; Here's a demo where I demonstrate some of that. The gray box represents the view box of the SVG. When you resize your screen, you'll notice that matrix.a and matrix.d represent the scale of the view box, and depending on the shape of the screen, matrix.e or matrix.f will change. So knowing that matrix.a is scaleX and matrix.d is scaleY, I just plug those values into scale for the container. I also apply the scale to offset the x and y values of the container. I'm dividing by 2 because the transform origin for those values is 50% 50%. TweenLite.set(container, { xPercent: -50, yPercent: -50, scaleX: matrix.a, scaleY: matrix.d, x: -cubeSize / 2 * matrix.a, y: -cubeSize / 2 * matrix.d, })

@mdvoy Is not necessary to go through all that code to get the dom node from react, specially if you're using React Transition Group (RTG). The onEnter, onExit and addEndListener events from RTG already give you access to the DOM node you're animating, which is the one wrapped byt the <Transition> tag. Check them in their API docs here. All you have to do is call a function in one of those methods to trigger an animation when a route changes: <Transition key={props.location.pathname} timeout={500} mountOnEnter={true} unmountOnExit={true} onEnter={node => { // set the position and properties of the entering element TweenLite.set(node, { position: "fixed", x: 100, autoAlpha: 0, width: targetWidth }); // animate in the element TweenLite.to(node, 0.5, { autoAlpha: 1, x: 0, onComplete: completeCall, onCompleteParams: [node] }); }} onExit={node => { // animate out the element TweenLite.to(node, 0.5, { position: "fixed", opacity: 0, x: -100 }); }} // on exit end > As you can see is not that hard. You can check RTG docs and see all the options you have to work with. Also take a look at this discussion in RTG GitHub repo, regarding page transitions with React Router: https://github.com/reactjs/react-transition-group/issues/136 Take a good look at this sample by Matija Marohnić (who is one of the main maintainers of RTG) which is quite simple an works great: https://github.com/reactjs/react-transition-group/issues/136#issuecomment-406626669 As personal advice try to avoid, specially if you're not very experienced, the code from React Router's samples. It doesn't have any comments so is not that easy to follow and understand. Finally if you can create a live reduced sample in codesandbox or stackblitz, in order to get a better look at what you're doing, it would be great. Happy Tweening!!!

Hmmm. Well besides selecting the correct element, the problem is that the circle is an image. Is that something you have control over, or did axure create it? The only way to change the color of an image is with canvas or by using an SVG color matrix filter, but either of those options might be hard to integrate with what you're using. And for accurate coloring, it would require the circle image to initially be white. If you could somehow get the circle to be an actual HTML or SVG element, you shouldn't have any issues changing the color.

Strictly speaking, no. The context is exatcly the same. It is the component itself. This what you describing will never work because Vue will stop everything it is doing and wait for the done() from the appear method. No further methods will run, no other behaviour will be trigered, nothing. And, given that the done() is never called, the leave hook will never be fired. So, you cannot have execute this idea of yours. You will need to have one animation for the appear method and one for the leave method.

It's hard to tell without seeing a working demo, but it looks like you're not targeting the correct element. Is this jQuery? var tweenableWidget = widget.$().children(); What do you see in your dev console if you log it out? console.log(tweenableWidget); // or console.log(tweenableWidget[0]); Targeting the correct element will depend on how the markup is nested. Here's a shot in the dark. var tweenableWidget = widget.$().children()[0].firstChild; // or maybe var tweenableWidget = widget.$().children()[1].firstChild;

For that you can use the BezierPlugin and then set the progress of the tween. Note that the BezierPlugin comes with TweenMax so you don't have to load it separately. A cubic Bezier is probably the most common type of motion path. There are 2 control points (P1, P2) in between each set of anchor points (P0, P3). Lets say you wanted to move something using these points. var points = [ { x: 100, y: 100 }, { x: 400, y: 300 }, ]; You would need to add the 2 control points, which should be placed at 1/3 and 2/3 the distance between the points. var dx = 400 - 100; var dy = 300 - 200; var points = [ { x: 100, y: 200 }, { x: 100 + (dx * 1/3), y: 200 + (dy * 1/3) }, { x: 100 + (dx * 2/3), y: 200 + (dy * 2/3) }, { x: 400, y: 300 }, ]; // Tween an object TweenMax.to(someObject, 10, { bezier: { values: points, type: "cubic" }, ease: Linear.easeNone, repeat: -1 }); For Club GreenSock members, there is the MorphSVGPlugin which could simplify that by using SVG path data. var points = MorphSVGPlugin.pathDataToBezier("M100,200 L400,300"); Give me a few, and I'll throw an SVG demo together for you.

Hi @Spycatcher2018 Check out the docs. The API for the ActionScript and JavaScript version of TweenMax is mostly the same. Note that JS doesn't have types unless you're using TypeScript. The big difference is that there are several ways to render stuff to the screen, HTML, SVG, and canvas. HTML is good for text and input, like buttons. SVG and canvas are good for graphics, and each medium has pros and cons. SVG is easier to work with, but slower than canvas. Canvas is fast, but can be JS heavy because it uses a lot of boilerplate code. Note that you can layer stuff on top of each other to create a composite, so you're not limited to one medium, but your GSAP code will be slightly different depending on what medium you are animating. Here's a good tutorial for SVG. http://tutorials.jenkov.com/svg/index.html And canvas. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial I don't think there's much of a need to use a library for SVG, but there are several canvas libraries that might make your transition easier. PixiJS and CreateJS have an API that is similar to flash. I think CreateJS is the default canvas library used by Adobe's Animate CC. http://www.pixijs.com/ https://www.createjs.com/easeljs Some other canvas libraries that focus on vector graphics. https://p5js.org/ http://paperjs.org/

Hi @2sweedy I think starting out with p5/processing is a great way to learn animation and programming, and the math won't be as hard as you may think. If you want to use GSAP with the p5 editor, just copy the url from the "Download GSAP" button on greensock.com, and insert it into the index.html page. Here's the demo @Sahil made using that editor. Just press the play button. https://editor.p5js.org/OSUblake/sketches/BJ4n6bqDX

Here's a neat article Jack wrote about transform origin in SVG. In one of the demos it shows how the transform origin is actually relative to the top left corner of the SVG, but you don't have to deal with that if you're using GSAP. https://css-tricks.com/svg-animation-on-css-transforms/

The problem is that changing cx/cy values results in a different getBBox value. GSAP normalizes a lot of behavior with transforms in SVG, but they work EXACTLY like they do in canvas. If you don't translate to the transform origin, it's not gong to scale correctly.

Well, axure sure is being difficult. You still can't access the svg when it's being used for the src of an image. This article might help if you go the filter route. https://css-tricks.com/color-filters-can-turn-your-gray-skies-blue/ So something like this if you wanted to animate a color matrix. <svg> <filter id="my-filter"> <feColorMatrix id="color-matrix" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/> </filter> </svg> #u0_img { filter: url(#my-filter); } TweenMax.to("#color-matrix", 1, { attr: { values: "0.5 0 0 0 0 0 0.5 0 0 0 0 0 0.5 0 0 0 0 0 1 0" } }); I have no idea what that will result in. I'm sure somewhere online there is a tool that makes figuring out those values easier.

Nothing is set in stone. You can add event callbacks using .eventCallback(), or by accessing the vars object directly. leave(el, done) { this.tl_intro.eventCallback("onReverseComplete", done) this.tl_intro.reverse(0) } // or leave(el, done) { this.tl_intro.vars.onReverseComplete = done; this.tl_intro.reverse(0) }

The done callback does something completely different in each method. As an example, here's a demo where I was showing somebody how a leave method might work using vanilla JS. The callback is a promise that removes the element. An enter or appear method would do something completely different.

Check this out.

@n00banim8r you're welcome. Your code looks quite fine and the filter transitions are smooth, good job. As you mention the React GSAP enhancer is quite outdated and I don't see (or heard of) any intentions in getting it up-to-date with the latest versions of GSAP and React, so I wouldn't recommend it's use. Also as you already saw is not needed when you use Transition Group. So my advice is that when you're animating components being mounted or unmounted, stick with GSAP and React Transition Group and everything should work ok. Also RTG has very good docs for it's API which is very simple actually so is a great tool to use with GSAP. Happy Tweening!!!

You can scale your globe.

@Sahil, Not sure what to say, I am so excited. I followed both links and signed up for medium and p5js. Yes it is a lot easier, not as many bells & whistles, but easier to handle and learn the different commands to put forth code. Medium, is so interesting with video's and stories about everything that pulls apart and puts back together the aspects of coding and writing, and art, etc...amazing. Then I followed a third link and found another learn to code for free site that will give me further instructions. Your input gives me more understanding of what I don't understand, thus switching gears and adopting p5js in place of Codepen for now, but planning on returning when my skill is much improved. Thanks so much for all your help. Soon I will know what I am talking about. lol You are a Superhero today!!

Hi @Haisan, Welcome to the GreenSock Forum. One option could be to morph two svg 'blobs' as in this example: Happy tweening ... Mikel

Hi @smallio, One option is: function next() { if(++index < messages.length){ headingForward(index); } else { index = 0; TweenLite.set(boxes,{scaleX: 0}) headingForward(index); } } function previous() { if(--index > -1 ){ TweenLite.set(boxes,{scaleX: 0}) headingBack(index); } else { index = messages.length-1; headingBack(index); } } This could possibly be optimized for 'prev'. Happy tweening ... Mikel

Ya sure you can animate multiple properties of same element. In following demo I am using timeline and setting position parameter to zero so both animations will start at same time. If you are not using timeline then you can define two TweenMax tweens and they will run at the same time.

Happy to help. When you have multiple elements that need to do the same thing it's usually best to give them a class and use that as your target. That being said there are many ways to target all three paths from your demo and have them start at same time. You can add all three with an array like this: tween_journey.to([$journey1, $journey1_2, $journey1_3 ], 1, { strokeDashoffset: 0, ease: Linear.easeNone }); You could also use three separate tweens and add the position parameter of 0 to have them all start at the same time like this (this is what @mikel was talking about): tween_journey.to($journey1, 1, { strokeDashoffset: 0, ease: Linear.easeNone }, 0); tween_journey.to($journey1_2, 1, { strokeDashoffset: 0, ease: Linear.easeNone }, 0); tween_journey.to($journey1_3, 1, { strokeDashoffset: 0, ease: Linear.easeNone }, 0); Again, using a class is the most efficient way to do it, but I wanted to point out the other ways to target the elements. The position parameter is best when you have different tweens, but want them to start at the same time. Hopefully that helps a bit. Happy tweening.

Thanks for sharing Craig. It makes me feel like one of these days all this coding stuff is just going to click in and I will be off writing really good animations and text with less worry and doubt then I have right now. In the beginning it is really hard to form questions that make sense, when basically I don't really know or understand what I am talking about. Some of your comments made me smile as in ask but then figure it out on your own and keep rolling on. My first coding is that Java Script, and I'm doing simple animations and working toward more difficult ones. Here I was smiling saying hey, this isn't so bad no math, then as the lessons increase here comes the arithmetic marching in and I said "wow" not good I really suck at math. Never could understand that stuff in school and now to learn coding I need to understand algebra. I thought this it it the end I will never learn how X & Y equal numbers, but maybe I am a bit smarter now because the way I am learning makes it all somehow make sense. Anyways, just wanted to let you know through all my rambling on, that your words have given me courage to keep going and not give up. See you around the forum!

Hi @JoSch, Welcome to the GreenSock Forums. If you have specific GSAP problems or questions, we're happy help. Providing a demo wants to get you the best possible answers. More info: Here's an example of tweening several objects by class or id at the same time: Please take a look at this info: position-parameter Happy tweening ... Mikel

I don't know anything about the charming script you're using, but it looks like it isn't splitting your text into <span> tags. Here's a fork of your pen using SplitText. You can see that everything is working fine. SplitText makes this type of animation super easy and is loaded with great features. https://greensock.com/SplitText It is a Club plugin. More info: https://greensock.com/club Happy tweening.

Hello @webrhythm and Welcome to the GreenSock Forum! Here is an example of using the CSSRulePlugin with a GSAP timeline, using TimelineMax. Happy Tweening!

Sounds similar to what I did in this demo: You should be able to set up some triggers to animate the mask or change the color of the logo path(s) fill. The mask or clip-path route will probably be a bit better because during scrolling the logo could be straddling two sections of background colors and the mask could compensate for that. Happy tweening.

Hi @redfawx, Yes you can! for liquid motion: Check out e.g. the MorphSVGPlugin... https://greensock.com/docs/#/HTML5/Plugins/MorphSVGPlugin/ It's a paid plugin, but you test it out for free on CodePen... http://codepen.io/GreenSock/pen/rOjeRq?editors=0010 As @PointC mentioned in your first thread: If you have specific GSAP problems or questions, we're happy help. Providing a demo will get you the best possible answers. More info: Best regards Mikel

My intentions weren't to discourage you from posting anymore questions, so don't hesitate. You can enable disable draggable entirely using those methods, but you can't disable certain methods. You will need to add conditional logic instead to avoid execution of certain code. But I am not sure why do you need it, It works just fine as it is. Are you using onDrag event instead of onDragStart? You don't need to do that. onDragStart fires only once and it fits perfectly with what you are doing.

Doh. A simple typo! (I missed "new" before TimelineMax.) Everything works as expected now.

Blake, thanks for going the extra mile in explaining the technique. Very cool and helpful!