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

47
48
49
...
65
Page 48 of 65  
  1. Dipscom
    Displacement filters are very expensive CPU-wise, more often than not, you don't want them in. You can create the filter and mask/clip it, yes. Morphing SVGs is not cheap either when it comes to CPU. I can see the image has a texture to it - watercolour-ish - and I'd imagine you would want to preserve that. In all honesty, the cheapest technique I can think of (CPU wise) is to create a series of sprites and use SteppedEase to flick thru them. You can use a series of PNGs or even SVGs, if you feel you can recreate the image with vectors. You should be fine to animate that without jank. It also shouldn't be too heavy in KB as you can always optimise the image and cache it. To answer your question - yes, MorphSVG would be easier than dispacement - in a way. But, I'd say a sprite sheet is what you really want here.
  2. Dipscom
    Hi tilvalhall, I would say, ultimately, it will boil down to what style you are after. Is it cartoon? Realistic? Is this boat running in a fixed specific path? There would be several ways to achieve it. The more realistic, the harder (displacement maps, colour channels) but if the end result is a cartoon loop, you provably will be ok with tweeninig (scale, position) of simple elements. This is a pen I made a while ago - there's no wake around the boat but there is a layer of waves, the same principle would apply. http://codepen.io/dipscom/pen/adjGNp
  3. Dipscom
    Better. I must have stumbled in one of the old flash pages by accident then, as I usually just type greensock.com/docs straight into the url bar.
  4. Dipscom
    Is this happening to someone else? Some admin/mod around to double check that?
  5. Dipscom
    Work has been keeping me away from new things for a while and I am trying to move to a new place. Between the two there's very little time left. But I have been toying with the new tools a bit, it's just that the wonderful world of banners always lag behind the technology. Officially, most places are now up to GSAP 1.18 so, I have to sit on my hands for a while otherwise I'll end up implementing stuff that is not supported :'( Anyways, to the case in hand. I'll leave the first pen as is because it showcases the different variations of the test. One uses a simple div, one tweens the rect element with xPercent, another the actual svg with xPercent, another one tweens the rect with x position and percent values and the last one is tweening the rect element with pixel values. The red colous shows where the DOM element is, the black square is the rect element. The fact that you say they are all animating in different ways goes to show that something is amiss. The animation is the same in all of them. What is different there is whether the tweening is being done with percent values, with/without transformOrigin or the rect element or a DOM element. Bellow i've isolated just one example - This is tweening a rect element of an svg with yPercent and transformOrigin. The red is the SVG element, the black is the rect element. In Chrome and Opera, the rect is moved according to the transformOrigin defined - in this case "center bottom" to the 0,0 of the SVG element. This does not happen in Safari and FireFox. I have only checked this in a Mac but will suspect something similar happens on the PC. http://codepen.io/dipscom/pen/66e5d7a1e613ff5dc7f23bbe8cac813f
  6. Dipscom
    Sunday night, I could be doing so many things other than breaking Jack's toys couldn't I? Well, I am that boring sometimes. Sorry Jack. So, the combo that caused the weirdness is CustomBounce + percentage base movement + transformOrigin in a shape element of an SVG. As you will see in the pen (at least in Chrome), the element gets moved to the 0,0 position according to the transformOrigin you define. Not something desirable if you're trying to squash an element.
  7. Dipscom
    Hi bchen5803, Welcome to the forums! It is a shame you are having difficulties getting started with GSAP. Hopefully this initial struggle will not taint the potential it offers your. It is always best to have your code somewhere we can see all aspects of it and that we can fork and change. CodePen and JsFiddle are pretty common sites that people create their reduced case demos. In the video bellow, Carl explains how to easily create a CodePen: The reason it's always best to post a link to an editable demo over to pasting code in the thread is that we can see the whole context. Otherwise, we are all shooting in the dark. For example: There appears to be nothing wrong with your HTML or you JS but what about the CSS? I have no idea if your .logo class has a position property set to something other than the default value (preferably either relative or absolute) - And that, would prevent you from seeing any animation. See if setting your .logo's position to relative helps. Failing that, come back with a little reduced case showing what you want to achieve.
  8. Dipscom
    Hi Renna, Since I haven't got a slideshow myself, I only adapted yours to make it work. http://codepen.io/dipscom/pen/NbPpBO?editors=0010 Again, the issue you were having was simply that you were calling a method that did not exist. Based on your setup (there are several ways to build a slideshow), all you had to do was to kill the delayedCall() that you were using to trigger the animation. It was just really one line. Having said that, I did go over your code and made a few changes to have it more flexible and easier to change timings/ speed. Go over the JS and CSS as there are some subtle differences. And I've thrown in a play button as a bonus
  9. Dipscom
    Hey meesrttn, The customEase and customBounce will be available for anybody who's got an account - Like the one you have - In other words, they are going to be free when officially released. You can play around with it using those links for now until the official release is made. But, there are ways of faking the same thing if you can't wait a bit.
  10. Dipscom
    Nice! Well done Jim! Have a cuppa after solving that. And remember to tackle one problem at a time
  11. Dipscom
    Right, now we're talking. Those pens really help us. I'm halfway into something else right now but I will have a look at it in a while and give you some suggestions. Do bear in mind that won't be the only way to achieve a result.
  12. Dipscom
    Oh and, by the way, welcome to the Forums! As some of the others say here: "Happy Tweening!"
  13. Dipscom
    Do you HAVE to use TweenLite? If you can, use TweenMax. It will make a world of difference, together with CustomEase and CustomBounce, your work is cut by 90%. A fork of your pen: https://codepen.io/dipscom/pen/NbPxQJ?editors=0010 Custom Bounce starter pen for you to play with and read more detailed info: http://codepen.io/GreenSock/pen/pEEVoV Would that be what you are after?
  14. Dipscom
    Hi RennaNoëlle, Welcome to the forums! Your error stems from the fact that nextSlide does not have a method called stop(). In your code nextSlide is a simple function that does not return any values or creates any methods. The tween is not being assigned to any variables and thus, does not present any route where you can call GSAP's .stop() method. Jonathan's probably going to swing by and give a much deeper explanation of the reasons, I'm just not as eloquent as he is. I can kind of see what you were trying to achieve and it would work if you had set your code up a little different. We usually encourage people to provide a reduced case example of what they're trying to achieve so that we can tinker, see the issues and easily make changes on the code to offer solutions/alternatives. If you feel so inclined, please take a moment to put together an example, we'll be more than happy to tinker and give you suggestions. Here's Carl with a little tutorial on how to quickly put a CodePen together:
  15. Dipscom
    Hello Jim! Apologies as I have been away from here due to "real life". I know, it sucks how it sometimes gets in the way of us nerding off here... Anyways, I was having a hard time understanding why you wanted to use media queries so much and why the solution I provided wasn't good enough. I now get it that what you were referring to was the buttons in their "small" version - at the corners. You needed to adapt their sizes to accommodate different screen sizes. Don't think we ...(well, I. Because this is child's play to Blake. He's part cyborg. His brain is a CPU system and the rest of him is biological)... don't struggle with this too. I have banged my head on the wall for hours today before bitting the bullet and abandoning the media queries completely. Since we're this deep in the rabbit hole and handling so much with JavaScript, you might as well handle the media queries bit of it with JS. I have updated my pen with a bit more logic and it is working to me. Have a look: http://codepen.io/dipscom/pen/dpqWay?editors=1111
  16. Dipscom
    Are you guys based in the UK? I'm in the middle of a contract now but if you guys are in this side of the pond, I would be interested in hooking up.
  17. Dipscom
    One upped again... One day, Blake, one day. -.-
  18. Dipscom
    Damn I wish I could come up with self-chalenges like that, they sound fun. If I may interject here... Yes, the answer to (what I understand to be) your question is more general JS related than it is GSAP but I don't think you will be crucified by that. If anything, you've taught me a new trick today. Your issue is scope but not in the way I read in your description. The scope does not need to be changed in this particular case. What is missing is for the 'box' variable to exist inside the callback function. Just pass it in with the arguments and you're golden. Like so: http://codepen.io/dipscom/pen/ZBzqRa?editors=0011 I would only not advise on this setup because if you leave the tab that you currently have the animation in and come back a while later, the animation will jump forward in time looking like you're fast forwarding it. I will assume its a side effect of using a set timeout to create a bunch of timelines that affect the same set of elements. A better idea, would be to create one timeline that repeats itself but updates the contents of the boxes at a specific point in time.
  19. Dipscom
    Yes, exactly. It will behave as any other timeline method with the position parameter as well. Here's the actual entry for the .call() in the docs: http://greensock.com/docs/#/HTML5/Sequencing/TimelineLite/call/
  20. Dipscom
    Hi Venn, I am afraid you can't add a infinite looping tween to a timeline and have other tweens play after it without some tinkering. That is because the looping tween, is infinite thus, everything after that will wait forever before playing. And forever can be a very long time. You can accomplish the same effect by separating the looping tween from the actual timeline and have the timeline control it. One way is what you are doing, with absolute position parameters. You can also use labels: TL .to(TweenA, 1, {x: 10, repeat: -1}, "Start") // Because there are no "Start" label defined, GSAP will create one here. .to(StuckTweenB, 1, {x: 10}, "Start") // This will start at the same time as the tween above. .to(NotStuckTweenC, 1, {x: 10}, "Start+=1") // This will start one second after the other two. You can .call() a function that fires that tween: TL.call(function() { TweenMax.to(TweenA, 1, {x:10, repeat:-1}) } .to(TweenB, 1, {x:10}) .to(TweenC, 1, {x:10}) Bear in mind that the timeline has no control over this tween and its duration will not be taken in consideration (hence why it works). You can separate the tween and timeline into functions, like Waren has suggested, or you can create separate timelines one main and one for the repeating tween, controlling the repeating one from the main timeline. Amongst other strategies. Really, there are a few options, it will boil down to what you want to achieve.
  21. Dipscom
    Hey Jim, I am not too sure if you need to set so many things with JavaScript. I am not following why you would want to control the image's aspect ratio with JS. Images have intrinsic image ratios so, you really don't need to be handling that with JS, CSS wizardry will do the trick. I can see why you would want to control how large the container div gets relative to the screen size but other than that, the feeling I am getting is that you might be going a bit too deep into this rabbit hole.
  22. Dipscom
    Ah, good catch Blake. Now let us all pretend I did that on purpose to test you, yes? And we can say you conquered the challenge. Deal? Nothing to do with the fact that I completely missed that the return would exit before the break statement.
  23. Dipscom

    Circle arrow animation

    Dipscom replied to venn's topic in GSAP

    Hey venn! Do you think you can whip up a little CodePen for us? That way we can tinker with it and offer suggestions.
  24. Dipscom
    Hello, hello! May I butt in? Not to say much obviously, because you have Blake. And anyone who's got Blake got no problems. I have been following this discussion and got somewhat interested in what was going on. So, I decided to have a stab at it following the base that Blake had given. That, was a few days ago. Much has happened and you two seem to be getting along famously. In any case, I wanted to share how I approached the idea. I thought it would be better to just create Tweens, rather than timelines. Dunno, just because there's nothing chained here so it just felt more natural. And, because, at the time that I started this, you were creating and destroying a load of timelines all the time. Well, enough of rambling. Codepen bellow. I will change the visual of it at some stage, I am quite happy with the code I ended up with so, if nobody's against it, my pen will be left public. http://codepen.io/dipscom/pen/dpqWay/?editors=0010 ps: Jim, have a look, it might help you with your responsiveness as it will take vw and vh as units without having to keep recalculating extra stuff.
  25. Dipscom
    Cool! Well done Axe. I'm happy that you've found the solution.
47
48
49
...
65
Page 48 of 65  
×
×
  • Create New...