Leaderboard

Hey GreenSockers, This is my 2,000th post so I wanted to take a minute to commemorate the occasion. It’s so much fun to hang out with all of you. As I’ve said before, this is truly a unique place on the web. The community is so friendly and smart and I learn a ton by reading through different approaches to problems and reverse engineering all the clever answers and demos. Thank you all for sharing your knowledge. A special thanks to @GreenSock and @Carl for putting up with me for 2,000 posts. Shout-out to all the other mods @Jonathan, @OSUblake, @Dipscom, @Sahil, @Rodrigo, @Shaun Gorneau, @Acccent, @Visual-Q, @mikel. You are a terrific group of people (and one A.I.) and I’m inspired by all of you. I hope my little SVG tips & tricks have helped some community members save some time and prevent a few headaches. I’m looking forward to continuing this never-ending journey of learning with the entire GreenSock community. Happy tweening. - Craig

There isn't really anything in the API currently for that. I suspect you could create your own AnimationObject class and assign it an animation property which would then reference your timeline. Your AnimationObject would have its own play(), pause(), resume(), reverse() methods. The AnimationObject would have custom logic that tracks the state of its animation and be responsible for firing events when the state changes. So instead of calling tl.pause() directly you would go through your AnimationObject like var myAnimationObject = new AnimationObject(tl); // then later if you want to pause tl you would do myAnimationObject.pause(); When you call myAnimation.pause() the pause() method will check to see if the AnimationObject's animation (your tl) is paused, and if not it will know that the state has changed and fire the appropriate event(s) This is just a very simplistic overview. It will take a bit of work to code it for real and wire it all up, but its entirely possible.

It is going to be little complex but doable. In following demo I am playing an animation by detecting which section is active and calling animation for it. Its not enough though. You will need to create an array of animations so you are able to use index and call different animations for particular section, somewhat similar concept but not exactly as in following thread. So, Step 1, determine which section is active. Step 2, call animation for that section by determining index and use that index to play animation from an array. But that's not enough to reverse animation, so Step 3, Use onReverseComplete callback to trigger the change of section. See if that helps. I won't be able to post complete demo at the moment. But I might work on something similar in couple of days so I will post a simple demo for you.

You can do that by using multiple scenes for different sections. But it can get complex with too many unexpected behaviors. I will say avoid using from tweens unless you know how the immediateRender works, check the following video. You can use to tween instead to avoid complexities. For example the following demo works without any issues, Then following demo with from tweens shows some unexpected behavior, it will make sense once you watch the video.

I see that behavior on Windows too, but you can fix it with: allowContextMenu:true More info: Happy tweening.

Wait...you're a moderator? I barely noticed you were here, Craig. (Ha...ha). Seriously, though, congrats on 2000 posts! What a testament to the help you've offered the community around here. Wouldn't be the same without you. Love the codepen! Start working now on the 3,000 post celebratory codepen. Hurry up; can't wait to see what you put together. But no fair adding a bunch of posts like "I agree" and "Well said".

Just an additional note. You can also use a mask instead of clip-path if you like. You'd just need to make sure all the elements that make up the mask are filled with white. (With a clip-path, the color doesn't matter at all.) If you had a desire to have a stroke or gradient as part of the mask, you'd want to choose mask over clip-path. Happy tweening.

If you don't want the user to be able to native touch-scroll, simply set this on your Draggable: allowNativeTouchScrolling: false And yeah, it's really annoying that CDNJS stopped supporting the whole "/latest/" thing years ago. We begged them not to, but to no avail. They absolutely refuse to, so that "/latest/" stuff is actually a few years old. Sorry about any confusion there.

I think this thread can help. Happy tweening.

How about something like this? Happy tweening.

Yes, you can add an ease to the vars object of those methods. Something like this: tl.tweenTo("reverseStop", {ease:Power4.easeOut}); When you tween a timeline like this, you're creating a linear tween that scrubs the playhead to/from times/labels. You can add in/out eases to this tween in the vars. Sometimes it's preferable to remove the eases from the actual tweens on the timeline and make them all Linear.easeNone. You then set the eases in the scrubbing tween like I did above. Hopefully that helps. Happy tweening.

Hi Sahil, just wanted to say thanks. This really helped me out!

I agree

hmmm... yep that does still try to load a pop-up. We'll have to see if @GreenSock has any additional thoughts or ideas.

Hi GameSite, Had a look at the image you provided. This really shouldn't be happing. Can you give the URL to the website? Can have a look. Cheer, KP

You are using really old versions of Draggable and TweenMax. I don't have Apple devices to test it but check following demo with latest versions, it should work as this problem hasn't reported by anyone else. To get latest files for your codepen demos, use following link for free to use files and codepen demo for club plugins, https://cdnjs.com/libraries/gsap

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 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() }

Ha ha. Well, the forums are very much alive and kicking...just not quite as much activity in the banner-specific one, that's all. Maybe because when you use GSAP in your banners, things go so smoothly that everybody is happy. No need for questions

Sure, this should be relatively easy if your car is also in the same SVG (so that everything can scale together). MorphSVGPlugin has a pathDataToBezier() function that could help a lot: https://greensock.com/docs/Plugins/MorphSVGPlugin/static.pathDataToBezier() If you still need some help, just whip together a simple codepen with your assets so we can see what's going on and more quickly diagnose any issues. Happy tweening!

You and @Jonathan pretty much covered what I was going to post. Basically that SVG is downright crazy!!! I've never seen such a complicated SVG before. Graphically it doesn't look complicated, but it took Illustrator and Inkscape around 10 minutes to load it. What's weird is that you can draw it immediately to a canvas element without any problems or delays. 630kb is the file size. The size in memory will be MUCH higher than that. If your image is 3000 x 2500, and each pixel is 4 bytes... 3000 * 2500 * 4 => 30,000,000 => 30MB On a HiDPI display like a phone, your SVG would be even higher than that. If the device pixel ratio is 3, then the browser would be drawing your SVG at 9000 * 7500. 9000 * 7500 * 4 => 270,000,000 => 270MB!!! And now your phone is out of vram! You'll probably need to break your image up into smaller images, and only display what is visible with a little buffer around the edges. Pretty much the same thing that tile-based games do. https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps