venn

Thanks Jonathan. I tried: TweenMax.to(ABC, 1, {opacity: 0, visibility:"hidden"}); However it is immediately set to hidden instead of tweening to opacity 0 first? I will try to create a Framer.js codepen to demonstrate my problem.

Hi team, I am trying to use GSAP with Framer.js API. So as usual Framer will import all my Sketch designs into the workflow. If my layer is (eg: ABC) in Sketch, I will be able to target it with TweenMax.to(ABC, 1, {opacity: 0}); However, I won't be able to use autoAlpha with this. TweenMax.to(ABC, 1, {autoAlpha: 0}); <-- Not working I know this might be some Framer thing. However I would like to know how autoAlpha works behind the hood so maybe I can fix it to get GSAP work with Framer. Does autoAlpha makes an element opacity:0 and visibility:hidden when autoAlpha:0 ? Any other things else?

Thanks Carl. Yes the custom ease visualizer achieve what AnticipateEase effect that Elliot's has done. Thanks for the tip. WOW! CustomWiggle looks awesome! Can't wait.

Looking at the new CustomEase that GSAP has introduced. Are we able to recreate this without adding a the AnticipateEase plugin?

OMG! Yes, this is what I am looking for! Thanks @Carl.

Something like that? Are we supporting this API? CustomEase.create("customInOut", ".4,.01,.23,1.35"); TweenLite.defaultEase = new Ease("customInOut"); I tried in the code but it is not working.

Oh wow, some clever ways to do tricks here!

What is the easiest way to always randomly shuffle all items in an array and then stagger them. var items = [a, b, c, d, e]; <-- Random order everytime TweenMax.staggerTo(items, 1, {opacity: 1}); 1) I can first randomize my array by following this link http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array Then only do my stagger effect. 2) Or can I use the new .cycle method in stagger. Will that be something I can leverage? Or any better/simpler ways?

TL .to(TweenB, 1, {x:10}) .to(TweenC, 1, {x:10}); TweenMax.to(TweenA, 1, {x:10, repeat:-1}) I will go for this approach right now as it is sufficient for what I need. Just keep looping tweenA when TL starts. With .call() I will assume you can determine at which point within the timeline, you want to bring TweenA in? TL .to(TweenB, 1, {x:10}) .to(TweenC, 1, {x:10}) .call(yolo); is different to TL .to(TweenB, 1, {x:10}) .call(yolo) .to(TweenC, 1, {x:10}); function yolo(){ TweenMax.to(TweenA, 1, {x:10, repeat:-1}); }

