[TextPlugin animating span tags]

9 minutes ago, ZachSaucier said:

If you want to loop you need to use a loop  

 

 

 

 

Sure I will go down that route, I was just checking there wasn't a built-in method. GSAP usually tweens arrays automatically, but I realise this is more complex

 

Do you know how I can time the tweens of each word to match as if the sentence was being Tweened? Eg: the word IS would animate quicker than SOMETHING

 

By the way: I am not using SplitText for this

 

[TextPlugin animating span tags]

15 minutes ago, ZachSaucier said:

The concept is the same. You should still split the container (#Headline_Copy) by words and letters, loop through each word, and append the letter animations to a timeline like mikel shows.

 

Here's a new method which depends on the whole string being grouped into spans, i'm nearly there:

 

See the Pen qBaroKJ by friendlygiraffe (@friendlygiraffe) on CodePen

 

The questions I have are: How can I make the timeline loop through the spans array and animate all the words at adjusted speeds? There is also a delay at the beginning. Thanks!

[TextPlugin animating span tags]

19 minutes ago, mikel said:

Hey @friendlygiraffe,

 

The solution could be: step by step or words by words (?)

 

 

 

 

Happy tickering ...

Mikel

 

 

Thanks, that's great. But it's a dynamic thing. So the text has to be in one div

I probably should have specified this originally!

 

Updated the codepen: 

 

 

[TextPlugin animating span tags]

I know the TextPlugin is not supposed to support nested HTML tags, but I'm trying to tween the colours of a paragraph, which doesn't animate the styled word's letters individually.

 

Wondered if there was a way around this? 

 

Unfortunately, I am not allowed to use SplitText for this project, otherwise I would have.

 

Thanks

See the Pen YzGZree by friendlygiraffe (@friendlygiraffe) on CodePen

[Animating SVG polygon points]

4 hours ago, Shrug ¯\_(ツ)_/¯ said:

None of the following is GSAP specific but might be interesting to you.

 

This is a fun one with SVG:

 

 

 

But as stated above Canvas is gonna be highly more performant than SVG.

 

So you may like this Canvas example (the zoom is a touch extreme).

 

 

 

That Canvas example was I think based off this Flash example (requires Flash):
- http://www.flashmonkey.co.uk/flash/colorwall/
- http://www.flashmonkey.co.uk/flash/colorwall-with-images/

 

Which was based off this original Flash creation that is no longer online by famed Japanese designer Yugo Nakamura done for Wonderwall.
- https://thefwa.com/cases/wonderwall
- http://tha.jp/807/

 

Flash days 😢 ❤️ . But its nice to know @GreenSock had more forethought than mighty Adobe, long live AS JS. 😄

I was just thinking how much I miss Flash! Thanks for this, really handy

[Animating SVG polygon points]

I found this which animated SVG polygon points, could something similar be done but without the draggable functionality ?

See the Pen QdbQjN by osublake (@osublake) on CodePen

[Animating SVG polygon points]

9 minutes ago, ZachSaucier said:

Not at all! GSAP animates any object you get it. 

 

There are a lot of ways you could set it up but here's the gist of one method:

 

 

This is certainly something I can have a play with, thanks.

[Animating SVG polygon points]

1 hour ago, mikel said:

Hey @friendlygiraffe,

 

Could this be an option for you?
Regardless of whether path or polygon points ...

 

 

 

 

Happy tweening ...

Mikel

 

Thanks Mikel - Not really, I want the points to animate individually, rather that a uniform scale

[Animating SVG polygon points]

7 minutes ago, ZachSaucier said:

Hey friendlygiraffe. Is there a reason why you're restricted to SVG? I would think that this sort of thing would be done in canvas instead because it's faster at rendering lines. I'd create a list of points with their starting positions in a grid, each update affect each point's position randomly in the x and y direction while enforcing some bounds, and also draw a line from each point to each point around it.

I had a look at canvas, and it seems to use greensock with it, I'd have to port it through something like pixijs. Is there a more straight forward approach?

[Animating SVG polygon points]

Hi, what's the most efficient method for animating polygon points in an SVG? Here's the result I'm looking for from the CodePen attached:

 

 

I'm open to using plugins, but the closest I found was morphSVG, which I'm not sure is the method I want to use (Creating 2 separate SVGs).

 

There is a possibly that this will go in a 3rd party server HTML creative, in which case I'd need a method that doesn't use these, but happy for plugin suggestions for now

Thanks!

See the Pen eYZyxZM by friendlygiraffe (@friendlygiraffe) on CodePen

[reset values for multiple 'from' commands]

That is exactly how it is supposed to animate, but I was trying to keep the end Tween in one line.

The first tween has the luxury of being on one line:

 

tl.staggerFrom(".circle", 1, {x:300,autoAlpha:0}, 0.2);

 

Whereas the end tween require 2 lines:

 

tl.staggerFrom(".circle", 0.5, {y:"-30px", immediateRender:false}, 0.2, "end");
tl.staggerTo(".circle", 0.5, {autoAlpha:0.5}, 0.2, "end");

 

If this is the correct way of doing it then that's fine, I just thought I might be missing a trick. Thanks!

[reset values for multiple 'from' commands]

Thanks, that's closer to what I mean, but here's a better example.  https://codepen.io/friendlygiraffe/pen/RdEWXJ

 

I want the animation at the "end" label to retain the alpha as it would if immediateRender was true.

 

is is this possible without changing the last animation to a staggerTo?

 

Thanks again

[reset values for multiple 'from' commands]

23 minutes ago, PointC said:

I was a bit confused by the question too. immediateRender:false would be the way to get the y position tween to wait. I'm not understanding the x position set(). You want the circles to jump back to the starting point before the y position tween? Like this?

 

See the Pen bZQaRd by PointC (@PointC) on CodePen

PS I'd always recommend the latest version of GSAP (2.1.2 currently). You were using 1.18.4.

This is exactly what I wanted to achieve. Sorry for the confusion. I had tried immediateRender:false, but only in the Timeline, not individual tweens

 

Would I have to specify the x value in .set? Just checking there isn't an initialise/reset properties method. I looked into ClearProps but didn't get very far

[reset values for multiple 'from' commands]

Hi, I was wondering how I would go about resetting a group of elements before another 'from' command is fired?

 

I don't want the y:"-=20px" tween to be initialized when starting the timeline, and when they are animated from y, I want them to start from the original x.

 

I've tried a .set command but didn't work for what I want.

See the Pen gEQGZx by friendlygiraffe (@friendlygiraffe) on CodePen

[Animating height percent]

Yes that works too, I see what you mean now @GreenSock Jack. Thanks

[Animating height percent]

Thanks all, sorry for the delay. I've made another pen to demonstrate what I'm trying to achieve. It's like @GreenSock's pen, it stores the height in a variable on initialization.

 

But I was trying for a method without storing the height as a variable. I'm assuming that this is the only way now. Thanks again!

 

See the Pen xBpKWN by friendlygiraffe (@friendlygiraffe) on CodePen

[Animating height percent]

19 hours ago, Visual-Q said:

Or you can set the container to a height of 0 with overflow :hidden. Add an inner container record it's height and animate the outer container to match.

 

If heights were consistent it could be keyed to only one element.

 

See the Pen ywoOGB by Visual-Q (@Visual-Q) on CodePen

 

Example of iterating through multiple items with different heights:

 

See the Pen drzXyJ by Visual-Q (@Visual-Q) on CodePen

 

 

Thanks, but unfortunately the heights aren't consistent, they're expanded to the content within them. And yes, scaleY stretches the content within. Appreciate the reply

[Animating height percent]

4 minutes ago, PointC said:

Why do you need to set() it to 0? The .from() tween will take care of that for you because it will immediateRender.

 

See the Pen moMJjx by PointC (@PointC) on CodePen

 

 

Apologies if I haven't explained myself. So there will be several containers which need to remain hidden until an animation is triggered by a mouseclick

 

I could make every div a from timeline and set it to paused:true, I just wondered if there was a simpler way

 

[Animating height percent]

16 minutes ago, PointC said:

Maybe just a .from tween?

 

tl.from(".container", 1, {height:0});

 

Does that help? Happy tweening.

No because I want to set the height of the div to 0 before I animate it, thanks

[Animating height percent]

I want to set the height of a div to 0%, then animate the height to 100% of it's original size.

 

This works with px, but since I don't know the exact height in px I'm using percent instead.

 

I could get the height using .clientHeight; and store it in a variable when initialising, but I wondered if there was an easier way.

 

Thanks

See the Pen GevgVm by friendlygiraffe (@friendlygiraffe) on CodePen

[replay child timeline]

Hi, is it possible to replay a child timeline. See the Codepen URL for what I mean. It resets it, but doesn't play.

Thanks

See the Pen aPGmzB by friendlygiraffe (@friendlygiraffe) on CodePen

[Add to Timeline without altering parent]

9 minutes ago, mikel said:

Hi @friendlygiraffe,

 

Could this be a solution ...

 

See the Pen pKBBGe by mikeK (@mikeK) on CodePen

 

You could position everything. and 'add' also

 

Happy tweening ...

Mikel

 

 

 

Ah, add it afterwards. Nice and simple, thanks

[Add to Timeline without altering parent]

Hi, without using absolute values, is it possible to add a Child Timeline to another without affecting the timings of the Parent Timeline?

 

For example in the TL I want the red circle and blue circle to start at the same time

 

Thanks

See the Pen vrMMyV by friendlygiraffe (@friendlygiraffe) on CodePen

[Animating SVG mask content]

On 3/7/2018 at 2:29 PM, Sahil said:

Ya what @Carl suggested works in IE9, also you were using really old version of TweenMax.

 

See the Pen JLPPNy?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

 

Thanks all. This worked for me

 

[Animating SVG mask content]

Hi, I'm having to use an SVG mask (so it works on Explorer)

 

I wondered how I would animate the containing image, without moving the mask?

 

See demo

See the Pen gvVEzr by friendlygiraffe (@friendlygiraffe) on CodePen