➿ HOW TO: animate GIF in INFINITE LOOP

Hi, I have seen some tutorials on how to make a gif but none of them was for an infinite loop.

So here is my guide to looping gif.

Please have in mind this is advanced coding and you should before doing this know already few things especialy

  1. knowing the overlay commands
  2. knowing difference between & and @
  3. knowing difference between AND and THEN
  4. having at last basic understanding how looping command work

1)find the gif you want to use

(be sure you do not violate author rights by using it)

2)split your GIF to separate PNG images

you can use this site for it:

3) upload the png as overlays to your portal

!!! upload them as thay follow one after another !!! and name them so that you will in future know which one is first, second, etc.

for example GIF01, GIF02, GIF03, GIF04…

4) Now you have to place your overlays in your script

set your background (note even if your overlay covers full screen do not use the episode original BLACK backgrounds because overlays do not work well on them - choice any other background than the black - if you need black background upload your own)

now create your overlays , spot them and scale them using & by all commands, also make sure they are all on the same layer

Example:

&overlay GIF01 create
&overlay GIF02 create
&overlay GIF03 create
&overlay GIF04 create
&overlay GIF05 create
&overlay GIF06 create
#…add all the overlays you have

&overlay GIF01 moves to layer 1
&overlay GIF02 moves to layer 1
&overlay GIF03 moves to layer 1
&overlay GIF04 moves to layer 1
&overlay GIF05 moves to layer 1
&overlay GIF06 moves to layer 1
#…move all overlays you have to the same layer

&overlay GIF01 shifts to ## ##
&overlay GIF02 shifts to ## ##
&overlay GIF03 shifts to ## ##
&overlay GIF04 shifts to ## ##
&overlay GIF05 shifts to ## ##
&overlay GIF06 shifts to ## ##
#…shift all overlays you have to the same spot

&overlay GIF01 scales to ## ##
&overlay GIF02 scales to ## ##
&overlay GIF03 scales to ## ##
&overlay GIF04 scales to ## ##
&overlay GIF05 scales to ## ##
&overlay GIF06 scales to ## ##
#…scale all overlays you have to the same size

5) AND NOW ADD THE ANIMATION LOOP COMMAND

This is a bit tricky so first small explanation:
we want it to be smooth as possible so we need to make visible new overlay and make invisible the previous one and make this in the loop.

To make it easier to understand let’s suggest our gif has only 6 overlays.

You will need to write all in one line using & but I strongly recommend to first write it on separate lines - because this you can more easily check and after you are sure you have it right than delete the spaces to make it one line.

!!! watch for how the overlays go!!! …there is a muster I color code it for you to make it more visible
This is essential to have it this way!

as you see we always repeat to change the opacity of one overlay to 0 and other to 1

but the overlays do not fallow 1,2, 3, 4, 5,6 !!

basically what you have to do is:

you change the opacity of an overlay ( B ) to 1
then you change the opacity of the overlay which you made visible before ( A ) to 0
then you change the opacity of next overlay ( C ) to 1
then you change the opacity of the overlay which you made visible before ( B ) to 0

and so on

because it should make a full loop you will have to have on your second line the last of your overlays turned opacity to 0 (in our example it is GIF06)

&overlay GIF01 opacity 1 in 0.1
THEN overlay GIF06 opacity 0 in 0
THEN overlay GIF02 opacity 1 in 0.1
THEN overlay GIF01 opacity 0 in 0
THEN overlay GIF03 opacity 1 in 0.1
THEN overlay GIF02 opacity 0 in 0
THEN overlay GIF04 opacity 1 in 0.1
THEN overlay GIF03 opacity 0 in 0
THEN overlay GIF05 opacity 1 in 0.1
THEN overlay GIF04 opacity 0 in 0
THEN overlay GIF06 opacity 1 in 0.1
THEN overlay GIF05 opacity 0 in 0
loop INFINITE times

