Jump to content
Search Community

LK1037

Members

  • Posts

    21

  • Joined

  • Last visited

 Content Type 

Posts posted by LK1037

    GSAP 3 stagger syntax

    in GSAP

    Posted

    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")

     

    GSAP 3 stagger syntax

    in GSAP

    Posted

    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.

    countdown formula changed to 'by date'

    in Banner Animation

    Posted

    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;

    countdown formula changed to 'by date'

    in Banner Animation

    Posted

    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

     

    GSAP Syntax for reusing an element

    in GSAP

    Posted

    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.

     

     

    Speeding Countdown

    in Banner Animation

    Posted

    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?

    Speeding Countdown

    in Banner Animation

    Posted

    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. 

    Dynamic Ticker Countdown

    in Banner Animation

    Posted

    1 hour ago, davi said:

    Yeah, this is how banners that have movie or show times are created, "tune in" dates (i.e. Show date, out tomorrow, out today, etc). Use the JavaScript Date object >
    https://css-tricks.com/everything-you-need-to-know-about-date-in-javascript/

    Depending on your needs, it can be simple or a bit more complex. Typically, with movie or show banners, you just use 3 scenarios or outcomes > Coming out today, tomorrow, or XX days until it reaches tomorrow. Obviously, if you're putting a real countdown where the time is constantly changing or it's giving an actual amount of days or minutes until showtime, it gets a bit more complex.

    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.

    Dynamic Ticker Countdown

    in Banner Animation

    Posted

    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.

     

×
×
  • Create New...