Jump to content
GreenSock

soupking

Members
  • Posts

    117
  • Joined

  • Last visited

Posts posted by soupking

  1. On 3/9/2019 at 8:58 PM, GreenSock said:

     

    Does that resolve things for you? 

     

    Yes!! More than I was hoping for. I never would have found that syntax error. I'm a real dunce with SVG and try to find alternatives any way I can, but with displacement...there's just no way around it. 

     

    I also had no idea I was using a borderline deprecated version of GSAP, I'll switch that out asap. 

     

    Thanks so much Jack!! :)

    • Like 3
  2. 47 minutes ago, Shaun Gorneau said:

    If by trumping you mean "undoing all property changes done by other tweens", you're looking for `clearProps: "all"`.

     

    Hey guys, thanks for the response. Y'all are great as always. You know, I figured out something where I made a duplicate of the button I wanted to sustain after the first loop.  That seemed to do the trick.

     

    I'm not quite sure how one would use a conditional override in Timeline other than overwrite:true, but thought I'd ask.

     

    Thanks anyway!

     

     

     

  3. Hi Everybody,

     

    Is there a command of some kind that I can assign a tween to an element and it just trumps all other tweens?

     

    Like my scenario is I have a media unit where it loops with a button. The first time around the button doesn't show up until the end of the sequence. But every other loop it stays there the whole time no matter what it's told to do down the timeline.

     

    Is there a command of attribute in the API that does that?

     

     

  4. 3 hours ago, GreenSock said:

    Good question, @soupking. I'm actually quite shocked to hear about your experience. Timelines should absolutely make banner workflow WAY easier. I wonder if maybe you're just not quite understanding how they work or something. Like @Dipscom said, timelines are simply containers for your tweens. 

     

    I chatted years back with a guy who was making CRAZY amounts of banners for an equally insane amount of money. And he didn't even know there was such a thing as TimelineLite or TimelineMax. He was doing everything with straight-up tweens which is okay, but once you grasp how timelines work it becomes quite clear that they'll solve quite a few challenges and smooth out workflow. Once I introduced him, he was hooked. He just never realized what they could do or how they could benefit his workflow. Perhaps you're in a similar boat. 

     

    Have you read this article? https://css-tricks.com/writing-smarter-animation-code/

     

    That one article could change your whole outlook. Seriously. Give it a very focused read and hopefully it'll all make sense. Let us know if that resolves things or if you still have some challenges where you think plain tweens are better. I literally can't imagine a scenario that'd be better with plain tweens if there is any amount of sequencing that you're trying to do. Zero. The article explains it all. I'm curious to hear back from you.

     

    I think a large part of my misunderstanding is just naive ignorance. I just figured there has to be some significant reason why people are putting themselves through this operational syntax of animating. I'm not getting it so I figured I'd just ask as with banners keeping things simple and stupid is kind of it's own form of methodology and survival. 

     

    I fixed something with the same banner set later that night and I'm not sure what was wrong or what I did to fix it. But I'm glad it just worked and could pass QA. I think running into those late night scenarios keeps people like me primitive and liking it that way. Kind of the same way the dishwasher repairmen like the older models of dishwashers because there's less to mess with. That doesn't necessarily mean we should dodge electronics.

     

    I have to work the remainder of the night but I will MOS DEF check out that article tomorrow sometime as it sounds like I need to upgrade my skills but still do it in a not an on-the-clock by-the-seat-of-my-pants fashion (which isn't always fun :). Thanks Jack!

     

     

     

     

  5. 4 hours ago, Shaun Gorneau said:

     

    This sounds good on the surface, but with Tweens all of those delays are absolute (relative to zero). Depending on the number of tweens, that could spell trouble if an early Tween's timing or positioning (i.e. delay) needs to change. For example, let's say every Tween in this series needs to begin .25s before the previous Tween ends.

     

    
    TweenMax.to( '#something-1' , 1 , {x: 100} , 0);
    TweenMax.to( '#something-2' , 1 , {x: 100} , .75);   // prev delay + prev duration -.25
    TweenMax.to( '#something-3' , 1 , {x: 100} , 1.5);   // prev delay + prev duration -.25
    TweenMax.to( '#something-4' , 2 , {x: 100} , 2.25);  // prev delay + prev duration -.25
    TweenMax.to( '#something-5' , 3 , {x: 100} , 4);     // prev delay + prev duration -.25

     

    Now change the timing of the second Tween to 2.3 seconds (ugh ... yes simple math, but not fun)

     

    Instead take

     

    
    var tl = new TimelineMax();
    
    tl.to( '#something-1' , 1 , {x: 100} , 0)
      .to( '#something-2' , 1 , {x: 100} , "-=.25")
      .to( '#something-3' , 1 , {x: 100} , "-=.25"
      .to( '#something-4' , 2 , {x: 100} , "-=.25")
      .to( '#something-5' , 3 , {x: 100} , "-=.25");

     

    Now change the timing of the second Tween to 2.3 seconds

     

    
    var tl = new TimelineMax();
    
    tl.to( '#something-1' , 1 , {x: 100} , 0)
      .to( '#something-2' , 2.3 , {x: 100} , "-=.25")
      .to( '#something-3' , 1 , {x: 100} , "-=.25"
      .to( '#something-4' , 2 , {x: 100} , "-=.25")
      .to( '#something-5' , 3 , {x: 100} , "-=.25");

     

    That's it, nothing else changes.

     

    Now THAT makes a ton of sense. I see your point. I'm glad I asked as I wasn't familiar with Timeline and that it was capable of eliminating arbitrary 'magic' values. That definitely makes me want to use Timeline if I'm templating. I'd then take things a step further if possible and then make var quick =  "-=.25"; if possible somehow then make a few for slower times for header declare options.

     

    My conflict with Timeline remaining still is understanding other people's nested timelines. That always makes me stumble but I'm guessing reading that sort of thing becomes more legible with time.

     

    Thanks for clarifying the reasoning. I didn't know that's what I was looking for but that's one aspect that sure explains the methodology as to why one would 'structure up' for standard banners and not just keep coding raw. 

     

     

     

     

     

    • Like 1
  6. 35 minutes ago, Dipscom said:

    I also can't see why you would have to change all the relative positioning ("-=") of the elements in a timeline because the client asked you to "loop it". If anything, using TimelineMax would be simply adding "repeat:2" to the Timeline's constructor (Or however many times the animation was to repeat).

     

    You got me curious to figure out how you would set your ads. Can you build a simple example? Then, I'd make recreate it myself and we could discuss the merits of each approach. Not in the sense of "let's see who does it better" but in a sense of "here's how I do it, let's get the best of both approaches".

     

    Ps: To me, the timeline is a way to group and sequence related tweens.

     

    Hi Dipscom,

     

    Sorry, I kind of lumped two separate instances in one situation. Didn't intend to do that. The coding I was working on had (from what I gather online) syntax that wasn't the best.

     

    You should in essence be able to just add repeat inline at the initiating command, but alas it didn't work. Soooo I had to tinker. As it turns out just out of pure luck I landed on a greensock thread where Jack was explaining that in nesting timelines you shouldn't put function() when nesting a timeline:

     

    t1.add( function(){ timeline(); }, "-=0.25"); 

     

    That you should instead do:

     

    t1.add( timeline(), "-=0.25"); 

     

    I removed the function() part and added return t1 to all the functions. THAT fixed it but now the whole timeline went really slow sequentially and I had to re-stitch the whole thing to sync back up again. Furthermore the nested timelines (for whatever reason) has all these -= pre-zero timeline starting points against other delays in the actual main timeline. So 50-60 refreshes later guessing where the heck everything is  starting and stopping I'm finally back to where I needed to be...with a loop.

     

    So I'm just like...Seriously, guy? If I used TweenMax I could see all the delays on the right-hand side and have no question of delay.

     

    Granted, one can get themselves into more trouble with timeline vs. tweenmax and editing somebody else's work, no matter the syntax etiquette, would suggest that TimelineMax is simply more powerful and thusly one can naturally get into more trouble. 

     

    Even if it's a bit Kerouac scroll using TweenMax with maybe some dividing comment lines this would have been a lot easier to edit.

     

    I don't mean to single this person's coding out. It's just that I run into this sort of thing in varying degree when having to edit 3rd party coders last minute. If it weren't for Jack's response in that blog I'm not sure I could've fixed it. I was lucky, otherwise I would've had to re-animate the whole thing cuz I'm just not that timeline savvy.

     

    I don't actually have a way of setting ads yet as I mostly work in Animate these days. The company I'm working for is interested in templating their inventory as they've taken on a lot more ads. So naturally with templating I'm headed to a hand-coded approach. When hand coding I've mostly worked from previous campaign pages and just re-edit them to suit. My first was using SCSS and vector data which was NUTS, but have since then simplified things. 

     

    Since I'm having to adhere to a 'way' or main approach of coding now because of that company change, I guess that's why I'm asking about advantages vs. shortcomings. 

     

     

     

     

  7. Okay, so I've worked in banners, rich media, and now at some length responsive media since Macromedia Flash was purchased by Adobe. For me, Greensock has been here the whole way through providing animators/developers with what used to be called a one-frame animation, and now hand-coded, option for animating stage elements for online media.

     

    I work predominantly in online advertising which involves a plethora of smaller and at times potentially robust content for shorter brief life cycles or lengths of time. I've looked and modified a number of other coders work involving online ads and they vary quite a bit.

     

    Some use greensock, some don't

    Some use spritesheets, some don't

    Some use precompiled code, most don't these days (as at 200k it's a little overkill)

     

    With regards to GSAP I'm finding most developers use TimelineMax. Now...I don't entirely understand it. In fact when I receive another coders work and find they used nested timelines that for whatever reason don't behave well when the client asks if I can "loop it", it becomes a giant headache of having to re-stitch and refresh multi-layered and negative "-=" values (that are rather nebulous to quantify) dozens of times with elements hiding somewhere within or around a 300x250 pixel window. 

     

    If this coder just used TweenMax and coded this same animation in 20 lines of code...Boom! Easy to read, easy to write. 

     

    There's typically like 8 elements within any given ad. Why all the nested functions and sophistication guys/gals? 

     

    Are there major advantages to Timeline that I'm missing? I keep finding myself learning and forgetting the use of this form of development. Granted, I'm more of a software guy and think coding for the sake of coding redundant and just plain unnecessary. The idea of bundling 20 lines of code just seems like more work. Like, I dig organization too, but...in terms of language and page translation, all TimelineMax has really introduced to me from other developers is more ropes to tie-untie. 

     

    Granted, I understand the use of timeline in a way of more-a-less "arraying" elements (for lack of better wording)  into one cohesive timeframe. But when deadlines are riding hot, and this ad that's breathing down my neck is only going to be around for 30 days or so. Why use timeline and not just fire 10-20 lines of plain ol' TweenMax? 

     

    Is TweenMax just a primitive way of coding all together? Online media doesn't get much smaller or shorter lived than ads. 

     

    I'm wrestling with my own development and trying to determine if I should really embark on embracing this TimelineMax thing once and for all or if it really is just preference. I did all I could to finally learn AS3 and that was a huge unnecessary use of time. Most of the work I come across could just as easily animated without loading timelines into other timelines. Know what I mean?

     

    Maybe I'm just a simpleton (a new design pattern, har har), but I just don't fully understand the emphasis for using TimelineMax and was wondering what other people's experiences were.

     

    Thanks for reading! :D

     

     

     

     

     

  8. Thanks guys, I'll come back to this for reference. I ended up doing a sliding div hack to make something mask from center. If you do this use px values only. % tend to make things jittery.

     

    That and I found a great bubbles demo from Jack I think. They were green so it was probably his. Can't find the link though.

     

    Thanks again!

  9. Hi Greensock,

     

    I have a situation where I need to unmask an object. I don't know what's passing modern browser specs for this sort of thing. 

     

    Does anybody have a basic codepen link on-hand for reference that shows a basic CSS mask DIV animate to reveal another DIV?

     

    I will later need to figure out how to make a round mask using SVG data, but for now I'd like to know what I can use just to reveal an image from center using a straight scaleX using GSAP or something like it. 

     

    Thanks for any help. :)

  10. Hi GSAPeople,

     

    I'm looking into building a random mosaic-like tile reveal of an image. I imagine one would put an animated array together and then put GSAP's random stagger for adjustment but was wondering if anybody had any examples they knew of for reference.

     

    If anybody knows of a sample to examine for this sort of thing I'd be stoked to check it out.

     

    Thanks for reading. :)

  11. Hi OSUblake,

     

    This is...awesome. I keep looking at the "attr" attribute (redundant award) with awe. Like I read about it like a great control mechanism for objects but don't quite understand how to imply it. Is it kind of like I'm referencing a DIV, this DIV type has it's own attributes. As long as they fall under an API umbrella I can pretty much just "quote" it in to control it. Is that right?

     

    Like, for a general IMG, I could stretch the image by width:

    .to("#imageInQuestion", 4, {
        attr: {
          width: 100
        }

     

    Is that kind of the idea? If so, I might've not found what I was looking for because #turbwave had no scale. Again, freakin' luddite with SVG.

     

    Thanks a bunch OSUblake, I'm off to the races, big help.

  12. There's really nothing on this. Wow, I can't find any info on making displacement maps go from 0 (zero) displacement to 100 or vice versa.

     

    Is there currently no way to do this now? I'm looking for attributes to alter but there's nothing to sample. I'm seeing displacement cycling, but nothing that ramps it's wavy distortion from one value to another.

     

    Is there an attribute I should alter for this? I can't seem to find study on this anywhere.

  13. Hey Blake,

     

    I saw that one, man. Way cool, but is there way to get that displacement to stop flush or ease into being without distortion or being displaced?

     

    Sorry if that's kind of a lazy question. I really just don't have a very good grasp of SVG or canvas anything. Not sure what property that would possibly involve. 

     

    Is achieving something like this effect to a flat no-distortion stand-still possible?

     

    Thanks for the response!

  14. Hi GS folks,

     

    I have a banner animation where I want the BG to reveal like a flag or water...even displacement reveal that goes still in 5 seconds.

     

    I don't really know that much about SVG. Can anybody tell me where the heck I should start, or have an example that I could examine?

     

    Much obliged to any helpers out there. :)

  15. Well, I'm exploring jQuery and what it provides. ':animated' is a selector extension (to see if animating) of their API and was wondering if that would effect GSAP animations from a DOM manipulation approach.

     

    You make a good point though, why not just suspend an animation within it's own library vocab. I don't have a specific scenario. Considering that jQuery and GSAP are both CSS selectors for the most part (right?) it's probably akin to me asking whether I should go left or right to get to the same result.

     

    Mostly curious is all I suppose. Thanks for responding. :-D

  16. Yeah, I've been looking at it from a number of angles the past few days and I'm...Heh, it's about a ghostly as referencing Xpath data in a Flash site.

     

    I don't have the ability to contact the engineer who put the framework together so I've got to find a way to make this one stick without saying, "please scroll up to view". Given the nature of it's DIV complexity and dynamic nature of using JQuery or whatever to generate the main ut_container DIV on the fly which is wrapped up in JS file that amounts to sawdust. I'm going to have to resort to a band-aid or potentially a video demo. It works on everything else thought so it'd be a pity to not just show the unit as-is. However, it's a pretty complex little unit.

     

    The main files are:

    http://axiom-media.com/__portfolio/_rwd/02/mobile.html

    and:

    http://axiom-media.com/__portfolio/_rwd/02/creative/index.html

     

    They pretty much behave as the iFrame container file and the index for the ad build/animation etc.

     

    I really think it's too complex to solve without the source creator, but if there's a script that can tell the scrollbar to "hey, keep sliding up!", that'd be my easiest fix.

     

    Thanks for reading, Jack.

  17. Hi Fellow Greensocks,

     

    I have a situation where I have a responsive rich media unit that inadvertently pushes the page down with the unit staying at the top (above and out of sight), so you have to scroll back up to see it. It didn't always do that and it only happens in Chrome (Desktop). It's older and I think Chrome updated their DOM model somehow. Now my sample is funky (Must view in Chrome-Desktop for issue):

     

    http://axiom-media.com/__portfolio/_rwd/02/mobile.html

     

    Again, sorry for no CodePen. This issue is housed in a rather complex Page/Div framework that generates a DIV dynamically. In addition to that it's controlled (I think) by a very lengthy minimized JS. Even when unminified it looks like Harvard Calculus. There just isn't a way for me to replicate this challenge in a vacuum.

     

    So, that being the case, I'm getting out cigarettes and duct tape thinking...Create a document condition (if browser == Chrome, then..) Make the scroller move persistently back up inversely against the pushdown motion until complete. As it doesn't happen in subsequent user initiations, only onLoad.

     

    So I guess, bottom line, my question is there any way to scroll a page dynamically with GSAP code, without physical scrolling, so I can counteract what the page is doing on load? I can't find a way to kill the scrolling motion with overflow:hidden as the DOM structure is pretty thick and generated dynamically. So if I can't stop it, I figure I might be able to force it back with scrolling properties of some kind.

     

    If anybody can suggest anything or has any questions, I'm all ears. As always, thanks for reading. :)

     

     

     

  18. Ah! Found it --

    force3D:true

     

    I guess it was 3Dish. I don't think I was using 3D transforms at the time, but it helped steady the animation. 

     

    I found it in a LinkedIn messaging board. Just remember I shared it with a previous co-worker. Glad I did. It's not in the CSS reference I found online.

     

    You've probably used it before but if not, feel free to give it a go. I can't remember what I was working on at the time but it fixed some glitchy wonkiness were were trying to solve at the time.

     

    Best,

    • Like 2
  19. It might. I haven't seen 'will-change' before though. That's new to me.

     

    It was some kind of rendering setting or something similar to like cache bitmap or the setting in flash that made images tween better. 

     

    It wasn't like a 'quality:great' kind of setting or anything. It had more to do with image processing but I can't for the life of me remember what it was. 

     

    It helped in a pinch for something I was doing at an agency like 2 years ago. I've been away from work for over a year now and just don't remember. It might have had something to do with 3D transition, but I'm thinking it was more over arching that specifically that.

     

    Thanks for the response. :)

  20. Hi Greensock,

     

    This is more likely a CSS question than a GSAP one, but...

     

    I once used a CSS attribute method that made certain animations smoother. The thing is I can't remember the darn name. :?

     

    It wasn't so much an alias setting but had to do with something else to make animation less fidgety.

     

    Does anybody out there know what I'm talking about? I have some animations with borders and I'd like to firm them up. I've been trying to find it, but can't really remember what terms I would to search.

     

    It might have something to do with WebGL. Still looking...found 'image-rendering'. But that wasn't it either. I remember it being very off/on. 

     

    Thanks for reading and for any possible feedback. 

×