I hope the colors will help you to understand the muster.
And of cause based on your preferences, you can adjust the time for how long is the overlay changing opacity but if you do, keep the time same for all overlays!

So once you have this just make it one line by deleting the space between lines like this this:

&overlay GIF01 opacity 1 in 0.1 THEN overlay GIF06 opacity 0 in 0 THEN overlay GIF02 opacity 1 in 0.1 THEN overlay GIF01 opacity 0 in 0 THEN overlay GIF03 opacity 1 in 0.1 THEN overlay GIF02 opacity 0 in 0 THEN overlay GIF04 opacity 1 in 0.1 THEN overlay GIF03 opacity 0 in 0 THEN overlay GIF05 opacity 1 in 0.1 THEN overlay GIF04 opacity 0 in 0 THEN overlay GIF06 opacity 1 in 0.1 THEN overlay GIF05 opacity 0 in 0 loop INFINITE times

and thats all. :slight_smile:

Also an update - a lot of people do struggle with the last part and even if they have the principle right they are not able to check the final line.
Here is what I do while checking their error code - and I recommend it to you to do it also before you ask here why it is not working :)- or even maybe this will be for you easier to create the final line?

I always split your last line back to separate lines but like this:

As you can see accept the 1 line the numbers are bigger just for 1 in the next line so it is easy to update it or check it and because it is lined up you might see more clearly if you made a typo or mistake - do you see in the middle of the picture the mistake with GIF 9 instead of GIF9?

85 Likes

Bookmarked. :purple_heart:

2 Likes

Thank you so much for this, you’re a lifesaver :heart_eyes:

1 Like

Nice thread, I might actually have the courage to try it! Layering gifs always scared me but you made it simple <3

2 Likes

Hi, can you do one for 8 layers? I tried doing it myself yet seem to have no success :pleading_face:

2 Likes

Assuming she’s hopefully busy with her story and no longer has writers block :eyes:

Hope this helps:

&overlay GIF01 opacity 1 in 0.1 THEN overlay GIF08 opacity 0 in 0 THEN overlay GIF02 opacity 1 in 0.1 THEN overlay GIF01 opacity 0 in 0 THEN overlay GIF03 opacity 1 in 0.1 THEN overlay GIF02 opacity 0 in 0 THEN overlay GIF04 opacity 1 in 0.1 THEN overlay GIF03 opacity 0 in 0 THEN overlay GIF05 opacity 1 in 0.1 THEN overlay GIF04 opacity 0 in 0 THEN overlay GIF06 opacity 1 in 0.1 THEN overlay GIF05 opacity 0 in 0 THEN overlay GIF07 opacity 1 in 0.1 THEN overlay GIF06 opacity 0 in 0 THEN overlay GIF08 opacity 1 in 0.1 THEN overlay GIF07 opacity 0 in 0 loop INFINITE times

6 Likes

omg Thank you so much!! Hopefully one day my pea brain will figure out the rocket science behind these :two_hearts::see_no_evil:

4 Likes

Lol Happy to help! You’ll learn it eventually I’m sure! :yay:

3 Likes

ha ha its so nice of you! And yeah I stopped to be lazy and made 800 lines.:sunglasses::sunglasses::sunglasses:

1 Like

Hey, after it loops once it then goes to a black screen for a second then continues looping and so on.

How do I fix it?

you probably have some mistake in the code but without seeing it I cant tell where the problem might be

1 Like

Okay, i’ll pm u the code.
One sec

:smiling_face_with_three_hearts:

Wait I’m confused…
So I did all the steps from step 4 but after that do we make a new line for step 5?
Like in the format you showed us, there is no shift or scale so do we make a new line?

yes step 5 is a new line

ok thanks

Thank you very very much :heart_eyes: :blob_hearts:

1 Like

:grin: :heart_eyes: :smiling_face_with_three_hearts:

1 Like

every time I find a gif its like over 30 frames ;-;

it works for every number of the overlays.:wink:

1 Like