Tom Roberts
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Tom Roberts
-
-
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
-
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
-
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
-
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
-
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
-
Fantastic!
Many thanks Mikel
- 1
-
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, ifcharsClass
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.
-
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
-
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
-
Thanks ZachSaucier. That makes good logical sense and thanks for the reference.
-
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.
-
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
-
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.
-
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
-
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
- 1
Spritesheet final frame disappears
in Banner Animation
Posted
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