LK1037

Is there a way to make GSDevTools include scrubbing audio? I'm trying to sync portions of animation to the beat of a 30sec clip and so far the audio just plays independent of devTools.

Awesome, thanks!

Does anybody know of an updated cheat sheet for GSAP 3.0 like we had for 2.0 here... https://codepen.io/jasonbaciulis/pen/zNRdyM and https://ihatetomatoes.net/wp-content/uploads/2016/07/GreenSock-Cheatsheet-4.pdf If so, please share... thanks.

LOL - I was assembling a codepen for you and realized what I did wrong. Thanks for your help. Again.

AAAAHG! Blast those pesky commas. Yep, that was it. I've looked at that sample you suggested, but it deals with a single ".box" element, not multiple items. Encasing the elements in brackets [ thing1, thing2, thing3 ] unifies them and animates as a single unit — ignoring the stagger. tl.to( [ thing1, thing2, thing3], { duration:1.5, y:50, scale:0.75, autoAlpha:1, ease: "back", staggger:0.5}, ">-0.5") So to stagger each element by 0.5? tl.to( thing1, thing2, thing3, { duration:1.5, y:50, scale:0.75, autoAlpha:1, ease: "back", staggger:0.5}, ">-1")

In GSAP 2 we did a stagger of multiple objects this way... tl.staggerTo( [ thing1, thing2, thing3], 1.5, { scale:0.97, autoAlpha:0, ease:Back.easeOut}, 0.3, "f3-=1") In GSAP 3.0, I expected it to be... tl.to( [ thing1, thing2, thing3] { duration:1.5, scale:0.97, autoAlpha:0, ease: "back", staggger:0.3}, "<-1") How should the new syntax be formatted—couldn't find an example.

LOL. No worries — we can't tell the difference yet, it's all just code to us--but we're progressing. Hmm, that really broke it. It seems to start the count correctly, then trails off into chaos. https://codepen.io/sgbluq/project/editor/XRpRLq# I understand you need to focus on other things... can you defer me to the forum I should have posted this on?

Hmm, that blew up the countdown (days, min, hours). I made a project in codepen so you can see what happend. I just commented out the original countdown code that displays correctly. https://codepen.io/sgbluq/project/editor/XRpRLq# Ideally, this would countdown to a specified endDate (Nov 24, 2019 10:00:00 PST). How do we make it only countdown within a specific startDate to endDate?

Thanks for your grace and being willing to wade in anyway — we're still trying to figure out what/where/when/why stuff is supposed to go. So, to your answer, you mean like this? var count = { new Date('Nov 24, 2019 10:00:00').getTime()}; function setTime() { var timeLeft = count.time; var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24)); timeLeft -= days * 1000; var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); timeLeft -= hours * 60 * 60; var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60)); timeLeft -= minutes * 60;

The code below currently runs a countdown based on ## of days in milliseconds. Instead, now I need this to calculate from a specified date ( Nov 24, 2019 at 10 a.m.) or a date span (Nov 24-31, 2019 at 10 a.m.) PST. I'm guessing this is the call, but not sure how to integrate it into the existing formula... new Date('Nov 24, 2019 10:00:00').getTime() Here's our current countdown: // COUNTDOWN BY MILLISECONDS --------------------------------- var count = { time: 1000 * 60 * 60 * 24}; function setTime() { var timeLeft = count.time; var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24)); timeLeft -= days * 1000; var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); timeLeft -= hours * 60 * 60; var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60)); timeLeft -= minutes * 60; Thanks to anyone who can lend some insight. LK

Ah — immediateRender. That took care of it. Thanks for your help.

I'm trying to reuse an element in a timeline where [ thing1, thing2] reveals, sits for a second, then goes away. However, this only works once. I've tried { repeat:3, repeatDelay:2} which only blinks 3 times rather than repeating in 2 second intervals. Here's a snippet of my timeline... .add( "f1") .from( [ thing1, thing2], 0.5, { x:-7, autoAlpha:0, ease:Back.easeOut, scale:0.5}, "f1-=0.5") .to( [ thing1, thing2], 0.5, { x:7, autoAlpha:0, ease:Power4.easeOut, scale:1.5}, "+=2") .add("f2") // thing3 comes in and goes away. .add( "f3") .from( [ thing1, thing2], 0.5, { x:-7, autoAlpha:0, ease:Back.easeOut, scale:0.5}, "f3-=0.5") .to( [ thing1, thing2], 0.5, { x:7, autoAlpha:0, ease:Power4.easeOut, scale:1.5}, "+=2") .add("f4") // thing4 comes in and goes away. .add( "f5") .from( [ thing1, thing2], 0.5, { x:-7, autoAlpha:0, ease:Back.easeOut, scale:0.5}, "f5-=0.5") .to( [ thing1, thing2], 0.5, { x:7, autoAlpha:0, ease:Power4.easeOut, scale:1.5}, "+=2") .add("f6") // thing5 comes and stays put.

Zach — after running through testing, we found that the countdown playback is inconsistent. Seems to be a Chrome issue. On initial load, the countdown is stuck at the beginning. Refresh triggers it to play all the way through as intended. Refresh causes it to get stuck. Seems to work every other time. Does this have to do w/ the "pause" you mentioned? How do we fix it?

Zach, Thanks for your help and all the notations. After going back through it, we figured out what you meant. All good. Worked perfectly.

Ok, I posted a generic version to CodePen. https://codepen.io/sgbluq/pen/PooqvEr When I drop in the function, it removes the target placeholder—it shows for a split second, then is overtaken by the counter. See what I mean?