Jump to content
Search Community

Oscar Rottink

Premium

  • Posts

    53

  • Joined

  • Last visited

 Content Type 

Everything posted by Oscar Rottink

1
2
3
Page 2 of 3  
  1. Oscar Rottink
    I did now change the attributes from the path with: $("svg path").attr("d", "M10 80 Q 95 20 " + testPos.left + " " + testPos.top + ""); I do that within an onDrag function. That moves. Not really naturally but the basics work. Now I use a seperate DIV outside the <SVG> to drag. I guess it's much easier to make a transparant SVG shape to drage. Easier for the positions. I have to play with it a bit more. Math isn't exaclty my thing but there must be some formulas around to change that center point so the feeling is a bit more natural. Not sure if you know Reason but something like this: And no need to help, I google but I need a start and that SVG thing is nice.
  2. Oscar Rottink
    I was just looking into that. And I guess that if you drag one point you have to redraw the curve onUpdate ?
  3. Oscar Rottink
    I was looking if it was possible to animate a curved line between two points so that if one point is dragged the line follows in a natural way. Like pulling a plug from your audio system and place it another place. I know there are possibilities with bezier curves used as path and there is something like 2dphysics. But I want to know if such a thing is possible with GSAP. After long time Google I found an example at http://www.jasondavies.com/animated-bezier/which is pretty much what I mean. If it's possible using GSAP, what are roughly the steps to take? Just found another example: http://codepen.io/ayamflow/pen/HrbKqmight be good start
  4. Oscar Rottink
    I say +1 for auto. And about point 3 at the down side... I think it's not only GSAP that makes people think about that. Like font anti aliasing in desktop Chrome (now fixed a bit more) or flickering on mobile devices which can be fixed a bit on 3D transforms by some CSS tricks. I think it's best to make it the end user as easy as possible. For that matter, I would love some kind of attribute which simply puts a thing on top. And if it's already there, kill me
  5. Oscar Rottink
    I do think it's a bug in Chrome. My version was 38.0.2125.111 m and since it updated after a 'about Chrome' to 38.0.2125.122 m I'm using the latest version now. Still the same though. Firefox on the other hand doesn't have this issue 32.0.3 and after update 33.1.1. It does use a lot of memory but it goes a bit up and down. The Revolution Slider page is hard to see, it loads so much data while being there so it's pretty normal. On the other hand, I couldn't see a Intel, Samsung, Google or McDonalds page to look at. To make the problem even more weird, now my mem use at this page is steady. But closing some tabs and it's only gaining again. I really think it's a Chrome thing. And like I said, I'm only watching because I'm curious. Plenty of memory and my site which uses throwprops etc doesn't have the issue. @David An if you want I can send you a private message with the site I'm working on so you can see how it behaves.
  6. Oscar Rottink
    Hi You are my hero. I need some tweaking but this is exactly what I meant. Like now I spend hours trying and thinking way to complicated. I wanted to send you a private message because this kind of stuff is basic knowledge I think. You were offline so I posted it anyway. I really need more basic knowledge of javascript.jquery. I will send you a preview of what I'm working if this is fixed so you get an idea. All parts of my own business/portfolio/cv site. Which is different
  7. Oscar Rottink
    I feel pretty stupid but I want 9 timelines doing the same but with different numbered DIV's. So I thought it was smart to create them using for... loop. Like: var careerPopupAnim0 = new TimelineMax({paused:true, immediateRender: true}); careerPopupAnim0.set($("#popup0 .popupTop"), {scale: 0, rotationX:-140, x:0, y:0, z: 0}); var careerPopupAnim1 = new TimelineMax({paused:true, immediateRender: true}); careerPopupAnim1.set($("#popup1 .popupTop"), {scale: 0, rotationX:-140, x:0, y:0, z: 0}); Do I tried something like: for ( i=0; i<9; i++ ) { tlName = "careerPopupAnim" + i; var "careerPopupAnim" + i = new TimelineMax({paused:true, immediateRender: true}); tlName.set($("#popup" + i + " .popupTop"), {scale: 0, rotationX:-140, x:0, y:0, z: 0}); } And play them afterwards using something like: $( ".cPoint" ).bind('touchstart mousedown', function(event){ popTxt = event.currentTarget.classList[1].substr(6,1); tlName = eval('careerPopupAnim' + popTxt); tlName.play(); }); It picks a number (from class name) and should play the corresponding timeline. I know it's maybe a very basic javascript question but every time I struggle with this. I tried to use arrays, and other stuff but I just don't get it right.
  8. Oscar Rottink
    Well it's not that I bother that much but I think it's what the topic starter meant. Just went some minutes away and mem-use of this page is over 400MB now. If i look at http://codepen.io/OzBoz/pen/duBFpthe behaviour is normal and mem use stays about 40MB. It's still weird I think. Since the TS used a greensock.com page I just tried to explain it a bit. Curious what causes a forum page to consume 420MB (now) memory. Or for example that draggable page.
  9. Oscar Rottink
    I think my post wasn't very clear so I made a little movie to explain this forum page does the same. And no, I didn't wait for hours but it's odd it adds 150kB every second to the memory use. At least, I think so As you see the memory use keeps rising without doing anything. If you open another tab and switches from the Greensock tab the memory keeps steady. Switching back will raise the memory use again. Like I said before, it's maybe a Greensock thing but not especially a Throw Props thing.
  10. Oscar Rottink
    If I look at the task manager of Chrome I also have that behaviour on this page. Switching to an tab with the ThrowProps example results in that page increasing again, switching back and that Chrome task stops and this page adds KB's again. Maybe not that usefull but I wonder if it has to do something with especially the throwprops plugin.
  11. Oscar Rottink
    I'm not sure if it's a bug but the latest Chrome under iOS 8 (old iPad2) behaves different than Safari while swiping/dragging content. Can be something in GSAP as well but guess it's Chrome for now. If you drag/throw a page while your finger leaves the screen the throwprops plugin detects you left and just does what it's supposed to do. Well, that's for iOS Safari, Chrome does the same except if you leave the screen while you swipe to the top and leave screen while swiping over the it's browser bar. If you do so the draggable/throwprops will just stop moving until you drag within the screen again. It's annoying since with my navigation you have to swipe/drag/throw from bottom to top to scroll the site. Works perfectly if you keep you fingers on screen. I made a little page which shows the problem: http://ozboz.nl/dragger/ It's like the browser bar gets the focus or something. Hope someone can give me a fix (or Google for that matter).
  12. Oscar Rottink
    Hi! Yeah Carl that was the behaviour I wanted. But I see has an even shorter version. Not sure if you believe me Diaco but I actually did played with the stopPropagation() thing before I posted. I really need to get some more basic knowledge of javascript so it's less try and error but more logical
  13. Oscar Rottink
    I think I'm doing something very wrong. Got a large container which is draggable and one inside that container which is draggable. If I drag the small one the other one shouldn't be dragged anymore. If I try to disable the outer one (probably wrong) all drag is disabled (well almost). Created a little codepen here which displays the problem: http://codepen.io/OzBoz/pen/Lrqvk Edit: I think I got it while playing around. Would be nice if someone told me this is the way to do this
  14. Oscar Rottink
    Nice! Always handy to start at the console. At least, with my own programming skills it is
  15. Oscar Rottink
    Guess you saw my reply now but you have to change this line:
  16. Oscar Rottink
    Not sure what browser you use but most of them have a 'developer tools'. I mostly use the one for Chrome. The console gives a good clue what is wrong I guess. What I see is: [blocked] The page at 'https://www.ccmg.com/public/casedesign.aspx' was loaded over HTTPS, but ran insecure content from 'http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js': this content should also be loaded over HTTPS. So the browser blocks content from non-secure servers. Since you load TweenMax from cloudflare you get this problem. Just put the files needed on the same server as the site. Guess that's the easiest solution.
  17. Oscar Rottink
    I'm working on a site which will use like 7 slides in a kind of stair way. I was now trying to use Draggable for my navigation but I want to prevent the user to get lost. Since you can use type:x or type:y I thought I might get somewhere if I could change that type on the fly after Draggable.create. That doesn't seem to work. Maybe someone knows if that's possible or if I better can look for a solution based on a combination of tweens and scrollTo? To be clear an image attached of the layout. Every screen will cover the entire window.
  18. Oscar Rottink
    So I worked at it again.. seemed that eval() did the trick. There is a bug if you go in reverse and the trains get not reset properly but getting there. Updated version at http://codepen.io/OzBoz/pen/duBFp edit: fixed that bug (I think).
  19. Oscar Rottink
    That looks much nicer. I will try to implement that code. For now I was trying to solve something different. I got two knobs. #knob1 and knob2 actually. So I'm trying to extract that number (not that hard) and use it to control the right timeline. Like trainAnim1.play. Definitely my (lack of) code skills but I think with that seperate control function you made (using get) I must get it done since you connect a ID seperately with a function. Thanks again! I'll let you know if it works.
  20. Oscar Rottink
    Thanks! But I wanted to get the train starting on the right if you are in reverse. And what I was trying was this: function trainOneEnd() { if ( trainOne.reversed() == false ) { trainOne.play(0); } else if ( trainOne.reversed() == true ) { trainOne.reverse(trainOne.totalTime()); } } I trashed the repeat: -1. Not sure if that's the way to go but that function will get called at onComplete and at onReverseComplete. It does work like a charm, maybe there are smarter ways I also edited my codepen: http://codepen.io/OzBoz/pen/duBFp
  21. Oscar Rottink
    Hey Diaco.AW, Thanks for your reply. I never created a codepen but for all the first time. But well... it works! I had something really wrong in my normal code causing another tween to reset the timeline. Aarccch. But works very sweet that codepen so thanks! If you are curious: http://codepen.io/OzBoz/pen/duBFp I'm no coder (more gfx guy) so don't kill me. If you want, maybe you can do a suggestion to get the values just on a mousedown and not only on release. I like to puzzle with code though, in the end I figure it out. Thanks again! A question, if it is played it will go ahead to the right. And if I turn the knob the other way it will go to the left. But it will not appear again on the right side. I think I can use two timelines but not sure if that is needed.
  22. Oscar Rottink
    I got a small timeline like this: TweenMax.set($("#train2"), {x: -210}); var trainOne = new TimelineMax({repeat:-1}); trainOne.add( TweenMax.to($("#train2"), trainOneSpd, {x: scrWidth, ease:Linear.easeNone})); When I dial a button with draggable the timeScale will change like this: trainOne.timeScale( trainDeg / 100 ); That works and the values I get from the timeScale vary between 0.1 and 1. The weird thing is that although the animation runs fine while not touching the dial after I select a speed it doesn't run the entire screen anymore. It's like a different x-value is targeted instead of scrWidth. Just not sure what is happening here. Hope someone has some things I could try.
  23. Oscar Rottink
    jamiejefferson Ah now I get it! That was also what Carl meant but your explanation and example makes it clear. Cool! Pretty stupid indeed to remove it once and add it again in a loop. I'll try the your suggestion about isTweening. Much nicer anyway Thanks again Rodrigo, at http://fizion.maakt.nu/fizion/ I do have a version with the absolute values which works. But like Carl and Jamie said I'm doing some pretty stupid stuff as well. You guys are a great help! I'll keep this updated if I get somewhere I want to be, just have some ideas for my own site like this (rough sketch) http://ozboz.nl/troep/fiz14.jpg and it's fun to try to get it realized and learn a lot.
  24. Oscar Rottink
    Thanks Carl for you explanation. Like I said, I'm no programmer but I'll dive into your stuff tomorrow. I think I get the part of the tweens added many times. And I'm a curious person so I'm sure I'll find out the best way. I'll don't get it that when I use absolute values it does work since the script (how bad it may be programmed) stays the same. But I'll test something tomorrow, there is no hurry. I once was good at Flash (version 4 haha) and well.. things changed. So I don't blame anyone but me. But I'm that guy who doesn't like to program a lot but wants some animation. I just want to learn but I hope you guys also learn from a user like me (not the best one). And I'm not sure about your theory that every click adds another onclick event handler. But I might be wrong. As far as I know it does it one time and after a click it disables the click even to prevent multiple clicks. At http://fizion.maakt.nu/fizion/ there's the stuff I have now with all relative numbers changed to absolute. Same script but it does work. So why does it work? And no, you are way better in programming anything but I just don't get it. Just the same script. I asked another fellow to look at it.. but it really seems the script gives a float back were it should be an integer. And that's pure common sense, += just ain't what it is. I just changed the numbers to absolute. It works now so I don't complain but I think it's not really like it is supposed to be.Besides my programming skills which are rubbish.
  25. Oscar Rottink
    Thanks Rodrigo! I'll try that. I see that you have two div's per card. I was trying that at first but now I smuggle and swap the div's content at 90 degrees. edit: works if I use whole number instead of +=90 but well, that's not what I expect. So I leave the example as it is.
1
2
3
Page 2 of 3  
×
×
  • Create New...