Leaderboard


Popular Content

Showing most liked content on 12/31/2017 in all areas

  1. 3 points
    Hello dear friends, Kind regards Mikel
  2. 2 points
    And here's an old DrawSVG demo from Angular 2 that might be of help.
  3. 2 points
    Tweens usually aren't ideal for user controlled animations, like with moving an object around in a simulation or game. Not saying you shouldn't use a tween, it's really hard to say without seeing what's going on, but a physics based animation might be easier to control. If you want to use a tween, @PointC suggestion of using the ThrowPropsPlugin might work well... And if you're interested, here's a good intro to physics book. I don't know if it will apply to what you're doing, but there is a chapter that goes over buoyancy. http://a.co/cVI6Qww
  4. 2 points
    Nice job @maxxheth This was my way of giving of everyone a soft introduction to creating animations in a more object oriented way using jQuery. If you want to take it a step further, the pattern I'm using could easily be adapted for ES6 classes.
  5. 2 points
    Hi @multivac If I understand your question correctly, you just want this repeating background animation and foreground animation to loop seamlessly using DevTools? If that's the case, I'd recommend making your repeating background animation a regular tween rather than an infinitely repeating timeline. You can then create the other foreground animation as a tween or timeline. So maybe something like this? I'm not 100% sure I understand your question/desired outcome so that may not be the exact solution you need, but hopefully it provides you with some ideas. Happy tweening.
  6. 1 point
    Mikel, Happy new year! Wish you and GreenSock community great 2018!
  7. 1 point
    That is really weird requirement, I doubt there will be anything built in for situation like this because callbacks are made for it. You can also retrieve '.totalDuration()' of foregroudTimeline and use a delayedCall to stop repeating timeline. var tl = new TimelineMax(); tl.add( backgroundTimeline, 0 ); tl.add( foregroundTimeline, 0 ); TweenMax.delayedCall(foregroundTimeline.totalTime(), function(){ backgroundTimeline.pause(); }); If you still don't want to use callbacks then you can do something like this, instead of "trimming" you can change the number of repeats on repeating timeline like this. Though after writing demo and this answer I feel like it is totally unnecessary which makes me curious what could be reason to not use callbacks.
  8. 1 point
    We don't have any tools that really do that directly -- detecting scroll direction and triggering appropriate animations. However, this demo from @mikel that started with @Chrysto and then got tweaked a bit by @OSUblake looks like it has the basic functionality in there: link to original post:
  9. 1 point
    Using ThrowProps as PointC suggested is a great way to match the current velocity at the start of a new tween and then slow down as you meet your end value. It sounds like you will need another tween though to start moving in the opposite direction. I think another way of looking at this is to consider that instead of tweening the x or y position of your sub you could tween the velocity directly. //if you have something like ship.velocity = 30 //you can tween TweenLite.to(ship, 2, {velocity:0}); I suspect you may have a vx and vy value that gets changed based on user input. My point is you can tween those values to change the speed and direction of the object that is updating its position based on those values.
  10. 1 point
    I'm not sure if it will help with what you're doing, but the ThrowPropsPlugin has a track() method that will allow you to track velocity. https://greensock.com/docs/Plugins/ThrowPropsPlugin Happy tweening.
  11. 1 point
    Hi @RichardC Is it just the ease for stopping the sub you're after? // this ease just creates a forward<->back-motion var stopEase = 'M0,0 C0.124,0 0.394,0.151 0.484,0.162 0.656,0.182 0.838,0 1,0'; function _Stop(speed) { TweenLite.to(div, 0.2, { ease: CustomEase.create("custom", stopEase), x: '-=' + 300*speed }); } _Stop(0.5);
  12. 1 point
    Well problem is that when you animate element above target and reduce height, it offsets scrollTo's target location. So assuming you don't really need to do animation as it is not visible anyway, you can use following method so you won't see any jumps. Otherwise you will just have to constantly update target using onUpdate callback so you won't see any jumps, but still it will have some awkward behavior depending on height reduction and position of elements.
  13. 1 point
    GSAP has default ease of Power1.easeOut on every tween maybe that is causing this unexpected behavior. You can set ease on tween as, TweenMax.to(object, 1, {ease: Linear.easeNone}); Or you can set default ease globally as, TweenLite.defaultEase = Linear.easeNone; EDIT: Initally I thought you were using GSAP in blender to control animation but I guess it is other way around and you are importing blender animation into Babylon. In that case, I think you will be able to post a demo which will be helpful. But I am not sure if you will get answer right away as our Champion member is enjoying holidays.
  14. 1 point
    Thank you so much @Sahil and @OSUblake . You people just saved my job. The whole idea of letting the responsive design go really helped me to make the website responsive and all I did was just rearrange certain things and animation. Thanks again.
  15. 1 point
    Just to clarify TweenLite includes the Power eases, so you don't need EasePack for those. The default ease is Power1.easeOut so even if you don't define an ease your animation should slow down at the end and not speed up. Like PointC said a demo would really help us clear this up. Definitely sounds like something strange is going on.
  16. 1 point
    Hi @hemmoleg Welcome to the forum. I see you're using TweenLite so perhaps you didn't load the EasePack? Another thing to check is if you've put the ease in the correct place in your tween vars? Here's a simple pen with a few different eases. My pen loads TweenMax which also loads the EasePack, but if you're loading TweenLite only, you need to load the EasePack too. TweenMax loads: TweenLite TweenMax TimelineLite TimelineMax CSSPlugin AttrPlugin RoundPropsPlugin DirectionalRotationPlugin BezierPlugin EasePack If you have other questions, a demo is most helpful in getting you the best answers. Hopefully that helps. Happy tweening.
  17. 1 point
    Hi @Johny13 Are you sure the element you're targeting is actually scrollable? You can get the current scroll position of an element like this: var body = document.querySelector('body'); console.log(body.scrollTop); I tried adding a div parent with 'overflow:scroll' and set it as the scroll container in the tween, and it worked just fine as far as I could tell. Edit: In Codepen it's the parent element of the body that gets the scrollbars.
  18. 1 point
    I think I see what the problem is - GSAP doesn't natively interpolate "vw" or "vh" units (though it likely will when 2.0.0 is released, but that won't be for a few months most likely). It can set() them directly, but interpolating is different. In this case, the inbetween values are converted to px. So here's a solution that gives you the same result but just does the conversion for you at the right time: Is that what you're after?
  19. 1 point
    Hey everyone! So I realize this thread is really old, but I was messing around with Blake's implementation of the jQuery / TweenLite animation toggle last night and ended up rewriting it in vanilla JS in case anyone's interested in using that instead of jQuery for whatever reason:
  20. 1 point
  21. 1 point
    Hi @dgu, Welcome to GreenSock Forums. I'm not sure what you mean: a general or dynamic change of opacity? Here generally via CSS (line 24): A CodePen of your case would be helpful ... Happy tweening Mikel
  22. 1 point
    I'm sure it can be done alot better, but just added a function for clicking the circle to make it jump back to its original position. Click it again to animate it.
  23. 1 point
  24. 1 point
    Ya I have updated the demo, I am using snap property of draggable and setting throwProps to true. The snap is calculated as follows, It takes the current rotation value as parameter. (Because draggable type is rotation) You first divide the value by 90 because 360/4 is 90 as you have 4 states. Then multiply it with 90. The resulting value is used to snap the draggable. I hope that you spend time understanding the code, also it will be good idea to visit the docs of draggable. Most of the stuff is pretty straight forward to understand there. Though one problem, the current version of draggable has some issue with calculating the snap and sometimes element jumps. This problem doesn't happen with version 1.20.2, following thread has a link to beta preview file see if you can download it otherwise use 1.20.2. Edit: You can use this.rotation to get current position of draggable using onThrowComplete callback.
  25. 1 point
    It rotates, but it's transform origin is center and you have changed it's border radius so rotation is not visible. In order for it to rotate as per that circle you need to "tell" it how to do that. In following thread, there is a demo that does same thing as you are doing. It uses svg but you can replace it with html easily.
  26. 1 point
    Hi chapolote Adding to Sahil's answer... You can use the onComplete event to trigger a new timeline and use that as a "repeat" where you initialize it with new values.
  27. 1 point
    Tweens cannot be changed once they are defined. You will have to regenerate the tween when it completes or you can use modifiers plugin to achieve same thing but changing too many values will make your code complex because you will need to write callback function for each property. Following threads discuss same ideas, you can find examples for both approaches.
  28. 1 point
    You don't have to say sorry, it's alright. It will just give you unexpected results when you switch to latest version or some of the features won't work in old files, so best is to check which files you are using.
  29. 1 point
    CommaClub is a real thing. You just have to follow the rules. 1st Rule: You do not talk about COMMA CLUB. 2nd Rule: You DO NOT talk about COMMA CLUB. For anyone missing the joke -- check out one of my all-time favorite films: 'Fight Club'. It's the perfect feel-good movie for the holidays. Merry Christmas everyone!
  30. 1 point
    To the members of the CommaClub, I pay you great respect and I am always fascinated by the commitment and the outstanding solutions ... Congratulations @Dipscom. May more follow ... Kind regards Mikel
  31. 1 point
    Here is the demo, you can add more conditions to determine what is closest number while dragging using onDrag, onThrowUpdate callback. Also, how do you create your demos? I think I pointed out to you previously as well that you were using really old version of everything. Your current demo was using 1.17.0 which I guess is older than 2 years. Always make sure you are using latest files, easiest way is to google 'GSAP cdn' which will show you links from cdnjs to all non-club files. To get links to club files visit this pen https://codepen.io/GreenSock/pen/OPqpRJ Which still points older files by version or two but still better than using year old files.