Jump to content
Search Community

Creating a different ending in an animation

Louigi test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

Can anyone help me here, I'm looking for a logic way ( ie not a time based answer like counting the overall time position ) to create a different ending to my animation. It uses a series of slides with yoyo that reverse the animations on each slide. On the last repeat, I don't want the yoyo as it closes the frame with text and everything. I want an animation that ends after x amount of repeats, in this case 1, but crucially it has a different ending on the last repeat.

My solution here is to remove the yoyo on the last slide and just to use a fadeup in the first frame which gives the impression of continuity, but what I'd like to do is have a different ending for the animation when its on the last repeat.

It needs to be something like "if not last repeat play all animations with yoyo and if on last repeat do not use yoyo section of the animation"

I figured there might be a way to do this by killing the animations but I cant seem to get that to work, so this was the best I could do.

 

Cheers 

See the Pen LarrbL by louigi (@louigi) on CodePen

Link to comment
Share on other sites

I'm not sure I totally follow your question, but perhaps a cleaner approach would be to use a factory function that accepts a yoyo parameter, and then just string your animations together accordingly, kinda like:

//a factory function for your slides that spits back a timeline
function slide(panel, text, flowers, yoyo) {
    var tl = new TimelineLite();
    //...build your animation accordingly
    return tl;
}

var master = new TimelineMax({delay:1, repeat:1});
master.add( slide(panel1, textMove_1, $("#flower_1, #flower_2, #flower_3, #flower_4, #flower_5"), true) )
  .add( slide(..., true) )
  .add( slide(..., true) )
  // now for the last iteration, don't yoyo/repeat!
  .add( slide(..., false) )
  ...

 

So basically you can build out each iteration for each slide using a simple function, and tell it whether or not it should yoyo. 

 

I think you'll find that an approach like this makes your code much more maintainable, easier to tweak timings, and a pleasure to work with. After all, there was a large chunk of your code that seemed repetitive, meaning it could benefit from a function-based approach were you just feed in parameters for the differences/variables. 

 

I'd strongly recommend reading this article: https://css-tricks.com/writing-smarter-animation-code/ - once you grasp the concept, it can revolutionize the way you build animations. 

 

I hope that helps. 

  • Like 3
Link to comment
Share on other sites

You should refrain from using absolute values like -4.8 for the "delay" or "repeatDelay" properties. If a client asks you to change the timing of a single line of code it will affect every following line. That quickly turns into a nightmare situation especially for more complex animations. You're using TimelineMax so make use of the position parameter and relative values like "+=1" to make sequencing easier.

 

You should also go through your css and reduce the redundant code because it's good programming practice and makes the code a bit easier to read. Use something like this in your css.

 

.flower {

     position: absolute;

     transform: scale(0);

}

 

You also don't need sizzle.js: <script src='http://cdnjs.cloudflare.com/ajax/libs/sizzle/2.2.0/sizzle.js'></script> for a simple banner like this. That also makes the first 24 lines of your js file redundant as well.

  • Like 3
Link to comment
Share on other sites

Im definitely a beginner when it comes to coding and Ive been working as a digital designer for twenty years. I was using GS off and on over the years and really concepts like calling functions to generate timelines is the realms of programming, and GS bills itself as an easy to use animation tool. I can see the payoff is pretty good - memory use, compatibility - but its a bit away from the product description.

 

Im just readjusting my animation more in line with suggested - many thanks for the tips! much appreciated...

 

 

  • Like 1
Link to comment
Share on other sites

On 3/18/2019 at 3:42 PM, GreenSock said:

I'm not sure I totally follow your question, but perhaps a cleaner approach would be to use a factory function that accepts a yoyo parameter, and then just string your animations together accordingly, kinda like:


//a factory function for your slides that spits back a timeline
function slide(panel, text, flowers, yoyo) {
    var tl = new TimelineLite();
    //...build your animation accordingly
    return tl;
}

var master = new TimelineMax({delay:1, repeat:1});
master.add( slide(panel1, textMove_1, $("#flower_1, #flower_2, #flower_3, #flower_4, #flower_5"), true) )
  .add( slide(..., true) )
  .add( slide(..., true) )
  // now for the last iteration, don't yoyo/repeat!
  .add( slide(..., false) )
  ...

 

So basically you can build out each iteration for each slide using a simple function, and tell it whether or not it should yoyo. 

 

I think you'll find that an approach like this makes your code much more maintainable, easier to tweak timings, and a pleasure to work with. After all, there was a large chunk of your code that seemed repetitive, meaning it could benefit from a function-based approach were you just feed in parameters for the differences/variables. 

 

