Timeline click to trigger animation

[RyanHerbert 7 Likes (Newbie)]

Hi, any help would be great right now.

 

See the Pen aBBVWg?editors=1010 by Ryan84 (@Ryan84) on CodePen

 

I don't want to fade on the numbers but instead run a timeline I have built for each number. these are included in the JS.

 

They look like this:

 

1

See the Pen zooKZK?editors=1010 by Ryan84 (@Ryan84) on CodePen

 

2

See the Pen JbbRXE by Ryan84 (@Ryan84) on CodePen

 

3

See the Pen xRREVR by Ryan84 (@Ryan84) on CodePen

 

4

See the Pen qqqaNr by Ryan84 (@Ryan84) on CodePen

 

5

See the Pen MbbjjW by Ryan84 (@Ryan84) on CodePen

 

6

See the Pen XNNjNd?editors=1010 by Ryan84 (@Ryan84) on CodePen

 

 

At the moment when point 1 is clicked im saying fade on number one and hide all others.

 

 

Ideally I want this to run when clicked:(instead of a fade on)

 

var NUM1Timeline = new TimelineMax({paused: true});

  NUM1Timeline.staggerFrom(".SET1>g", 0.8, { opacity:0,}, 0.18)

.from(".top1", 2.4, {x: '-22%', y: '22%', opacity:1,},0.0)

.from(".shd1", 6, { opacity:0,}, 0)

.from(".blk10", 1, {transformOrigin:"50% 50%", scale:0, opacity:0, ease:Back.easeOut },2.2);TweenLite.to(NUM1Timeline, 3, {progress:1, ease:Power2.easeIn});

 

 

Any help would be really appreciated.

 

Kind regards,

 

Ryan 

 

 

 

See the Pen aBBVWg?editors=1010 by Ryan84 (@Ryan84) on CodePen

[Carl 9,066 Likes (Superhero)]

Unfortunately I just can't get into all that code and try to figure it all out.

I think Blake mentioned something in another post how consistent naming of your elements will help you construct a loop to do a lot of that heavy lifting.

 

Regardless, I think what you need to do is keep track of what number is visible so that when you click on another number you can always hide the visible number in any way that you want.

 

This is a very simplified demo that shows the basic mechanics of reversing the animation of whatever element is "active"

 

click a few boxes to see how the active element always closes when you click on another one.

 

http://codepen.io/GreenSock/pen/rWWpKM?editors=0010

 

 

var currentAnimation; // keep track of what animation needs to be reversed

 

$(".box").each(function(index, element){
  //create a timeline for each box
  var tl = new TimelineLite({paused:true});
  tl.to(this, 0.2, {width:100})
  .to(this, 0.2, {text:"active"})
  //assign an animation property to the box
  this.animation = tl;
  
  $(this).click(function(){
    if(currentAnimation){
      //if there is a currentAnimation reverse it
      currentAnimation.reverse();
    }
    //play this box's animation
    this.animation.play();
    //set current animation to this box's animtion
    currentAnimation = this.animation;
  })
  
})

If you want the "hide the element" animation to be different then the animation that activates the element you could generate animations on the fly like:

 

var currentElement;

$(".box").each(function(index, element){
  $(this).click(function(){
    if(currentElement){
      hide(currentElement);
    }
    show(this);
    currentElement = this
  })
  
})

function show(element) {
  var tl = new TimelineLite()
  tl.to(element, 0.2, {width:100})
    .to(element, 0.2, {text:"active"});
}

function hide(element){
  var tl = new TimelineLite()
  tl.to(element, 0.2, {width:50})
    .to(element, 0.2, {text:""}, 0)
    .fromTo(element, 1, {rotation:360}, {rotation:0}, 0)
}

 

http://codepen.io/GreenSock/pen/XNNZeZ?editors=0010

 

Hopefully something in these techniques can help you with your project.

[RyanHerbert 7 Likes (Newbie)]

Thank yopu carl this sounds like some excellent support.

I'm going to also be adding a scroll function so just tring to get my head around how this all fits together

... this is my holy grail haa

http://waaark.com/vision/

 

thank you ever so much for your support