Hi team, I noticed when I am using timeline, if there is a tween that uses repeat:-1, the tweens afterwards will get stuck unless you specify the absolute time they should be playing in the timeline. My workaround is to separate looping tweens into its own tween. But is there any other way that will allow me to add a looping tween in a timeline while still have other tweens after that? TL .to(TweenA, 1, {x: 10, repeat: -1} <- Keeps looping. .to(StuckTweenB, 1, {x: 10} <- Will not play. .to(NotStuckTweenC, 1, {x: 10}, 4); <- Will play.

Yes, I meant exactly what you thought I think. Wow! Didn't know this! Thanks Jack!

Thanks Jack! Adding a function and calling a function within a timeline. Which is better? I can't really see the different?

Thanks Jack! GSAP skill +1 again. Sorry for the constant reply as I have spent my whole afternoon - evening trying to figure this out. Trying different ways. - So can I say, In a timeline, it is always "SAFER", in fact "BEST" to add "functions". The functions will be reusable. Adding tweens or timelines within another timeline can cause conflicts if not careful. Add a tween variable within a timeline if you want to remove it from the timeline later? <-- This is a trick I read from the forum. Eg: performing .reverse() without just that tween.

I tried doing something like this. I have 4 tweens, 1 timelineA that I want to animate. My main timeline will house all 4 tweens and 1 timelineA. I create a separate timeline for the reverse that will house timelineA.reverse, tweenA.reverse() and tweenB.reverse(). tweenA, tweenB, tweenC, tweenD tlA, tlMain, tlReverse tlMain = new TimelineMax(); tlReverse = new TimelineMax({paused: true}); tlMain .add(tlA) .add(tweenA) .add(tweenB) .add(tweenC) .add(tweenD) tlReverse .add(tlA.reverse()) .add(tweenA.reverse()) .add(tweenB.reverse()) When the user visits the page, It will play tlMain. When the user clicks on a button, it will play tlReverse. It looks like a sound solution? However it is not behaving as expected. It is like tlReverse is played even before I click on the button.

Thanks Jack. I see. What I am trying to achieve is that I have a timeline like. homepageTL .add(playSplit, "start") .add(tweenCTA, "start+=1.125") .add(tweenIconAll, "start+=2.25") .add(tweenSelector, "start+=2.25") .add(tweenLogo, "start+=2.25") playSplit is a function, the rest are tweens. I intentionally split the tweens out as I want to reuse them separately. And in cases, I would like to play this set of tweens in sequential order. Sometimes I would like to reverse the tween individually depending on scenario. Eg: click on this button, revese tweenCTA and tweenSelector concurrently. I hope that makes sense.

Thanks Jack, I got that part. I further elaborate my problem. http://codepen.io/vennsoh/pen/xEykQX How can make store an independent tween while adding it to a timeline. Later on I would like to tween.reverse() it by triggering some events. It seems to just jump to the end of the timeline or start of it. It doesn't tween?

If I create a normal TweenMax, TweenLite can I reverse it? Or reverse is only reserved for timelines. Update: I looked through the documentation, it seems that TweenMax allows reverse. It is all working fine until I add my tween into a timeline. http://codepen.io/vennsoh/pen/xEykQX How can make store an independent tween while adding it to a timeline. Later on I would like to tween.reverse() it by triggering some events.

I have updated my pen. I moved my clipping mask along with the tween. That's y. http://codepen.io/vennsoh/pen/gwdjkv

I am trying to clip my text within the blue box however it seems that when I animate it, the text just move out of the blue box (cut in half)?

Although sometimes there are weird things like the fill of an svg element is still the mouseOut state where I thought it has been reset back.

I managed to figure it out. Here is my code that tries to solve this problem. I use SVG and animate the SVG attributes. arrowLeftTL = new TimelineMax({paused: true}); arrowLeft.on(Events.MouseOver, function(){ arrowLeftTL .to(arrowLeftCircle, quick, {attr:{'fill-opacity': 1}}, "slide") .set(arrowLeftArrow, {attr: {fill: '#000000'}}, "slide") .to(arrowLeftArrow, quick, {x: "-=20"}, "slide") .set(arrowLeftArrow, {x: "+=40"}, "slide2") .to(arrowLeftArrow, quick, {x: "-=20"}, "slide2"); arrowLeftTL.play(0); }) arrowLeft.on(Events.MouseOut, function(){ TweenMax.to(arrowLeftCircle, quick, {attr:{'fill-opacity': 0}}) TweenMax.set(arrowLeftArrow, {attr: {fill: '#ffffff'}}) })

Hi team, I am trying to figure how do create this particular animation. Here I attach an image with the steps from left to right in order. The idea is that when you hover your mouse on the "circle arrow": The arrow will transition to the left and out of the view while getting clipped in the circle. The circle will get filled. A new arrow will comes from the right. Any kind of pseudo code or idea on how I should start this will be most appreciated. I believe SVG will the best option? Cheers, Venn.

I am not sure if this is relevant for this forum. But just a food for thought. (: Looking at the rise of prototyping tools in the market. I am thinking have you guys thought of leveraging existing GSAP to create a prototyping tool? Something similar to Framer studio. framerjs.com Designers are open to the idea of coding. GSAP has an extensive animation library with a good track record that it is well performant across devices. And the good thing that the code is even reusable on responsive web. For native animation in Android/iOS, I am sure the mobile developers will be able to glean the code to get useful motion attributes out from it.

I am trying to set a bounds to the example you have done @OSUBlake, however it seems that I can't apply a bounds? If I do that, when I start dragging, the element will jump to a odd spot instantly? The reason I am looking at applying bounds is so that I can do things like: throwProps: true, edgeResistance: 0.9, overshootTolerance: 0.1, maxDuration: 0.2, I don't want the draggable element to be able to drag to where ever but contained within an area with momentum applied. Updates* Ah, I tried again and it seems to work (:

Figured this out, to overwrite cursor with an image. I will need to put !important In CSS: .grabbable { cursor: url('../images/cursor.png') 32 32, auto !important; } .grabbable:active { cursor: url('../images/cursor-active.png') 32 32, auto !important; }