Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
RyanHerbert

Timeline click to trigger animation

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, 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

Share this post


Link to post
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.

 

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.

  • Like 2

Share this post


Link to post
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

http://waaark.com/vision/

 

thank you ever so much for your support

  • Like 1

Share this post


Link to post
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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×