Leaderboard

Hi, For all Banksy fans here the version a la GreenSock. It's a fork of a pen by Lee Martin, who reacted super fast. I like the art of Banksy. But I have not taken his original work. Otherwise this pen would definitely be hacked. Have fun ... Mikel

Brilliant .. i love how Bansky keeps sticking it to the art establishment

Hi @cjstage, This is specifically due to rotating on an axis ... and I believe is an accurate representation of what is happening. Imagine you have two shapes each containing points [1, 1] and [-1,-1] (i.e. they are on the same plane). If one were to rotate on the X or Y axis, an edge of that would come forward on the Z axis while the opposite edge would go deeper into the Z axis, appearing behind the other shape. But ... if you moved the one rotating back enough on the Z axis (or the other forward enough on the Z axis) ... it wouldn't cross in front of the other's Z position (0).

Nah, you just created a really awkward scenario where you've got a zero-duration timeline and a callback at the VERY beginning. I'll spare you the lengthy explanation, but here's a much better setup: new TimelineMax({repeat:-1, delay:3}).add(func, 3); Or: new TimelineMax({repeat:-1, delay:3}).call(func, null, null, 3); Or: new TimelineMax({repeat:-1, onRepeat:func, delay:3}).to({}, 3, {}); Or: new TimelineMax({repeat:-1, onRepeat:func, delay:3}).set({}, {}, 3); (I could go on with more options, but you get the idea)

That wouldn't surprise me because Chrome and Safari don't work the same way. Safari doesn't seem to optimize a lot of stuff, as seen here. Safari is webkit, and Chrome is blink. Layout and paint can hurt performance, and Safari has to do a layout and paint for pretty much everything. Also, try adding will-change: transform; to your CSS. Just be aware that it can cause other issues, particularly if scale is involved. https://greensock.com/will-change

Yeah, that type of feature could cause a lot of performance problems. Imagine someone does a loop through 1000 elements, adding a tween for each to a timeline...a callback like your suggesting could fire 1000 times in that loop alone. Yikes! And as @Carl indicated, there are many ways a duration could change (children, children's children, etc.), so it'd have to bubble up properly...another potential performance issue. I just don't think something like this belongs in the API. If I were you, I'd probably just structure my code accordingly so that I either funnel timeline changes through a particular function that runs this check for me, or use an onUpdate on that timeline that watches for its own duration changes - that way, things would be batched since the onUpdate is typically only called once per tick. Of course that'd be delayed by one frame, so in the above example with 1000 loops, you wouldn't know about the duration change until the next tick/update. I suspect that'd suffice for most cases, though. If you need it on the same tick, I suppose you could batch it by TweenLite.ticker.addEventListener("tick", yourFunction). In short, there are solutions for this that you could implement via your own code structure rather than relying on an internal callback in GSAP. I realize that's not what you were hoping to hear, but we really, REALLY try to keep performance optimized in GSAP since animation is the single most UX-sensitive part of an app. Thanks for being a "Business Green" member!

Awesome! That worked! I set ::-webkit-scrollbar-track using a CSS variable, and then tweened the variable with GSAP per your Codepen above. 'Works perfectly. Scrollbars now looking very sexy in dark mode : ) Thanks!

Unfortunately, [as far as I know] pseudo elements aren't accessible in the DOM, so GSAP can't get to them. The browser literally doesn't offer any hooks. The only way around this that I've seen is to use something like CSSRulePlugin to animate the CSS rules themselves. See https://greensock.com/docs/Plugins/CSSRulePlugin Another option is to use CSS variables which GSAP can handle as well. See https://greensock.com/css-variables

A delayedCall() creates and returns a TweenLite tween. You can create a reference to that tween and control it like any other with play(), pause(), resume() etc try: var delay = TweenMax.delayedCall(4, function() { drawLogoWhite.reverse() }); //when the user pauses your video use delay.pause() //to resume the delay use delay.resume();

Hello @mattchaptr and Welcome to the GreenSock Forum! It looks like whats is happening is that for some reason when scrolling there is a body class being added to the body tag adding the class lock-scroll which has a CSS property overflow: hidden. Then it removes the scrollbars and adds it again and then removes it again, all within a second upon first scrolling. That is why it does the side ways jank jiggle In your style.css .. on line 1 since i believe the file is minified, so you will need to find what is adding the below CSS in your code when scrolling. / * this is being added by your code when you begin scrolling, causing that jiggle jank */ body.lock-scroll { overflow: hidden; } Let us know if you find what is adding that overflow hidden .lock-scroll class on the body class ? :)

