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

48
49
50
...
65
Page 49 of 65  
  1. Dipscom
    It's late for me now, but I'll get back onto it tomorrow. We'll work it out
  2. Dipscom
    Hi Rushmore, Welcome to the forums! I appreciate that you might not find english easy to read or write but be certain that we are more than happy to help. Thank you for the example pen, it does help a lot in the troubleshooting. The first thing I would say to you is that you have a bit too much code there that's redundant. The second thing would be to ask you to try and explain in a bit more detail what is the effect you are looking for? I think showing you the DrawSVG intro video might not help a lot as you might struggle to understand what is being said. But, in a nutshell, DrawSVG works by animating the stroke-dasharray and stroke-dashoffset properties and thus, that will be the probable root of your issue. If I can understand what you are trying to achieve, I shall do my best to help you. Here is my fork of your pen: Please note, this is not a solution but just to show you what you have as redundant code. http://codepen.io/dipscom/pen/rrvAxa?editors=0010
  3. Dipscom
    Man... You americans really are workaholics... 37.5 hours a week on this side of the pond is full time hours. Anyhow, good luck to peoples applying!
  4. Dipscom
    Carl, always with tips that I don't think of. It's a great way to pick up some new tricks...
  5. Dipscom
    Hi axe-z, Thanks for the Pen, it helps a lot. I am still not quite sure what you want when you say you want to stop the animation on hover. Have a look at the bellow, it is a fork of your pen. This is my guess to what you are after. Is this right? http://codepen.io/dipscom/pen/WGJrmL?editors=0010 Oh, and I'm not Obi-Wan. He said he'd be back soon. Something to do with something called 'Sith' infestation at his place.
  6. Dipscom
    GSAP will Tween any numeric property of any JavaScript object. But your question is not really about GSAP, it's about masking. And for that, SVG is the one who's got the best support here. There is a few threads in this forums discussing how to animate masks with GSAP, I've done a couple of transitions myself. Do a bit of a search in the forums and you should find plenty of info. Bellow are a couple of exercises I made myself. See if they help you. http://codepen.io/dipscom/pen/ZbVdGN http://codepen.io/dipscom/pen/KrAqxg http://codepen.io/dipscom/pen/zByqBV And a complicated one to confuse you http://codepen.io/dipscom/pen/yaYQyQ
  7. Dipscom
    Well, Jesper, I am not much closer to understanding what you want to achieve. There are many ways of achieving a slightly different animation one, would be to simply fire a call to a function at onReverse and have this function run a tween. Another would be a .call() in your timeline that returns different things depending which way your timeline is playing. As you are triggering your reverse() from a click, you can also add the said tween before calling the reverse(). I'm just shooting in the dark here, to be honest. If you provide us a reduced case example, we can always tweak it with suggestions. Right now, it is hard to even guess what effect you are after.
  8. Dipscom
    It is possible but the behaviour might not be something desirable. Maybe if you explain a bit more what exactly is you are planning or trying to achieve. Reduced case demos are always a sure way to help us help you http://codepen.io/dipscom/pen/VKxmNz?editors=0010
  9. Dipscom
    If you're on Chrome 53, you might want to read the last few pages of this thread: http://greensock.com/forums/topic/13875-chrome-49-janky-gsap/page-4?hl=chrome+janky#entry65699 And this blog post: http://greensock.com/will-change
  10. Dipscom
    Most exquisite behaviour. Thank you sir. This place looks like a good gathering of nice people. Very welcoming BUT! With the information you have just provided... One could argue that one can reach the totalProgress of a element with: var t2 = TweenMax.staggerTo([{}], 1, {}); console.log("t2a:", t2[0].totalProgress()); Does not seem to be mandatory to have a timeline.
  11. Dipscom
    We'll get there Oliver...
  12. Dipscom
    What it says on the tin. Why do I get a "is not a function" error when trying to get the total progress of a staggerTo (or From) tween? Am I being thick here or is this a well known thing?
  13. Dipscom
    Hey SydneyLoiner, It is quite possible, yes. The HOW is a bit more subtle than the IF. It depends on which ad platform the ad is going to go. Each has its own API to help you with that. You probably won't be allowed to code it completely using vanilla JS or the sort.
  14. Dipscom
    Really... I go away for ONE DAY and that's what happens. Let's not say later I started it.
  15. Dipscom
    I don't think you can access the inside paths/groups of linked objects. There is another thread somewhere here where Jonathan explains in a bit more detail but I am not finding it at the moment.
  16. Dipscom
    The browsers are innocent. DrawSVG is innocent. The culprit is.... . . . . . . . . . . . . . stroke-width! In the mask, with its thickness. (Extra browny points for whoever gets the reference). Coincidentally, there was another question just yesterday where the thickness of the stroke was causing issues in a mask. The artefact that you are seeing is your stroke being shown by the leftover mask when it gets to the end. I don't have the time to go over in fine detail because I would have to deconstruct your masking and path building functions. Just slow down your animation and watch as the paths move and overlap themselves, then, play around with the thickness of your stroke, you will see that at a value of 2, you don't have any more issues, from 3 on, little artefacts start showing. http://codepen.io/dipscom/pen/mABPKd?editors=1010
  17. Dipscom
    Anytime. You can try to time tweening the stroke thickness to your animation, that should yield the result you're after.
  18. Dipscom
    Hey , That's a chunky chunk of code, could you simplify that a tad next time? I couldn't even find the element you are tweening without doing a search for the element. From what I can see, that seem to be coming from the thickness of your stroke, reduce the stroke thickness and you will see the so-called offset disappear.
  19. Dipscom
    You're probably better off wrapping the tweens for the circle in a timeline and adding at your desired point.
  20. Dipscom
    Hello, hello! The length of the timeline is 11 seconds, the sum is actually (1+10). Yes, very confusing, right? In this particular example we are using absolute values for the position parameter. The last tween a has a position parameter of 10, meaning, it will be added after waiting 10 seconds. Its own duration is 1 making it a total of 11 seconds. Everything before that 10 second mark bears no influence on the length of the timeline because when adding it all up, it doesn't get to 10 seconds. It would be the same even if they didn't exist. If you were to use relative values for the position parameter or had other tweens that would add up to more than 10 seconds then, it would be a different kettle of fish.
  21. Dipscom
    Hello Pebble, It's me again! And once again you're quite close, just missing a little detail. The pen you have provided is working correctly. The issue is you are trying to correlate a moment in time with two different spans of time. Your timeline is, at the moment of writing, 3 seconds long but your soundtrack is 11 seconds. It is stating the obvious to say they are not the same length. And that's where your issue lies. When divide the current audio time by the total audio duration... aud.currentTime/aud.duration ...you get a number between 0 and 1. The timeline's progress is also a number between 0 and 1. That's why they match nicely when you tell the onUpdate to change the timeline's progress to match the result of that audio division. And is also why your codepen is behaving as it is. At 0.3 of 1 progress at the audio track the timeline will be at it 0.3 of 1 progress but your timeline is only 3 seconds long so it will be moving far slower than you thought it should. In order for the tweens of the timeline to trigger at the precise moments, you need the timeline to be the same length as the audio. http://codepen.io/dipscom/pen/ALrgxB?editors=0011 Does that help?
  22. Dipscom
    Waren, don't you think you are overcomplicating it with all those tweens and delays? Why not use a simple .fromTo() like the one I showed you? Why not use a timeline? Specially if you are loading TweenMax? If you MUST use a function, you could really make it modular like so: function swing(element, rotation, duration) { this.dur = duration || 0.5; this.rot = rotation || 10; var tl = new TimelineLite(); tl.to(element, this.dur, {rotation:"+="+this.rot, ease:Power2.easeInOut}) .to(element, this.dur, {rotation:"-="+this.rot*2, ease:Power2.easeInOut}) .to(element, this.dur, {rotation:"+="+this.rot, ease:Power2.easeInOut}) return tl; } Also, watch your eases, the default GSAP ease is Power1.easeOut, it will not be the best ease in all animations. The Getting Started info.
  23. Dipscom
    Here you go Waren: http://codepen.io/dipscom/pen/amwwZJ?editors=0110
  24. Dipscom
    Hey isseto, Welcome to the forums! It's late here and I am about to go to bed so, forgive me for the little amount of information. Basically, SVG's x and y are not the same thing as GSAP's x and y. The reason your second red circle was not working was because you were tweening it to 0 in both x and y. If you want to tween the x and y values of the SVG, you will need to use the attrPlugin. See bellow. http://codepen.io/dipscom/pen/PGjNzz?editors=1010 Also, if you are going to use the use tag, it's always best to wrap what you want your graphic to be into a symbol tag and put it in the defs tag, like so: <symbol id="circle"> <circle class="st0" cx="200" cy="100" r="54"/> </symbol> Here's MDN's entry on the matter: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use
  25. Dipscom
    Hey Zannen, I had a look into your page but can't see what is it that you mean when you say your gradients don't animate the way they should be. There's just no reference point as to 'what they should be'. What browser are you using? I have looked with Safari, FireFox and Chrome in a Mac. I see all characters with gradients just fine. I've opened you page in a new window and did some profiling. The story the devTools is telling me is that you are cycling through too many things on click then, you seem to be trying to tween a ton of things in one go without using the best tool for the job. SVG, as cool as it might be, is not your best call if you want to create shaded polygons. You'll be better off using WebGL, better yet, something like ThreeJS. The browser can't handle calculating all of those morphing SVG shapes you have flying around and all of the (possibly) hundreds of gradients you have defined there. If you really, really, really want to push with this demo, you will need to scale your operation way down first. Try something with half a dozen polygon shapes and half as many gradients. Then, check performance. If it's ok, scale up. Rinse and repeat.
48
49
50
...
65
Page 49 of 65  
×
×
  • Create New...