I'd strongly recommend reading this article: https://css-tricks.com/writing-smarter-animation-code/ - once you grasp the concept, it can revolutionize the way you build animations. 

 

I hope that helps. 

 

 

I went to the css tricks page, read and then constructed a halfway house. I thought Id try multiple timelines before using a function.

 

Now this one works, 

 

See the Pen NJLPmy by louigi (@louigi) on CodePen

 

But problem is that JS part has unnecessary code. What I really want t to do is at the master.add part, simply include old timelines like (panel_1, panel_2 etc ) all the way to the last panel which would obviously be different.

 

Also it strikes me as wrong because what if I want to repeat the whole animation five times, there clearly has to be a way of reusing the code in a simple repeat.

 

When Ive been around the animation once, how do I reuse those timelines again without resorting to creating a copy of it in a new timeline?

 

Or should I simply bite the bullet and make the timelines from a function as you suggest?

 

many thanks

 

 

Link to comment
Share on other sites

another option is to build your main timeline out of a series of tweenFromTo() tweens on your slide animations.

 

In the example below you will see that the timelines (green, orange, grey) are only created once.

They are never added to the master timeline.

The master timeline is only adding tweens that literally scrub the playheads of those individual timelines.

 

See the Pen YgOGxP by GreenSock (@GreenSock) on CodePen

 

 

 

https://greensock.com/docs/TimelineMax/tweenFromTo

  • Like 2
Link to comment
Share on other sites

Ok - Im going to write my own solution here for anyone following. I followed Jacks advice and got there eventually.

 

Basically I ended up using functions as the easiest way to run this. First off I made separate time lines for the panels and added them to a master timeline, but no matter what I did, it didn't seem to like adding repeat timelines to the master timeline.

 

This works by returning a timeline via the function to give you a list of instructions or a script if you like under the TimelineMax declaration which is the master timeline. Nice and easy to follow and see where it goes wrong for testing.

 

My coding skills are not great as I spend a lot of time working on design and video, but good enough to get a result here. I found Greensock a bit frustrating in that it all needs coding skills - the syntax constantly frustrates. Personally Id rather have something like Edge that you can produce visually but we have had that particular avenue closed now.

 

 

 

code.thumb.jpg.146b3c6acc6ce2977a9a1ba221212aac.jpg

 

 

Link to comment
Share on other sites

30 minutes ago, Louigi said:

Ok - Im going to write my own solution here for anyone following. I followed Jacks advice and got there eventually.

 

Basically I ended up using functions as the easiest way to run this. First off I made separate time lines for the panels and added them to a master timeline, but no matter what I did, it didn't seem to like adding repeat timelines to the master timeline.

 

This works by returning a timeline via the function to give you a list of instructions or a script if you like under the TimelineMax declaration which is the master timeline. Nice and easy to follow and see where it goes wrong for testing.

 

My coding skills are not great as I spend a lot of time working on design and video, but good enough to get a result here. I found Greensock a bit frustrating in that it all needs coding skills - the syntax constantly frustrates. Personally Id rather have something like Edge that you can produce visually but we have had that particular avenue closed now.

 

One thing you might consider is simplifying your code into separate "in" and "out" animations.

 

This line of code:

 .to(textMove_1, 2, {y:"-390px", yoyo:true, repeat:1, ease: Elastic.easeOut.config(1, 0.5), delay:0, repeatDelay:2 }) 

 

can be made into two lines:

 

 .to(textMove_1, 2, {y:"-390px",ease: Elastic.easeOut.config(1, 0.5) }) 

 .to(textMove_1, 2, {y:"-690px",ease: Elastic.easeIn.config(1, 0.5) }, "+=2") 

 

Both methods basically achieve the same result, but the second method is much easier to read (shorter line of code) and for you to understand what is going on. You're basically limiting each line of code to do one thing.

 

Greensock is a JavaScript library so good coding skills and habits are needed. Unfortunately, there's no way around that. Adobe Animate and Google Web Designer are solid options if you're more of a visual / timeline person. You do have the option of using graphical tools for layout and coding in Greensock for animation.

 

The big benefit of learning to code with JavaScript / Greensock is being able to make a large number of changes easily. That is especially true for banner ads where you're typically making a bunch of them. All it takes is a Find and Replace in a code editor to change timings, order of animation, etc. That same workflow is tedious or impossible to do in a timeline applications like Adobe Animate, Google Web Designer, etc. They just are not made for doing that.

Just be patient and stick it out and eventually you'll get there with coding.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...