Jump to content


Timeline click to trigger animation

Moderator Tag

Recommended Posts

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:


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


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


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


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


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


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,

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

Link to comment
Share on other sites

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.





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;
      //if there is a currentAnimation reverse it
    //play this box's animation
    //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){
    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)




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

  • Like 2
Link to comment
Share on other sites

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



thank you ever so much for your support

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