Leaderboard

Hi @mgb Welcome to the forum. I think the easiest thing to do would be scrub the timeline with the .tweenTo() or .tweenFromTo() methods. You can use those methods to animate the playhead to a time or label. Maybe something like this? More info: https://greensock.com/docs/TimelineMax/tweenTo https://greensock.com/docs/TimelineMax/tweenFromTo Hopefully that helps. Happy tweening.

You can animate the strokeDashOffset. I wrote about it in this thread: Just a reminder though - drawSVG will deal with some browser inconsistencies for you so I'd recommend a Club membership to make your life easier and allow yourself to work faster. More info: https://greensock.com/club Happy tweening.

Thanks so much, Craig. This made my day. We pushed really hard to get it out before Han Solo. We're expecting a strong opening weekend.

Yep, I'd do exactly what @MindGamer recommended. Simple example: function random(min, max) { return min + Math.random() * (max - min); } function gotoRandomPlace() { //notice the onComplete points back to this same function, so it'll keep going to random coordinates TweenMax.to(...{x:random(-100, 100), y:random(-100, 100), onComplete:gotoRandomPlace}); } gotoRandomPlace(); As for vw/vh units, those aren't supported on transforms because to maximize performance, GSAP bakes everything into matrix() or matrix3d() values which are always px-based (although it does support percentage-based values as well by prepending a translate() or translate3d()). You should be able to relatively easily convert vw/vh on your own, though, like: //converts viewport units to pixels (like "50vw" or "20vh" into pixels) function toPX(value) { return parseFloat(value) / 100 * (/vh/gi.test(value) ? window.innerHeight : window.innerWidth); } //then, in your tween: TweenMax.to(... {x:toPX("50vw"), y:toPX("20vw")}); The only caveat is that since the end result is in px, things won't shift if the window gets resized AFTER the tween finishes. But you could certainly use an onComplete to set those units directly, like element.style.transform = "translate(50vw, 20vh)"; if that's essential for your context. Does that help?

I wasn't sure what part of the code you really needed help with. Its really best to reduce things as much as possible for support issues. I wasn't sure if we should be looking in the mousemove and mouseleave functions too. I agree with MindGamer, a recursive function call is probably best for what I think you are describing. Move something someplace, and when its done move it another place: This thread has some more advanced solutions

There may be a better way to to this, but I'd probably skip the repeat and the yoyo and call a function onComplete. That function would set a new set of random "to" coordinates, and then start another tween which calls the same function onComplete for a new set of randomized "to" coordinates. Etc. Etc. Cool CSS grain btw.

Everything is settled, no more problems to solve, everyone has his own solution? This forum is cooled down near to absolute zero. This is the only community which gives me some reputation and feedback. Don't let it die! Let us group together and flood the SIZMEK support with questions about their ad size calctulation algorithm. Or hit the bonkheads at Google to properly support SVG! Let's make a guild of bannerers!

Thanks for the demo. I tested in Chrome on Mac and could not replicate the behavior you describe. Right-Click brought up the menu. In the video below I drag the grey square drag the link right-click the link to show menu https://greensock.d.pr/pneOCk Is there a particular browser / OS that you are experiencing the problem on?

I was able to do it myself with: tl.eventCallback('onComplete', setState); function setState(){ promise.resolve() }

Thanks for the demo. In cases where you have transformed parents just set your transform values with GSAP and you should be in good shape The post below explains why it is better to use GSAP than CSS in these cases

Yeah, super "helpful". It looks like there's a way to explicitly say `false` to also avoid the warning log, but it might not be worth the effort to work into Draggable. That should really be on Chrome to accept a default value without polluting the console. Thanks for the response!

Actually, it would be totally inappropriate to set the {passive:true} flag on Draggable's listeners because that's essentially promising the browser that we'll never call preventDefault() on the event to cancel the scroll...but Draggable MUST do exactly that. Otherwise, when you press down on something and start dragging, the whole page would move with it. See what I mean? Don't worry about those "warnings" - they're not errors or anything. It's just Chrome trying to be "helpful" but it has no idea what the code actually needs to do or what would be appropriate in our context I appreciate you asking about this, though. Sometimes things like this are really useful for us to hear about.

@smallio You had typo in 'triggerElement'. The triggerHook has value between 0 to 1 that determines where your trigger is going to be. Always a good idea to turn on indicators while developing.

Yep - the animation is usually easy. (especially with GSAP). Most of the work is in asset prep and organization. I did a post over at CodePen about using the pencil to recreate a font for a handwriting effect. It's pretty much the same technique to create a mask except you don't have to be as precise. A mask has to be close and just enough stroke-width to cover the artwork. You may find some of the info useful. https://codepen.io/PointC/post/animated-handwriting-effect-part-1 https://codepen.io/PointC/post/animated-handwriting-effect-part-2 And the pen that goes with it. Happy tweening.

Hello Fellow GreenSockers, GreenSock has a new video: QuickTip: Try Club GreenSock bonus plugins for free See how you can try any Club GreenSock bonus plugin (MorphSVG, DrawSVG, ThrowProps, etc) for free in CodePen . This video tut was made by the Mighty @Carl, please take it away again Carl: If you haven't already done so, please check out and subscribe to the GreenSock Learning YouTube channel for more video tutorials. This way you don't miss out on new features and great learning videos from GreenSock. Happy Tweening!

Geez, where is @PointC when you need him? He usually responds to every question about SVG masking. How about this... http://codepen.io/osublake/pen/4e75c43b04d5f0a91e54b5fda9c73105?editors=0010 To collapse the segments individually, each color would need it's own mask. http://codepen.io/osublake/pen/462717bc2444e5ee0df6989932cceedc?editors=0010

Usually if you don't want those jaggy edges as far as png.. then you must originally save your image png as PNG-32 which supports full alpha transparency. PNG 8 and PNG 24 only support partial transparency known as index transparency. In Photoshop when saving for web: if you save a png 24 with the transparency checkbox checked. Then Photoshop will save your image as a PNG-32 if you save a png 24 without the transparency checkbox checked. Then Photoshop will save your image as a PNG-24 Very important. Only Adobe FireWorks would display Save for Web or save as PNG-24 or PNG-32 So i would go back to the source of your image and make sure it is saved as a PNG-24 or PNG-32. png-8 is indexed transparency meaning its either on or off png-24 is indexed transparency meaning its on or off png-32 is alpha transparency and supports a range of opacity levels from 0.0 to 1.0 Hope this helps!

Peleg, is exactly right and in addition you could put an absolute time as the position parameter. Assuming the wheel tween is the first tween in the timeline and has a start time of 0, you can tell the second tween to start at a time of 0 as well: tl.to($wheel, 5, {rotation: 720}); tl.to($carbodycontain, 5, {scale: 0.5}, 0); OR you can place both tweens at the same label tl.to($wheel, 5, {rotation: 720}, "carGo"); tl.to($carbodycontain, 5, {scale: 0.5}, "carGo"); Couldn't I already do that without using Timelinelite? Well, sure you could have just used 2 tweens outside of a timeline, but your question was very specific to TimelineLite. Does using that still work in reverse? Sure, reversing the timeline will reverse both tweens -- I'd recommend watching the entire video below, as it touches on a few of the ways to position tweens in a timeline http://www.greensock.com/sequence-video/

tl.to($wheel, 5, {rotation: 720}); tl.to($carbodycontain, 5, {scale: 0.5},'-=5'); By adding '-=5' after the vars object you're overlapping the next tween with the previous one by 5 secondes (meaning they will both start at the same time). Also i'd suggest you to read http://www.greensock.com/get-started-js/ you can find some great examples for using timelinelite/max