Using the Ternary Operator to trigger a tween on a timeline

[emilychews]

Hi,

 

I have a menu animation where the menu on the home page has an extra element.  Instead of duplicating a timeline for this animation (which is quite complex) I'm trying to use the ternary operator in the timeline so that when the user in on page-1 (the home page), this element on the timeline animates.

 

Because the animation is quite complex I've done a basic unrelated animation in the attached CodePen to show the problem.

 

Basically, I want the second block to only animate when `.page-1` is present (which is a class I've added to the page-wrapper in the example), but not throw an error when it isn't there on the other pages.

 

I've commented out what I was trying with box2, which does animate as expected, but it still throws an error on pages without this element, and obviously I can't show the errors on other pages because of the nature of CodePen being a single page application.

 

Any help would be awesome.
 

var tl = new TimelineMax({repeat: -1});

var box1 = document.getElementsByClassName("box-1")[0];
var box2 = document.getElementsByClassName("box-2")[0];
var box3 = document.getElementsByClassName("box-3")[0];

var page1 = document.getElementsByClassName("page-1")[0];

tl
.add("start")
.from(box1, 1, {y: 10, opacity:.3})
// .from(page1 ? box2 : undefined, 1, {y:10, opacity: .3}, "start")
.from(box3, 1, {y: 10, opacity:.3}, "start")

 

See the Pen EeOPLG by emilychews (@emilychews) on CodePen

[Jonathan]

Hello @emilychews and Welcome to the GreenSock Forum!

 

To make your code run on just the page you want without throwing that error when it doesn't exist...

 

You can do this by checking the length of the page1 var is greater than zero which i have below, or even check that it doesn't equal zero:

 

var page1 = document.getElementsByClassName("page-1")[0];
if (page1.attributes.length > 0) {
  
  // your gsap and other code goes here
  
}

 

And with all your code:

 

See the Pen WgYxBw by jonathan (@jonathan) on CodePen

 

Happy Tweening!

[emilychews]

Your codePen example doesn't seem to be working?

 

Also, won't that mean duplicating the entire code block which is something I'm trying to avoid, i.e. i'll have to then do an block of code for the non-home page variation.

 

I mean, if that's the only way to do it, that's fine, I just had it in my head I'd be able to tweak one line of a timeline dependent on what page the user was on.

Thanks,

[PointC]

Hi @emilychews 

 

If I understand your question correctly, you could do this:
 

var page1;
if(page1){tl.from("#box2", 1, {y:10, opacity: .3}, "start");}

 

Does that help?

 

Happy tweening.

 

[Jonathan]

Hi again @emilychews

 

If you try my above codepen again you should see its working, I guess codepen didn't save my pen correctly.

 

You don't have to rework your code just wrap with if statement checking the length property or ...

 

You can just have an if statement around the target element for your tween. If .page-1 exists that use that, if it doesn not exist then use .box-1 variable.

 

Using ternary operator way:

 

var page1; 
page1 = (page1.attributes.length === 0) ? document.getElementsByClassName("page-1")[0] : document.getElementsByClassName("box-1")[0];

tl.
.from(page1, 1, { y: 10, opacity: 0.3 }, "start")

 

Or using regular if statement block for better readability since ternary operator way is one long line.

 

var page1 = document.getElementsByClassName("page-1")[0]; 
if (page1.attributes.length === 0) {
  // use .box-1 if .page-1 class does not exist
  page1 = document.getElementsByClassName("box-1")[0];
}

tl.
.from(page1, 1, { y: 10, opacity: 0.3 }, "start")

 

Like this:

 

See the Pen JaeJBp by jonathan (@jonathan) on CodePen

 

Does that help

[emilychews]

Hi @PointC / @Jonathan,

 

I got it to work, I think perhaps my question could have been slightly clearer,  Craig's answer worked if I did it outside of the main timeline. I thought you could use conditional logic to fire an individual tween during a timeline, but I couldn't get that to work. When using the if statement after the timeline it did work as expected. 

Many thanks for taking the time to help.

Em

[Jonathan]

Keep in mind @emilychews, that under the hood GSAP uses document.querySelectorAll() for the tween target parameter. So this way you just simply put your CSS selector in your tween target. This way you have less code to write 

 

tl.from(target, duration, vars);

 

The target can accept a string also to put your CSS selector:

 

tl.from(".page-1", 1, { y: 10, opacity: 0.3 })

 

Taken from the GSAP from()  Docs: 

 

https://greensock.com/docs/TweenMax/static.from()

 

target: Object

• Target object (or array of objects) whose properties should be affected. When animating DOM elements, the target can be: a single element, an array of elements, a jQuery object (or similar), or a CSS selector string like “#feature” or “h2.author”. GSAP will pass selector strings to a selector engine like jQuery or Sizzle (if one is detected or defined through TweenLite.selector), falling back to document.querySelectorAll().

Happy Tweening