Skip to main content
elvina33012113
elvina33012113
Participant
May 15, 2023
Question

I want the LoopOut property to return the animation to a second I set in the middle, not to the begi

  • May 15, 2023
  • 1 reply
  • 439 views

Have a nice day!

Here is the story of the animation I want to create:

From second zero to second five, these shapes go from 0% opacity to 100% opacity in sequence. After they are all 100%, the colors change in sequence. After the 1st period colors change, I want to go back to the beginning with the "loopOut" tool and start the color change again.

In the end I will save it as "gif" format.
My aim is to present it to customers in the 1st part of the web page.

The story is as follows:
The website opens, the shapes go from 0% opacity to 100% opacity, and then the color change starts. After the first cycle is completed, the 2nd period color change starts.
And so on until the page is refreshed, and we move on to the next page.

Thank you!

 

This topic has been closed for replies.

1 reply

R
Community Expert
Rick GerardCommunity Expert
Community Expert
May 15, 2023

You probably don't want to use loopOut() for just a couple of loops. If you have pauses in your animation, you probably only want those pauses to be only one frame long, then adjust the timing of that frame in Photoshop when you save the final GIF. A five or 10-second GIF should probably only run at 4 or 6 fps, or it will choke most websites. After Effects is not the best or most efficient tool for creating web graphics. I have created many GIF banners that contain a dozen or slow "banners" that transition between each other, and the frames stay still for 5 to 15 seconds but those banners are only one frame long. The transitions are usually no more than 12 frames. That lets me create a web graphic that is only about 100 frames long and lasts a few minutes.

 

Adobe Animate may be a better option for your project. We might be able to give you a little better idea of how to proceed if we knew how long the total animation needs to be. It looks like there are about 20 sections you want to reveal. I'm not sure that a GIF is the right approach to this kind of design problem.

 

 

elvina33012113
elvina33012113Author
Participant
May 15, 2023

https://www.figma.com/proto/GjWKHk1s5y4COUNKOP7oCf/Untitled?type=design&node-id=123-18113&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=113%3A5941

 

Thank you for your reply.

More detailed information:
I'm a UX/UI designer, I design Hero page.

What I have in mind and what I want to do is exactly as in the link. (Press the "R" key to restart the animation)
Since the front-end developer does not have enough time, we decided to recreate it in After Effect and publish it in gif format.

As you can see the animation starts with the "intro" and then continues with the loop of the images.
After the end of the 2nd loop it goes back to the 1st one, not to the zero position.
This is easy to do in Figmada, but I couldn't get the loop in AE 🙂

Thanks in advance!

R
Community Expert
Rick GerardCommunity Expert
Community Expert
May 15, 2023

Unless the frame size is going to be very small, that is going to be a very large GIF that takes a very long time to load. The frame rate is going to have to be low, and each of the frames will need to be animated. The GIF will either loop or it will not. There is no tool that I know of to make a GIF start and stop with a keystroke.

 

If you are mocking up a web page with animation, there are much better tools than After Effects. You could create a video, but again, nothing in your frame template suggests that a loop function would be helpful because it looks like you just want to go from one frame to another to simulate the loading of a web page. The loopOut() function only relates to keyframes in an animated property.  Opacity animated from 0 to 100 of 5 seconds, then another keyframe at 6 seconds back to zero will give you a five-second fade up, one-second hold, then cut to 0, and the animation starts over and runs as long as the timeline.

 

A much better design tool to design and animate a website prototype might be Adobe XD. It is quite easy to use.

 

 

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices