Jump to content
Search Community

Seeking help making my present Timeline Code more elegant

reggiegulle 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

Hello everyone!  Here is the link to my codepen:

See the Pen zCHyn by reggiegulle (@reggiegulle) on CodePen

 

As my code stands, it is fairly straightforward, and it does manage to accomplish what it was meant to do.  It's just one basic timeline with buttons and all the following functions are grouped at the bottom of the code, like so:

$("#debeersTopPanel").on("click", function(){
	debeers.tweenFromTo("ringFadeIn","ringPause");
});


function ringBack(){
$("#BackButton1").on("click", function(){
	debeers.tweenFromTo("ringFadeOut","ringToStart");
});
}

$("#debeersBottomPanel").click(function(){
	debeers.tweenFromTo("pendantFadeIn","pendantPause");
});

function pendantBack(){
$("#BackButton2").on("click", function(){
	debeers.tweenFromTo("pendantFadeOut","pendantToStart");
});
}

function debeersResume(){
	debeers.play(0);

I am fairly new at JavaScript, and so I am seeking some help on whether the code above can still become more elegant.  The events on the timeline are mostly repetitive; could these repetitions be turned into iterations?  I am still trying to get a better idea of objects and object arrays, and so I am not too sure whether those principles can apply to my codepen, or if other entirely different processes may be applicable. 

 

It's just that there may be a chance that more items will be added to my present drop down menu, and so any method of streamlining the coding (if there is any) would be very useful. 

 

I would appreciate any help.  Thank you very much in advance! :ugeek:  

 

(Note: I mostly specialize in video, so if anyone has any questions about it, I would not hesitate to help out as much as I can)

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Well this is a tricky one, mainly because even if your banner looks simple, it actually isn't very simple at all. In fact is a very good sample of working with labels and the tweenFromTo method.

 

Perhaps the only thing I'd try is creating a different timeline for each element of the banner and play/reverse that Timeline in the particular click event.

 

Also you could create a base timeline with panels rotation and separate timelines for each offer. Then depending on the element the user clicks you can add the corresponding timeline to the base one. Then when the back button is clicked reverse this base timeline and using an onReverseComplete you can remove the particular timeline:

var masterLine = new TimelineLite({paused:true, onReverseComplete:removeNested}),
    offerLine1 = new TimelineLite(),
    offerLine2 = new TimelineLite(),

    panel1 = $("#debeersTopPanel"),
    panel2 = $("#debeersBottomPanel"),

    backButton = $("#BackButton"),

    activeLine;//this var will contain the timeline added to the masterLine

// masterLine has the rotationX and opacity tweens of both panels
masterLine
  .to(// panels' rotation and opacity code);

offerLine1
  .to(// oapcity and scale tweens of offer 1);

offerLine2
  .to(// oapcity and scale tweens of offer 2);

panel1.on("click", function()
{
  // add the corresponding line to the master timeline
  masterLine
    .add(offerLine1)
    .play();

  // set the added timeline as the current active timeline
  activeLine = offerLine1;
});

panel2.on("click", function()
{
  // add the corresponding line to the master timeline
  masterLine
    .add(offerLine2)
    .play();

  // set the added timeline as the current active timeline
  activeLine = offerLine2;
});

backButton.on("click", function()
{
  masterLine.reverse();
});

function removeNested()
{
  // remove the offer line added to the master timeline
  // like that the timeline is reversed and ready to play again and add the corresponding offer line
  masterLine.remove(activeLine);
}

Also GSAP uses a specific syntax for CSS transforms, not that there's something wrong with using the common CSS syntax, but just as an informative purpose:

 

- transform;rotateX(90deg) => rotationX:90

- transform;rotateY(90deg) => rotationY:90

- transform;rotateZ(90deg) => rotation:90

- transform:scale(1) => scale:1

 

You can also scale in each axis as you wish, scale applies the same value on both axis:

TweenLite.to(element, time, {scaleX:0.5, scaleY:0.75});

As you can see there are a lot of options for your code, and I'm pretty sure other users will find better ways to optimize this.

 

Rodrigo.

Link to comment
Share on other sites

Hello Rodrigo,

 

I am very much grateful for your feedback. 

 

You pretty much confirmed my previously growing -- and now just about confirmed -- suspicion that the structure of the timeline, as it now stands, has a certain degree of complexity to it that I myself couldn't initially appreciate, and that using object arrays would not necessarily be the cut-and-dried manner of optimizing it :geek: .   Perhaps the object array technique might be applicable somehow, but it's probably not something that would promptly come to mind.    Nesting timelines might certainly be better and quicker :-P.

 

Thank you very much for your suggestions!  I will try the technique you provided and I'll make some tweaks whenever necessary.  I also want to thank you for pointing out to me GSAP's  special syntax for CSS transforms.  If it's not going to be any trouble, can you point me to either a link, or a portion of the GSAP documentation -- or perhaps a forum post -- where I can read more in-depth information about the GSAP syntax for CSS transforms?  I will also do my own browsing, but any help, as always, will be greatly appreciated.  

 

Cheers!  :ugeek:    

Link to comment
Share on other sites

Hi,

 

The syntax is somehow discussed in the CSS Plugin documentation:

 

http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html

 

Also keep in mind that for common CSS properties should be used in camelCase:

 

- box-shadow => boxShadow

- margin-left => marginLeft

 

And so forth.

 

As for your specific app,  like I said it could be very easy to think that is a simple task. Is good to see people trying to keep their code as clean, small and simple as possible. Is very easy to get carried away sometimes and a good exercise to get a couple of feet away from the screen and look things in a different perspective. Helps realize that the solution is simpler than one thought it was.

 

Rodrigo.

  • Like 2
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...