Hi and welcome to the GreenSock forums, I'm not familiar with Angular 6, so I'm not sure what (if any) restrictions it will impose. However, at its core, all ScrollMagic is doing is using the scroll position to change the progress() of an animation... usually a TimelineLite that has many nested timelines (scenes). Please read the posts from @OSUblake in the thread below. Be sure to look at his demo too

I am SVG technical support so that would just result in a recursive loop. ? Yeah, I like your idea of animating the stroke width. It looks less jarring than suddenly changing the linecap or the autoAlpha. Thanks.

Have you tried calling SVG technical support? That's just the nature of how strokes are drawn. The way I've dealt with that in the past it to animate the scale or stroke width from 0.

You're thinking of the DirectionalRotationPlugin, which is baked into the CSSPlugin. Try using it explicitly. https://greensock.com/docs/Plugins/DirectionalRotationPlugin TweenLite.to(obj, 1, { directionalRotation: { rotX: "20_ccw" } });

Thanks for the demo. 2 things I think for what you are trying to do you want to create your Draggable using the scrollLeft property of the outer scrollbox you were using a pretty old version of Draggable. I can't really wrestle with flex box right now, but here is a rudimentary setup that probably gives the behavior you want. Feel free to add in your own flex-box settings.

GSAP doesn't do any rendering, so it's probably not related to GSAP. Does it perform better if you reduce the size of the window? A retina display has A LOT of pixels to render. That's like 4k or 5k, and requires good hardware to run at a good framerate.

Sorry, there isn't such a callback in place. We try to keep the API as fast and lean as possible. Like you noted there are many ways that a timeline's duration can change without directly going through the timeline, like when you change the duration of a child. This would probably mean that every time you change some property of tween the engine would have to check if that tween had a parent timeline and then assess whether that change affected the duration of the parent and then fire off an event. I can definitely see how such a callback would help you and maybe there is a possible solution. I'm not entirely sure of the impact on the entire engine, but I'm sure @GreenSock will weigh in if there is more to add. We always appreciate suggestions for improving the engine!

I can't access your site, so I can't see what's going on. GSAP doesn't do any rendering, so I don't see how this could be related to GSAP. Does your div contain SVG or complex fonts/text? That can be slow. Scrolling can be a bottleneck, and ScrollMagic isn't a GSAP product. https://github.com/janpaepke/ScrollMagic If you need something to be pinned, consider using CSS sticky positioning instead. https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning

Hi guys, I just want to contribute with my findings in case others ran into this. I had been struggling getting GSAP's Draggable to work with Next.js and have finally found a solution. Next.js does Server Side Rendering (SSR) so pages rendered on the server had issues loading the GSAP NPM modules. Please note that pages worked just fine client-side. ERROR: import TweenLite, { _gsScope, globals, EventDispatcher } from "./TweenLite.js"; ^^^^^^ SyntaxError: Unexpected token import To resolve the issue with GSAP not being transpiled, I installed next-plugin-transpile-modules npm install --save next-plugin-transpile-modules Then I modified/created my next.config.js file according to their instructions on their NPM page. https://www.npmjs.com/package/next-plugin-transpile-modules Draggable finally worked after that (only if throwProps was set to false and you did not import ThrowPropsPlugin). However, if using a plugin like ThrowPropsPlugin.js it would display an error message like: TypeError: Cannot read property 'defaultView' of undefined Around line 515 of the ThrowPropsPlugin.js file, I changed it: //FROM THIS: _doc = _gsScope.document, //TO THIS LINE I FOUND IN DRAGGABLE: _doc = _gsScope.document || {createElement: function() {return _dummyElement;}}, After that, I just did "npm run dev" and the pages rendered on the server side were fully functional as expected. Hopefully this helps somebody out! Guys at GSAP, is there any harm in changing that line in the ThrowPropsPlugin? If not, would it be a good idea to update the plugin and other plugins for others who purchased the membership with GSAP so they don't run into this issue that I encountered?

