venn

Thanks @OSUblake That makes a lot of sense to me. I will investigate those posts that you linked further.

I am wondering if Greensock is able to tween an API from a different library? I am using Framer.js with my mobile work but using the GSAP animation library. In Framer you can tween the x value (relative), or the screenFrame x value (absolute value). I have attached an image for the API. https://framerjs.com/docs/#layer.layer (under screenFrame) The screenFrame API: element.screenFrame = { x: 400 }; Instead of tweening the x value which is relative, I am trying to tween the screen frame absolute value. TweenMax.to(element, 1, {x: 0}); TweenMax.to(element, 1, {screenFrame:{x: 0}}); <-- It is not working? It is because my JS/GSAP syntax isn't correct?

Lots of love and thumbs up! GSAP forum and the community are indeed super responsive and helpful. I did ask a lot of dumb questions on the forum but everyone is so kind to not call that out (: Continue the awesome work on GSAP!

Thanks for the clarification!

Thanks for the suggestion! I thought about this too. Do you reckon this is the only way?

Hi folks, I am trying to draw my circle from 12oclock onwards. I have tried multiple ways but I seem to can't figure out how to do this? Any help will be appreciated (: Thanks, Venn.

Hi, I have tried this, .set({}, {}, "+=5"); and it works perfectly. Since this is a thread from the 2013. I am wondering if there is a better, newer way for instance like this? Thanks.

Great explanation. My GSAP Skill +1.

Whoa! Such pro tip for option 3! Will definitely keep that in mind. Yes, silly me. Option 2 doesn't work. It just removes the label. I have also tried another approach which is creating a variable to contain the tween and then .add it to the timeline. If we need to skip that tween, we .remove it. However with .add, .remove it seems that the timeline is altered. http://codepen.io/vennsoh/pen/xORYjv var TL = new TimelineMax(); var tween = TweenMax.to("#test", 1, {y: 50}); TL .to("#test", 1, {x: 50}) .add(tween, "here"); function myFunction() { TL.remove(tween).reverse(); <-- Different result // TL.reverse("here"); <-- Than this }

I have a timelime and I would like to remove one of the .to() from the timeline. Are these 2 the same? When I tested out the code, it looks the same but I am wondering whether it is true? Or if there is any better ways to remove a .to() / .from() or whatever from a timeline. What I am trying to achieve is that I would like to play my timeline from element2 onwards Option 1: timeline .to(element1, 1, {y: 640}, 0) <-- Skip this .to(element2, 1, {scale: 5}, "here") .to(element3, 1, {scale: 4, 0) .to(element4, 1, {scale: 3, 0) timeline.play("here"); Option 2: timeline .to(element1, 1, {y: 640}, "here") <-- Skip this .to(element2, 1, {scale: 5}) .to(element3, 1, {scale: 4, 0) .to(element4, 1, {scale: 3, 0) timeline.remove("here").play(); And I guess this approach works for .reverse() as well? You play a timeline and then in reverse you want to skip one of the .to()

Sorry for my dumbness! Thanks Blake, you are awesome!

Hi, I created a polyline SVG curve. I am trying to a really simple tracing from 0% to 100% but I am not sure why it isn't working? Shouldn't it be as simple as: TweenMax.fromTo("#graphing", 2, {drawSVG:"0%"}, {drawSVG: "100%"});

Ah great! Thanks for the tip!

revealTL = new TimelineMax({paused: true}); revealTL.from(element, 0.2, {opacity: 0, y: "+=64"}); Hi there, I created a timeline that is paused initially. However the visual attributes of opacity:0 and y position is already applied to my element before the timeline starts. How do I remove that pre-stagging transformation and only have it when I play my timeline? Cheers, Venn.

Ah even better! Thanks Blake!

Thanks Blake! Sorry for my super unclear explanation. I have updated the codepen demo. Here is the final result. http://codepen.io/vennsoh/pen/qNOmRp?editors=0010

I have figured that out with the following code in an actual project of mine. Here it is. Not sure if this is the best way. I am creating the carousel dots morphing sort of effect that can be seen in some of onboarding experience within Google apps. // Morphing dot morphDot = allDots[0].copy(); morphDot.backgroundColor = "#007dba"; reverseTween = new TimelineMax({paused: true, onReverseComplete:reverseFunction}); reverseTween .set(morphDot, {x: allDots[0].x}) .to(morphDot, standardTime, {width: 48}) .to(morphDot, standardTime, {x: allDots[1].x, width: 16}); function reverseFunction(){ TweenMax.set(morphDot, {width: 16}); } // Calling the tween reverseTween.play(); // Reverse the tween reverseTween.reverse();

Thanks! That's super helpful! I have further revised the code. http://codepen.io/vennsoh/pen/qNOmRp?editors=0010 I am trying to create this effect that when you click on target1, the move object will expand in width and morph into target2. But instead of snapping to target2, the shape will morph back into target2 by shrinking it width from left to right. If you know what I mean. I tried changing the left position and width at the same time to mimic that effect but it seems that this isn't the correct way. Then when you click on target2, it will morph back into target1. It should grow out from target2 to target1 instead of full width and then shrink it back to target1. I am trying to figure this out, any pseudo code, explanation, etc will be much appreciated.

Hi there, I am trying to create the effect of one shape morph in width from target1 to target2. And then morph back from target2 to target1 using .reverse() However I am unsure why my .reverse() isn't working? Cheers, Venn.

Ah yes! Thanks!

I know bezier-easing repository isn't maintained by GSAP or related to it anyhow. But today when I am using it as I need a way to translate CSS bezier-easing to GSAP. It fails to work. It keeps saying... index.js:54 Uncaught ReferenceError: module is not defined ): Is using this plugin the only way to do CSS bezier easing translation with GSAP? https://www.google.com/design/spec/motion/duration-easing.html What I am trying to achieve is to simulate the CSS bezier-curve in Google Material's motion page. - SOLVED: It seems that I need to run npm install to generate the dist folder. Within that folder it contains bezier-easing.js Response by author: bezier-easing aims to be used as a NPM module in a project using webpack / browserify. that said, as you say we also have a standalone build. it is available here: https://npmcdn.com/bezier-easing@2.0.3/dist/bezier-easing.js and https://npmcdn.com/bezier-easing@2.0.3/dist/bezier-easing.min.js if you want such web standalone build

Hi all, I am reading through Google Material's motion guideline. There is one particular effect that is interesting yet I am trying hard how to do this in code. The page: Choregraphing surfaces https://www.google.com/design/spec/motion/choreography.html#choreography-creation Video: https://material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0B14F_FSUCc01X1hUU2x6dWpQX1U/CreationChoreo_03_StaggerDo_v3.webm - I could put them into an array and display them one after the after from left to right and then drop to a second row and display the next set and so on. But how do I display them from left to right and top to bottom at the same time?

Thanks! It makes sense now.

Hi, I am wondering what's the relationship between stagger's duration and stagger's staggerDuration. Looking at this code: TweenMax.staggerTo([mc1, mc2, mc3], 1, {x:100, y:200}, 0.25}). The time duration is 1 but there are 3 elements to stagger. mc1 = 0.25, mc2 = 0.25 + 0.25 mc3 = 0.25 + 0.25 + 0.25 1 - 0.75 = 0.25 (What happen to this extra 0.25?) - Is the duration the total duration for the whole stagger code (mc1, mc2 and mc3 combined?) And the stagger duration will modulate to fit within the whole duration? Thanks, Venn.

You guys are too awesome! (Tears)