[Spritesheet final frame disappears]

Hi All.

I recently found this solution for using spritesheets in Greensock but the final frame in this animation disappears once the animation has ended.

Is there a way to hold it on the final endframe of the spritesheet?

Thanks in advance

Neilb

See the Pen rNMZvPv by neilb1969 (@neilb1969) on CodePen

[Creating animation from a png sequence - HOW?]

HI Greensockers!

Happy New Year to you all (I know it's a little late but it's heartfelt in these odd days!)

 

I have a sequence of png files that I want to animate into a sprite sheet but I am not sure of the best way to do it.

Does anyone have any codepen examples or suggestions on the best way to achieve the animation?

Is it better to have a series of individual images (currently 120 images/frames) or to have one long spritesheet image containing all frames?

 

I dont have a codepen to show an example as I am not sure on the best method to start creating this spritesheet animation so ALL suggestions are welcomed!

 

Many thanks

 

Neilb1969

[A simple background loop for a banner]

Hi Greensockers!

Another simple question from me.

I want to create a looping background using images for a banner I am creating but I am having issues getting it to work.

I have created a code pen to show the animation using background colours instead of the images I intend to use but I am getting a flash  when the animation loops. How can i prevent this flash and how do I stop the animation on the main timeline when the rest of the banner animations have finished playing?

 

Thanks in advance.

Neilb1969

See the Pen qBabKwO by neilb1969 (@neilb1969) on CodePen

[Efficient coding while using drawSVG plugin]

Hi All
I am creating an animation where I want a series of lines to draw in and then have other colours run along these lines at different intervals. Like pulses of electricity on an electrical circuit.

I have created a codepen to demonstrate what I am aiming for, but the way I am heading it will be a complex animation when I add all the other lines  to create the circuitboard. Is there a more efficient way of coding this animation?

 

I would also like to resolve the following issues:

Second and third 'pulse' should be a fixed length (not grow during animation) and should not be visible apart from when they are moving.

I have tried setting negative percentages and fixed lengths for the lines but then they seem to appear at either the start or the end of the animation again as they are currently showing.

 

Lastly, I would like the final line to appear in the opposite direction so it draws towards the bigger line...  How?

 

Thanks in advance,

 

Neil

See the Pen BazbWGQ by neilb1969 (@neilb1969) on CodePen

[Can I control the order in which images are animated?]

2 hours ago, ZachSaucier said:

Hey Tom. There are lots of ways to do that. The easiest is probably to make your stagger negative: stagger: -0.5.

I thought it could be something simple, but not THAT simple!!

 

Many thanks again ZachSaucier

[Can I control the order in which images are animated?]

Hi Greensockers.

I have an animation where I have 'bricks' falling to form a wall. The bricks are a series of images and as such the wall starts to build from the top down.

I would like the bottom bricks (last images) to drop in first so the wall builds from the bottom up. Is there a way to inverse the order of the images as they come in?

Many thanks

 

See the Pen BazoZLd by neilb1969 (@neilb1969) on CodePen

[Targeting and animating a specific word with splitText]

Fantastic!

 

Many thanks Mikel

 

[Targeting and animating a specific word with splitText]

21 hours ago, mikel said:

Hey @Tom Roberts,

 

You can also use charsClass, wordsClass or linesClass:

 

Property	Description
charsClass	String - A CSS class to apply to each character’s <div>, making it easy to select. If you add "++" to the end of the class name, SplitText will append an incremented number to each character’s <div>, starting at 1. For example, if charsClass is "char++", the div’s class for the first character would be "char1", the next would be "char2", then "char3", etc. Default: undefined.

 

Happy splitting ...

Mikel

HI Mikel,

Thanks for the reply. Can you give me an example of what you mean via the codepen I posted above?

I am fairly new to gsap and javascript and I would be guessing at the syntax so all help is greatfully received.

 

[Targeting and animating a specific word with splitText]

Hi Greensockers!

I am experimenting with splitText and cannot figure out how to target a specific word or phrase within some text.

The codepen has one word wrapped in a span but I'm not sure how to target it in order to animate it.

 

Thanks in advance for your help

See the Pen YzWzxBz by neilb1969 (@neilb1969) on CodePen

[Animating linear fill in an SVG]

Hi Greensockers!

Can you help? I have an animation where I would like to make a gradient fill 'flow', basically make the colours top and bottom swop.

I have looked on the forums and a lot of the suggestions are really old and didn't reference GSAP3.

Do I need an additional plugin to achieve the effect (MorphSVG)?

Thanks

 

See the Pen ZEWgzgp by neilb1969 (@neilb1969) on CodePen

[How to successfully restart a timeline]

Thanks ZachSaucier. That makes good logical sense and thanks for the reference.

[How to successfully restart a timeline]

1 minute ago, Shaun Gorneau said:

 

I'm not sure what you mean by "in the wrong positions". If what you mean is they are not fully out of the parent container and seem to "jump" prematurely, it's that you are not tweening them far enough. The container is three times the width of the element, moving from the center third by xPercent 100 will only move it to the right 3rd of the container (100% of the element's width). So 200% will get its left edge out of the container.

 

As far as repeating the tween, you can do this all with one timeline and add reapat: -1 to the timeline's properties.

 

 

 

 Hi Shaun.

Apologies if i didn't explain myself. I want the animation to come in once, exit and then come in and stay static the second time.

This is why I set up 'in' and 'out' animations so I could play them in succession as 'in', 'out', 'in'.

My problem is that when the 'in' animation wants to play the second time I only see the static boxes you see in my pen. No animation seems to be occurring and the elements are in the wrong positions.

 

[How to successfully restart a timeline]

I have 2 animations, one to animate elements in and one to animate them out.

If I want to repeat the 'in' animation then the assets are in the wrong positions and the animation does not work. How do I restart the first animation and get it to play correctly the second time?

Thanks in advance

See the Pen yLOdzjY by neilb1969 (@neilb1969) on CodePen

[Master timeline plays ALL child animations]

1 hour ago, ZachSaucier said:

Hey Tom. It took me some time to spot it. But if you look in your functions, you create a timeline but don't use it in any of them - you always use gsap.to, etc. So you're creating standalone tweens, not tweens within the timelines like they should be  Switch them to tl.to, etc. and it will work:

 

 

Thanks ZachSaucier. I am just getting my head around all this so thanks for the help.

[Master timeline plays ALL child animations]

Hi All

I am trying to get a series of animations to run in sequence in a master timeline but for some reason they are all playing as soon as the timeline plays.

why would all the child animations play simultaneously and ignore the timeline?

See the Pen oNxrWME by neilb1969 (@neilb1969) on CodePen

[developer for banners and websites]

Need strong developer to work on website animation on a variety of our own and client's websites and banners for a London based agency.

Please email me on t.roberts@dewynters.com if you are interested.

 

Thanks,

 

Tom