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?

LOL, I'm good until right after the words "Create a function that ..."

I recognize what you're saying, however, executing that is a whole different beast. Can you dummy that down to newbie-speak?

Sorry, Zach, way out of the wheelhouse on that one. Attached is an image that basically shows where we're hoping to end up. Here's where we're at so far... https://codepen.io/acole76/pen/GRRJLqM

Does anyone know how to create a countdown that easeIn (speeds up) as it gets closer to 0 and confine the duration to a 10 second window? Format: 06 HR : 00 MM : 00 SS Please advise. Thanks to anyone who can shed some light on it.

Thanks for your quick input... Yes, we're literally looking for displaying a running countdown to hrs : min : sec left before the event — the "a bit more complex" version you spoke of.

Is there a way have an ad/web banner dynamically read the local timestamp, calculate and accurately display time remaining—regardless of what timezone the banner is served? If so, how? Can/will it be 100% accurate? We haven't found a codepen element that would be served within the context of a publicly served ad/web banner. Please advise. Thanks to anyone who can shed some light on it. For example: An event is 36 hours from starting. CPU 1 lives in EST zone, sees banner at 27 hours out. CPU 2 lives in CST zone, sees banner at 12 hours out. CPU 3 lives in PST zone, sees banner after 3 minutes out.