Jump to content
GreenSock

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

onStart not working?

Recommended Posts

I am not able to get an onStart to work, though the onUpdate and onComplete work fine: These snippets are part of a larger vanilla javascript file. I want to know when this timeline starts and when it ends so I can update a DOM text element while the animation is running and remove the text once it is completed.

 

//onUpdate will also call the upDateCounter function and log "once" to the console (only repeatedly, versus one time for onComplete):

let tlWireframe = new TimelineMax({ onComplete: updateCounter }); 

function updateCounter() {
  console.log("once");
}

//The remainder of this code is just the multi-tween Timeline, 
tlWireframe
  .fromTo(
    ".wireframe-sitemap",
    3,
    { autoAlpha: 0, x: -900 },
    { autoAlpha: 1, x: 0, ease: Power2.easeOut, delay: 0.3 }
  )
  .to(".wireframe-sitemap", 3, {
    autoAlpha: 0,
    x: 1800,
    ease: Power2.easeIn,
    delay: 1
  })
  .fromTo(
    ".panel",
    3,
    { autoAlpha: 0, transform: "rotateY(-90deg)" },
    {
      autoAlpha: 1.25,
      transform: "rotateY(0deg)",
      ease: Power2.easeOut,
      delay: 0.5
    }
  )
  .fromTo(
    ".wireframe-swimlane",
    3,
    { autoAlpha: 0, x: -900 },
    { autoAlpha: 1, x: 0, ease: Power2.easeOut, delay: 0.3 },
    "-=1"
  )
  .to(".panel", 3, { autoAlpha: 0, transform: "rotateY(90deg)" }, "-=.25")
  .to(".wireframe-swimlane", 3, {
    autoAlpha: 0,
    x: 1800,
    ease: Power2.easeIn,
    delay: 1
  });

 

Share this post


Link to post
Share on other sites

I don't see onStart in your code. Here's a basic example of some callbacks all working correctly.

See the Pen LvrGgr by PointC (@PointC) on CodePen

 

If you have other questions, please provide a demo. More info:

 

Thanks and happy tweening.

  • Like 2

Share this post


Link to post
Share on other sites

Craig: Thank you! That was nice and stripped down and helpful. I forked your code and added a button "Click to Start". In my project my timeline(s) only start to play when a particular button is clicked. Anyway, with your code I was able to understand how to handle the callback functions to make it work for me. My test demo on codepen based on yours is here, just fyi. Thanks again, very helpful.

 

See the Pen mgKrYY by hmerscher (@hmerscher) on CodePen

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×