Leaderboard

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.

Well, Jack beat me to it Here's the reason: Happy Tweening!!

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.

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

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

Sorry, we don't offer free video/Skype support. Feel free to post your questions here and we'll do our best to 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?

Hi @AmooPedram. Welcome to the forums. Can you be a bit more specific? GSAP doesn't do video - it's for animating things that JavaScript can touch.

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

Yup, that did the trick! Thanks a bunch, guys!

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.

Hi OSU, Apologies for the belated reply! This all makes a lot more sense now, have since done homework looking into the .getScreenTCM() method and has helped immensely. Thanks for the great support

Hi @Dash_Cool. Welcome to the forums! These forums are dedicated to GSAP animation, not jQuery. Are you using GSAP? Your post title mentions jQuery, that's why I ask. GSAP has no problem animating group elements in SVG. It would be best if you created a reduced test case in codepen so we can see what you're trying to do. See There are many examples on codepen too. Craig has a ton: https://codepen.io/PointC/ and Chris Gannon is a wizard too: https://codepen.io/collection/XzxeNJ/ as are most of the moderators around here. Happy tweening!

Hi, Thanks for the demo. I think you want to use addPause() here tl.addLabel('step1') .to('.red', 0.5, {width:250}) .addPause() .addLabel('step2') .to('.blue', 0.5, {width:450}); you use pause() to pause a timeline at any time. The way you were using it you were pretty much pausing it as the timeline was being created. addPause() inserts a pause into a timeline at a specific point in time. more info here: https://greensock.com/docs/TimelineLite/addPause()

When you set the transform origin for an SVG element with GSAP, it should look like this when you inspect the style. element.style { transform-origin: 0px 0px 0px; } The transform origin on your .au site looks like this. element.style { transform-origin: 0px center 0px; } If I manually change the eyes to use transform-origin: 0px 0px 0px; it works correctly. I don't know why the transform-origin is incorrect, but that's the problem. Make sure you're using the same SVG and code between both sites. I noticed the code in your .au file didn't have the same number of lines as your .uk file.

Just thought I'd share some banner examples from my day-job https://www.andyfoulds.co.uk/banners/html5_banners/ Reckon every one has GSAP to thank to some extent! Andy___F

You don't need any clickTag for Adwords. Adwords makes the entire banner clickable by default.

Hi @silid You can't set the frame rate for a timeline, just for a ticker. There is a way you could manually update a timeline at 50fps, but that requires some work. Can you make a demo of what you're trying to do? There might be a better way to do the conversion.