Jump to content
Search Community

Dipscom last won the day on July 21 2022

Dipscom had the most liked content!

Dipscom

Moderators

  • Posts

    1,640

  • Joined

  • Last visited

  • Days Won

    62

 Content Type 

Everything posted by Dipscom

49
50
51
...
65
Page 50 of 65  
  1. Dipscom
    Now it's a different conversation. A long time ago, in this galaxy, not far away there was a similar topic about it. Tried finding it, but no luck at the moment. TLDR; Make a timeline that plays your animation but instead of having a repeat:-1, have a onComplete that checks if it should repeat or not. Set a variable that you toggle true or false when the user interacts. That way, the timeline will play the "cycle" until the end after the interaction but will not repeat. Pretty much what Carl has shown you.
  2. Dipscom
    Oh look, it's another Thread-Party! Typical Carl, always dragging this bar up... @pimaga, forgive me for asking, it's really curiosity now. But, if you have a tween that loops infinitely, only stopping when the user interacts. Why is it that you need it to stop after one, as you call it "cycle"?
  3. Dipscom
    Following on Jonathan's comment: Would you have a particular reason to have the repeat:-1? Do you need it to repeat a specific number of times and stop or stop after a certain event or after a certain amount of time?
  4. Dipscom
    Let me butt in here... How about good ol' cheating code? http://codepen.io/dipscom/pen/WGjqrm?editors=0011 By the way, you might want to change the attribute you're animating from "bottom" to "y" to reduce layout trashing and make use of GPU when available. Like this: http://codepen.io/dipscom/pen/ORmZoa?editors=0011
  5. Dipscom

    Glow effect?

    Dipscom replied to azuki's topic in GSAP

    As far as I know, you can't directly alter the external file with JavaScript. I *think* you can achieve what you want if you make the external SVG file reference the filter effect and then, you have to have the filter in the document you are targeting. If I have a moment at work today, I'll try it out to see if it works.
  6. Dipscom
    The answer to that, my friend, is: it depends. It depends on what you want the output to be. It depends if you prefer a click and drag approach or if you are ok with code. It depends on what animation you are talking about, moving things on the screen, character animation, shape morphing. It depends on how much time/patience you have available. In the end, there is no silver bullet. If you ask people they can only give you their personal opinions for specific scenarios. All of the above, also happens to be just a personal opinion: mine.
  7. Dipscom
    Hey, Having a .to() method with a super small duration is not really a hacky workaround, it is actually expected behaviour when you think about it. Going back to where I say that a .to() (or any other method, actually) tween with 0 duration is the same as a .set(). What it means is, with a 0 duration, there's really zero time, they all happen immediately. So quick we don't see it. No matter how many calls you place (within reason obviously, if you put a loop that creates a billion calls, we might start to see things), they all effectively happen at the exact same time. Now into your specific case. Here's a fork of your pen with a tiny modification where I believe the behaviour is what you are looking for: http://codepen.io/dipscom/pen/QKvEdP?editors=0011 The only difference being the immediateRender toggled to false. From the docs: Here's the source. If you expand the Parameters box you will be able to read more. What I see happens is if you don't set the immediateRender to false is that, since there is nothing taking up any time at all in your timeline, the two 0 duration .to() tweens simply move back in time all the way back to the very start of the timeline. That leads into your your question about putting a .set() in the middle of a timeline. If that timeline contain tweens with some amount of time, it will not execute before anything prior to it (unless you change its position parameters. http://codepen.io/dipscom/pen/LRykXZ?editors=0010
  8. Dipscom
    Ok, you can tell that I have spent most of my Sunday at home, yes? I have finished tinkering with this idea. It's got my trademark cheating style of getting GSAP to do most of the math and editing the SVG to suit my needs. http://codepen.io/dipscom/pen/BLWEoa The only issue I see in my testing is that the out bit of the ease is rather janky... No idea why. The in part of it is fine. It happens in all the browsers I have tested (Firefox, Chrome, Edge, IE, Safari, Opera)... :/
  9. Dipscom
    Ok, if you can pinpoint that to the .staggerTo(), that's a good start. I do think that there is something not quite right there because when clicking to make the animation cycle, a couple of the times the first tween jumps, other times it doesn't. Definitely something fishy with that bit. I can't go over your code right now and double check but, try focusing on how you are building that stagger.
  10. Dipscom
    With a tween of zero duration, it happens immediately. It's the same as using the .set() method, so you will have to consider turning the immediateRender property to false or, instead of having zero, just have something super-duper quick, like "0.01" and the issue goes away. More info on immediateRender.
  11. Dipscom
    I can understand the reason to not put it all in a codepen. From the top of my head, if the only colour you are seeing is black it is because the linkage from the element to the gradient is broken or is breaking when you try to animate. What happens if you remove the code for he animation? Do you see any gradient? Do you see any gradient at all with just the SVG? Is this example pen setup in the exact same manner? From looking at the pen, I see many gradients being defined, do you need them all? What happens if you set just one gradient to all shapes? I mean, it's very hard to extrapolate what exactly is causing it, the only thing I can tell you for certain is that black is the colour you will see if no color/gradient is defined in a SVG.
  12. Dipscom
    That's what I was messing around with. Seeing how to the bezier plugin worked with SVG and testing autoRotate.
  13. Dipscom
    Sorry, I was meddling with it. I have a couple of things I wanted to test. Might fork it to try later. I'll stop now.
  14. Dipscom
    Nice one Blake. There's always the possibility that other mortals or non-matrix dwelling entities might want to achieve a similar result. If you are like myself, Es-her, you can cheat and get a similar result by adjusting the SVG a bit, nest a few elements and a single tween will get you to places. Like this: http://codepen.io/dipscom/pen/KgWbga If ever in doubt of what to do, just follow Blake's advice.
  15. Dipscom
    Hi Pebble, Welcome to the forums! That's a really nice start and setup. The codePen really helps, thanks for that. You actually got it all going. Your only slip was overdoing it a tad. You created a timeline, added the test animation and hooked it up correctly. But then, you added half of the timeline inside another variable and tweened that with the tick. All you had to do was to tween the whole timeline with your Update function. Here's a fork of your pen. I think this is what you were looking for.
  16. Dipscom
    Hi Sandschieber, Thanks for the CodePen, it's very helpful to have it. The main reason the pause is not working is because you are setting an absolute time when looping through the elements in the below: $(bioSplitTextH2.words).each(function(index,el){ bioTL.from($(el), 0.6, {opacity:0.5, force3D:true}, index * 0.01); bioTL.from($(el), 1.6, {scale:index % 10 == 0 ? 0 : 5, ease:Back.easeOut}, index * 0.01); }); If you change the index * 0.01 to the label you have created, the animation behaves as expected. $(bioSplitTextH2.words).each(function(index,el){ bioTL.from($(el), 0.6, {opacity:0.5, force3D:true}, "wait2seconds"); bioTL.from($(el), 1.6, {scale:index % 10 == 0 ? 0 : 5, ease:Back.easeOut}, "wait2seconds"); }); Here's a fork of your Pen: http://codepen.io/dipscom/pen/WGRjWB?editors=0010 And have a look here: http://greensock.com/position-parameter, it explains the position parameter in more detail.
  17. Dipscom
    Hello, hello! Bottom line is what are you using in your banners. The bare minimum I ever used was TweenLite and the CSSPlugin, minified of course. I know you could potentially chop some bits off the css plugin but I wouldn't advise... Other than that, you will potentially get more out of your kilobyte saving efforts from squeezing your larger assets (images, really) than saving 1kb or 2kb from GSAP's code.
  18. Dipscom
    O.o That opens so many possibilities.
  19. Dipscom
    Back from my adventures in Italy. Firstly, @jonathan, did I just missed you here? Now onto the continuous hijack of another innocent post... @OSUblake: You know we can have it with all sorts of effects in SVG, just like in canvas. I won't go and make a slider because I'm lazy. http://codepen.io/dipscom/pen/bwBbAk?editors=1010 You also know as well as I do that for a ton of things, canvas is way better tool than SVG. I wish I could keep up with your arms race but I can't. I wave the white flag here and now. Great links, btw, there's a load of stuff there I want to absorb. It will take time.
  20. Dipscom
    It's all good. I'm not a coder either (yet, I'll get there). Come back with as many questions as you have. Going from print artwork to code artwork is a big jump. There will be loads of things people here take for granted but might be unfamiliar to you. Happy Tweeting!
  21. Dipscom
    Hello jimcam, Welcome to the forums and the wonderful world of banner creation It looks like you have just copied your local code and dumped into the Pen (which is fine, don't worry), therefore, there's a bunch of things there that shouldn't be and will cause people to point that to you (I guess I just did). No need to have <body>, its parents and <script> tags in there. CodePen already adds that for you. There was also a load of JavaScript code in your Pen that did not seem to have any relevance to your question. The less code we have to read the easier it will be for us to help you. Firstly as Vic_ pointed out you did not create any click/touch events. You'll have to add something. It's best to have an event listener not in the DOM. var myBtn = document.getElementById("myBtn"); myBtn.addEventListener("click", myFunction); function myFunction() { // Body of function } With that, controlling the timeline and showing/hiding elements is trivial. var infoBtn = document.getElementById("infoBtn"); myBtn.addEventListener("click", startTl2); function startTl2() { if( tl.isActive() ) { tl.pause(); } tl.play(); } Finally, to have your buttons sit on above (we read on top of) the clicktag, you just place them after the clicktag itself in the HTML <button id="clicktag">Click Me</button> <button id="bt1">One</button> <button id="bt2">Two</button> By the way, when you're using autoAlpha, you should use a number (0, 0.5, 1) rather than true or false. That way, you can get semi-transparent as well as full transparency and opacity.
  22. Dipscom
    If I were to tell you that 99% of the agencies I work with still have the "create working files on the desktop, email zips to producer on demand, save source in some corner of some server", would that make your insides warm and fuzzy? I wish more places would build a pipeline but that doesn't seem to be the place. As far as I know, there is no such de-facto preview system out in the wild. There are the preview and notification systems of each AdPlatform. From my experiences working with different agencies, each have their own way of doing things - from the animation structure to the preview system. Heck, I even came across an agency that had a semi-permanent freelancer who would animate his banners in After Effects, export it as a video and upload the video as the banner. So, you're doing great and on the right path.
  23. Dipscom
    I'd say the adPlatforms each have their set of templates that you can use/learn from. The biggest cause of confusion is DoubleClick's many faceted hydra of a setup and Media Buyers inability to care to be specific. Whenever a developer asks: "which platform is this going?" and gets "it's DoubleClick" as an answer, a kitty dies, an ulcer is born and he gets no closer to a solution.
  24. Dipscom
    Yes Giovanni, I do. You might not like it though. How to clean them: you'll have to redraw it all by hand writing the code yourself. That is not ideal, I know. But, for complex shapes or those moments that is just impractical to write hundreds of lines of SVG code (not many people seem to be as pedantic as I am... :'( ) you can cheat. The transform attributes have to be kept, because if you remove them the elements will not sit where you have drawn them. You will still have to do some editing by hand, by grouping the parts in another layer and animating that one <g> tag, rather than the one that contains the transform attributes. Here's some pseudo-code to illustrate: Initial <g id="cuore" transform="translate(137.000000, 158.000000)"> <path d="M2.5,21.733 C2.374,21.57 0.341,18.936 1.91,15.733 L2.153,15.231 C4.045,11.301 8.475,2.098 24.342,1.952 L24.706,1.952 C40.575,2.098 45.005,11.301 46.897,15.231 L47.139,15.733 C48.707,18.935 46.675,21.569 46.587,21.68 L38.835,32.819 L24.526,32.786 L10.213,32.819 L2.5,21.733 L2.5,21.733 Z" id="Shape" fill="#46354F"></path> </g> Amended <g id="cuore"> <g transform="translate(137.000000, 158.000000)"> <path d="M2.5,21.733 C2.374,21.57 0.341,18.936 1.91,15.733 L2.153,15.231 C4.045,11.301 8.475,2.098 24.342,1.952 L24.706,1.952 C40.575,2.098 45.005,11.301 46.897,15.231 L47.139,15.733 C48.707,18.935 46.675,21.569 46.587,21.68 L38.835,32.819 L24.526,32.786 L10.213,32.819 L2.5,21.733 L2.5,21.733 Z" id="Shape" fill="#46354F"></path> </g> </g> This is obviously a hack, it works because each <g> tag has its own viewport and local coordinate system. Which is actually the very reason why the transform attributes work and break the animation in the first place. Hope that helps you. And yes, we can see your Pen just fine.
  25. Dipscom
    Blake is like that guy that if you invite to go fishing you don't bother buying bait as he will be bringing dynamite... I'll get back to this later on. Off to play chicken with a bunch of Italian drivers right now. All in the name of having some lunch.
49
50
51
...
65
Page 50 of 65  
×
×
  • Create New...