[Understanding autoAlpha]

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.

[Understanding autoAlpha]

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?

 

[Easing Request - Anticipate Ease]

Hi Venn,

 

I'm not sure what you mean by "AnticipateEase plugin", but CustomEase will allow you to create any ease you want.

Our new version of the Ease Visualizer make it pretty easy to draw the type of ease used in Elliot's demo.

We are not planning this time to make a special configurable ease for the anticipate effect.

 

CustomWiggle (which is also coming soon) has an anticipate style: 

See the Pen LRqkOr?editors=0010 by GreenSock (@GreenSock) on CodePen

 

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.

[Easing Request - Anticipate Ease]

Looking at the new CustomEase that GSAP has introduced.

Are we able to recreate this without adding a the AnticipateEase plugin?

[Setting GSAP default tween with values defined in CustomEase?]

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

[Setting GSAP default tween with values defined in CustomEase?]

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.

[Randomize an array and stagger them.]

Oh wow, some clever ways to do tricks here!

[Randomize an array and stagger them.]

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?

[Tweens get blocked if you have a repeat:-1 tween before within a timeline?]

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});
}

[Tweens get blocked if you have a repeat:-1 tween before within a timeline?]

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.

[how do I reset or reverse a tween?]

Yes, I meant exactly what you thought I think.

 

Wow! Didn't know this! Thanks Jack!

[how do I reset or reverse a tween?]

Thanks Jack!

 

Adding a function and calling a function within a timeline.

Which is better? I can't really see the different?

[how do I reset or reverse a tween?]

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.

[how do I reset or reverse a 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.

[how do I reset or reverse a tween?]

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.

[how do I reset or reverse a tween?]

Sure, all animation classes share a common reverse() method (as well as most other basic methods for control, like pause(), resume(), timeScale(), seek(), etc.).

var tween = TweenMax.to(...);
//then later...
tween.reverse();

Note that when you reverse(), it just makes the playhead go backward toward the start from wherever it is currently. So if you call reverse() when the tween has already played for 1.25 seconds, it will then take 1.25 seconds to reach the beginning again. If you want it to jump to the end and play backward, you can call tween.progress(1).reverse(). 

 

Does that help?

 

Thanks Jack, I got that part. I further elaborate my problem.

 

See the Pen xEykQX by vennsoh (@vennsoh) on CodePen

 

 

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?

[how do I reset or reverse a 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.

See the Pen xEykQX by vennsoh (@vennsoh) on CodePen

 

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.

[Clipping issue in SVG]

I have updated my pen.

I moved my clipping mask along with the tween. That's y.

 

[Clipping issue in SVG]

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)?

See the Pen gwdjkv by vennsoh (@vennsoh) on CodePen

[Circle arrow animation]

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.

[Circle arrow animation]

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'}})
})

[Circle arrow animation]

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": 

1. The arrow will transition to the left and out of the view while getting clipped in the circle.
2. The circle will get filled.
3. 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.

[GSAP as a prototyping tool?]

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.

 

 

[How to create a sortable list with Draggable]

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 (:

[Draggable cursor]

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;
}