smallio

@Dipscom ooo thank you Okay so I've put this in a timeline now, tried everything and when I hit reverse nothing happens. Just for the record I'm not trying to reverse the countdown... I'll just reverse the params so it plays forwards. My actual animation is just to complex now to reverse manually and have this play forward as normal. What would you suggest?

Hey @Dipscom I present another cake points earning opportunity Due to the length of the animation I've made I decided it actually looks better just halving it reversing it. Thus my count-up timer stays at 0. What could I do to solve this? I've tried flipping the > symbol as well as reversing total seconds and the numb on start param. No cigar as of yet. function countItUp(numb, interval) { var secondsLabel = document.querySelector(".js-count-up"); var totalSeconds = 0; // If you want to use either a given param or a default value var intrvl = interval || 25; var countdown = setInterval(function() { totalSeconds++; secondsLabel.innerHTML = totalSeconds; if (totalSeconds >= numb) { clearInterval(countdown); } }, intrvl); } /* myTimeline | Logo/Text/Counter */ function myTimeline() { var tl = new TimelineMax(); tl.to(wave, 1, { attr: { d: shape2 }, ease: Expo.easeIn }); tl.to(wave, 1, { attr: { d: shape3 }, ease: Expo.easeOut }); tl.to(wave, 1, { ease: Expo.easeOut, opacity: 1 }); /*** CALL FUNCTION WITH THE TWEEN BELOW ***/ tl.from(countUp, 0.6, { opacity: 0, ease: Expo.easeOut, onStart: countItUp, onStartParams: [100, 15] }); var masterOut = new TimelineMax({ repeat: 0, repeatDelay: 0 }); masterOut.add(myTimeline()); console.log("duration is: " + masterOut.duration()); masterOut.reverse(0); }); });

This just blew my mind! RIP free time.

Perfect, thank you

So I'm working on a client site in webflow - http://emma-dodi-final.webflow.io/about In the about section I'm trying to get the two photos coming in while the text is animating. For some reason "-=" & "+=" seem to have no effect on this snippet. Elsewhere in the site I've used them and they work perfectly. Anyone know what the deal is? var tl = new TimelineMax, mySplitText = new SplitText("#meetEmmaText", {type:"words,chars"}), chars = mySplitText.chars, //an array of all the divs that wrap each character emmaPhoto = $('#emmaPhoto'), flowerPhoto = $('#flowerPhoto'); TweenMax.set("#meetEmmaText", {perspective:400}); tl.staggerFrom(chars, 0.5, {opacity:0, scale:0, y:20, rotation: 20, transformOrigin:"0% 50% -50", ease:Back.easeOut}, 0.01); tl.staggerFrom(emmaPhoto, 0.9, {opacity:0, scale:0, y:20, ease:Power1.easeOut}, "-=1"); tl.staggerFrom(flowerPhoto, 0.9, {opacity:0, scale:0, y:20, ease:Power1.easeOut}, "-=1"); Thanks in advance

IT WORKED!!!! Thank you so much man!! If you have a tip jar/btc address I'd love to buy you a coffee for all the help. Learned so much from this thread it's unreal

Thanks for all the helpful info!!! I've bookmarked http://youmightnotneedjquery.com/ I understand the params. My problem lies in passing more then one. As seen here - exhibit a) These are the params I'm trying to move to exhibit c function countItUp(numb) { var secondsLabel = document.querySelector(".js-count-up"); var totalSeconds = 0; var countdown = setInterval(function(){ totalSeconds++; secondsLabel.innerHTML = totalSeconds; if (totalSeconds >= numb) { clearInterval(countdown); } }, 25); } countItUp(100); exhibit function without params (calling them in timeline) function countItUp(numb) { var secondsLabel = document.querySelector(".js-count-up"); var totalSeconds = 0; var countdown = setInterval(function(){ totalSeconds++; secondsLabel.innerHTML = totalSeconds; if (totalSeconds >= numb) { clearInterval(countdown); } }) }; exhibit c) now I need to add them both back here. The 100 param I understand but no matter what I do with the (25) param it gives me console errors. tl.from(countUp, 0.6, { opacity:0, ease:Expo.easeOut, onStart: countItUp(100), }); I assume it looks something like this after reading the documentation yet this does not work :'( tl.from(countUp, 0.6, { opacity:0, ease:Expo.easeOut, onStart: countItUp[25, 100], }); I feel like I'm going full retard here :/

Also in reference to this, what should I be using instead of JQuery? If you find it confusing, no wonder I do as well aha.

Very good question I looked over that. I only want to fire it on line 82, I just can't get the params to work there. I want the (25) & (100) passed on line 82 as well I'm just not sure how to delete the timing param (25) from line 68 and move it to 82. I'm sure it's super simple, I'm probably messing up a bracket or something!

Yup here's the pen

Hey @Dipscom! Thanks for the codepen! I've pretty much figured it out with a few tweaks & your post. The only thing that's randomly changed is the counter fails to stop at 100 now it's being called back. Can you see any reason why this would happen? Thanks again, Smallio

Hello fellow tweeners! Hit a brick wall here even though I feel like I've done the hard part. I've been referring to documentation for hours trying to solve this. I'm trying to fire my page loading counter after it fades in, via the tween that does so. Everything is setup & neatly organised/labeled but I'm just butchering the last part lol. The three parts I'm using are marked with lots of asterisks & notes explaining what I'm trying to do. The load counter needs to be nested inside the "onComplete" callback which is already being fired by my tween (console log works)... just not able to get the countdown in. *sigh* Any help would be massively, massively appreciated. Loving the library & community equally! Cheers, Smallio Sorry for the newbie question <3