[Staggered animation with pause inbetween]

Thanks, but that's moved away from the result i'm after

 

This is fading in at a stationary point then moving up, pausing, moving up and again at a stationary point, fading out

 

It might be easier to imagine the entire list wrapped around a cylinder and the cylinder is rotating

 

The 1st item starts at the bottom and moves AND fades into the red box, pauses for 1s, then moves AND fades out at the top

 

As each item reaches the red box, the next on the list appears and the cycle starts over

 

By the time the 3rd item has started its animation at the bottom, the 2nd item is in the red box and the 1st item is just about to fade out at the top.

 

The only stationary point is when an item is in the red box

 

Hope that helps and again, cheers for the help

[Staggered animation with pause inbetween]

That's a pretty cool effect, i'll have a play with that.

 

The 3 states all visible at once would look like this

 

 

[Draw SVG starting from wrong point]

it was starting from the end of the path

 

Craig has nailed the answer, I was setting my animation 100% 100%, it should have been 0% 0%

 

All sorted now

[Staggered animation with pause inbetween]

very very close

 

is there anyway of having 3 on screen at once, the fading out, the visible and the fading in, essentially all 3 states

 

no big if not possible, this is close enough to what I need

[Draw SVG starting from wrong point]

Hi All

 

I've created a drawSVG but when comparing it to a vivus.js version, they start from different points, how can I control the starting points on my GSAP version?

 

Any help appreciated

 

See the Pen vJLoeb by sygad1 (@sygad1) on CodePen

 

See the Pen aydpRW by sygad1 (@sygad1) on CodePen

[Staggered animation with pause inbetween]

Hi All

 

Having a bit of a problem with staggered animations.

 

I want to stagger a list so that it fades in and moves up, pauses for 1s, then fades out and moves up even more, effectively:

 

Fades in from y:100
Pauses for 1s
Fades out to y:-100

 

 

I tried with a staggerFromTo but it just whizzes past and everything is performed in 1 go, putting a delay only delayed the start of the animation, not put a pause in the middle.

 

I tried with a timeline, which works, but only for 1 item, when multiple items are used, they stack on top of each other in a mess.

 

Any help appreciated

See the Pen eRqqJq by sygad1 (@sygad1) on CodePen

[License for personal site]

Tell me about it

 

I've been playing with this for 2 solid weeks, i've barely scratched the surface of what it can do but im making a little progress.

 

A massive thank you as well to the forum answers, quick, accurate and helpful, it's worth the money alone just for that.

 

I'll get sorted now with a license, too good not too.

 

Cheers

[License for personal site]

Hi All,

 

I'm wanting to use drawSVG and Throwprops plugin on my personal site, there are no chargeable sections, it's just a portfolio site.

 

I want to know what happens after a year, do these plugins disable?

 

I don't mind paying the $99 once, but I can't justify an ongoing cost forever for 2 effects.

 

Can someone please clarify what happens after the year?

 

Cheers

[Draggable item has no momentum]

This is the concept idea I came up with a while ago

[Draggable item has no momentum]

The idea is that when you press the menu,  (hamburger) icon, it will animate the individual items into the circular pattern, which should suggest that it also moves in that direction.

 

The next part is to animate the sub level navs that expand as a layer over the original one

[Draggable item has no momentum]

Doh!!!!

 

Easiest fix ever.

 

Cheers for that

[Draggable item has no momentum]

Hi all,

 

Trying to make a circular nav with flick, spin and rotating properties.

 

Got it to rotate, but it doesn't seem to flick spin with accelerating and de-accelerating momentum

 

I've added the draggable plugin and set throwProps to true.

 

What am I missing / doing wrong?

 

Any help appreciated.

See the Pen gxPKMM by sygad1 (@sygad1) on CodePen

[Random numbers for polygon point animation]

@OSUblake thank you for that, very interesting way of doing it and actually a lot closer to what I had in mind from a finished visual. The offset is an idea I have been bouncing around to limit the amount of movement and it helps to keep it close to the original shape without it collapsing too heavily onto itself.

 

 

[multiple tweens refactoring]

@Mikel

 

Cheers for spotting that, sometimes you can spend too long looking at the code

[multiple tweens refactoring]

@Carl

 

Cheers for the detailed answer, very useful and helpful.

 

I'll stick with what i've got as this is not going to be a very long list.

 

Thanks

[multiple tweens refactoring]

Hi All,

 

I've created a fish eye scaling effect but it uses lots of individual tweens, it seems VERY redundant.

 

I tried creating a timeline but it didn't work at all

 

Would a timeline approach for this work, given I need the instance of the object being hovered?

See the Pen NvPQWd by sygad1 (@sygad1) on CodePen

[Multiple tweens not animating 2nd time]

Now that is very interesting, cheers for that, I think that will solve the problem

[Multiple tweens not animating 2nd time]

Interesting approach and one I'll play with

 

not quite what i'm looking for though as this prevents me from customising the "leave" animation to an easeIn

 

cheers anyway though

[Multiple tweens not animating 2nd time]

Hi All,

 

Im trying to get 2 tweens to animate at the same time when I mouse in over a link, and to reverse the animation when I mouse out.

 

Each tween is working correctly in isolation, they're just not workingvery well together at the same time. The 2nd time you hover, the 2nd tween just jumps between its start and end points, there is no animation at all.

 

I tried adding the position parameter of "0" to the second tweens but it didn't solve the problem

 

Any help appreciated

See the Pen KvPJKP by sygad1 (@sygad1) on CodePen

[Animated list of items, only show 1 item at a time]

Thanks for the explanation, works like a charm now

[Animated list of items, only show 1 item at a time]

Is there some reason why it won't initialise the callback function when all animations are complete?

 

I've updated my original codepen to reflect this

 

I noticed if I changed it from a TimelineMax back to a TweenMax, the callback function is called

[Animated list of items, only show 1 item at a time]

Thank you for the speedy and working demo

 

I'll be honest, I wouldn't have thought of doing the CSS like that and I didn't know you could have staggerTo on a timeline.

 

GSAP is almost too good and too massive

[Animated list of items, only show 1 item at a time]

Hi All,

 

I'm looking to stagger the display of a list of items, I only want 1 item to show at once.

 

I have knocked up an example using jQuery but can't figure out how to utilise GSAP for the same action.

 

Ultimately, I want to control the fade and scale of each item as they appear and disappear.

 

Any help appreciated

See the Pen eRqqJq?editors=1111 by sygad1 (@sygad1) on CodePen

[Random numbers for polygon point animation]

It is indeed.

Thank you very much

 

I can see me having lots of fun with this and an equal amount of frustration as I learn something this massive

 

Cheers

[Random numbers for polygon point animation]

Hi All,

 

I'm trying to create a continuously changing polygon animation that uses randomly generated values for the points.

 

I've got it working for the 1st set of generated numbers, but it doesn't use the subsequent set of values.

 

It keeps repeating between the initial shape points and the 1st set of generated points.

 

Any ideas on how to "refresh" the points so it can constantly change the shape of the polygon

 

Cheers

See the Pen ZydmKV by sygad1 (@sygad1) on CodePen