I have a bunch of paths that need to start and sometimes end at 50% 50%. They also need to have a round linecap. Starting at either 0% 0% or 100% 100% works well of course, but the 50/50 line starts with that circle sitting out there. I've been getting around this by setting the linecap to either 'round' or 'butt' as needed immediately before and/or after tweening, but I wanted to make sure I wasn't missing something easier. Happy tweening.

Thank you very much OSUblake. I was able to reproduce the same output in HTML. I had to stack a couple of divs in order to get the same result. A bit tricky

I'm guessing that your animation might be a from() or staggerFrom() and perhaps the starting values are the same as the existing values. Unfortunately, I can't look at your full production site. However if you make a super simple reduced test case (publicly accessible) that doesn't include your protected images and stuff specific to your client then we can take a look. This reduced test case just needs enough code to replicate the issue... a single div that you populate with different text, split and animate. If you can set that up using CodePen... fantastic. I'm guessing you can probably fake the ajax calls and just call a function that simulates new text coming into the title. Perhaps something as simple as a single H1 element and 2 buttons that change the text and trigger a new animation.

This is great, work like a charm, thanks for the super fast answer !

Yeah, sorry, it's actually a problem that was introduced in React 16.5 because they added an onclick handler on the root element, thus Draggable is trying to respect that as a "clickable" element (so not draggable). The fix should be as easy as adding this to your Draggable: dragClickables:true We're planning to make that the default in the next release of Draggable anyway, FYI. Does that help?

Firefox is the only browser that supports 3d for SVG, but it's very limited. You can wrap your SVG in a div, and animate the div instead.

Which div are you referring to? I looked at the site, and everything is jumping around and flickering when I scroll. One problem is that the overflow on the body keeps changing, but I don't know if that's the problem you're talking about.

It depends on what you're doing. Animations that repeat can be difficult to manipulate from a master timeline, like here. If you need play/pause, you can do this. function pause() { for (var i = 0; i < myAnimations.length; i++) { myAnimations[i].pause(); } } function play() { for (var i = 0; i < myAnimations.length; i++) { myAnimations[i].play(); } } Check out this article. Lot's of good stuff in there, like tweening a tween (#1) and exportRoot (#6). https://medium.com/net-magazine/7-hidden-gems-of-the-greensock-animation-platform-4fb71389f6ca https://greensock.com/learning-gems MDN is kind of like the official documentation for web related stuff. I'm sure there are more in-depth tutorials out there, but this is a good start. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryListEvent https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

If you're asking of Draggable can make things draggable, yes I have no idea what software that video is showing or if they're using GreenSock's Draggable. It's compatible with pretty much any browser.

The values are all calculated on-the-fly and totally resolution-independent so yes, you can get as high-def as you want from the engine itself. However, browsers are typically limited to around 60fps (not always), so if you're expecting to get things running consistently at 100fps that's unlikely. It sounds like maybe you're not talking about runtime, though, so you'd be fine. You don't need to change anything about the ticker. CSSPlugin does round some px-based values to whole values because browsers only render them that way (so this is a performance optimization). You can disable that if you prefer, on a per-tween basis by setting autoRound:false. Does that help?

Hi @TradingBo You don't have a master timeline, at least not in the sense that you think you do. Your functions are only returning the very last timeline created in a loop. You would need to add every timeline created in a loop to an array, and return that array. But don't be like this dude when it comes to master timelines. I see far too many people waste far too much time building master timelines that serve no actual purpose. See if this helps out.