Leaderboard

I see your issue. The <a> element needs to be `position: relative` and you need to tween that element's `left` property. Currently you are tweening the button that is inside <a>. Refer to css docs for when "left" can be used:

No we don't have any quota for questions, so feel free to ask questions whenever you get stuck. Just it makes it easy for us when someone reads/follows tutorial when we suggest something. So if are getting stuck on new issues or something is complex for you to understand everybody here will be happy to help. And sometimes it is easier to ask for help rather than banging your head for hours, so don't worry about it. As for your question, you are using a tween rather than timeline. You can always set it's 'paused' property to true so it won't auto play. Your fromTo tween isn't playing because you aren't calling that fadeIn function anywhere in your code. If you haven't seen already you should go through these videos which will help you a lot, https://www.youtube.com/watch?v=sXJKg8SUSLI https://www.youtube.com/watch?v=tMP1PCErrmE https://www.youtube.com/watch?v=QO1mLs96krY https://www.youtube.com/watch?v=ZbTI85lmu9Q https://www.youtube.com/watch?v=8ETMjqhQRCs

You can simply scroll to certain element and don't need to calculate offset. As to answer why it is scrolling randomly, you are trying to scroll to the offset of that slide. So when your 2nd slide is in center, it's offset is 0. So when you click on second link again, scrollTo plugin scrolls to 0 which is first slide. If you click on 3rd link, it doesn't animate because offset of 3rd slide is same as where current scroll is. Plus if you click too quick the whole animation gets messed up because now you are referencing offsets while slides are at random positions.

In this example the animation always returns to the start position when you press the stop button. Perhaps you can do something similar on over() out(). If you need something different please provide a reduced test case that we can work with.

@msolari Another issue that puzzled me is, you are defining a 'tlcA' timeline which basically has no duration. So as soon as page loads, the 'tlcA' onComplete callback is called which animates the main animation. For this animation you don't really need to use any callbacks, you can do same thing by using one timeline. Though I don't see any benefit of setting opacity here. Well, just to add a little more, it also helps us a lot when demos are simple and all ids, classes and variable are have descriptive name. Again, feel free to ask any questions.

My first thought was that DoubleClick might be automatically injecting code into your banner after you've delivered it that may have issues with your own code, so the actual trafficked ad is getting code added to it that you didn't create or QA. This is that typical code that gets injected (see below). You may have noticed this code if you've ever looked through the source of a banner ad online. You may want to ask if the actual trafficked ad had this code added or see if you can find one live and check the source and QA from there. Perhaps mobile is picking this up differently than desktop or there is some issue with that code and the template. <script type="text/javascript"> (function() { var relegateNavigation = ''; var handleClickTagMessage = function(e) { try { var eventData = JSON.parse(e.data); } catch (err) { return; } if (eventData.isInitClickTag) { if (eventData.clickTags) { for (var i = 0; i < eventData.clickTags.length; i++) { var clkTag = eventData.clickTags[i]; window[clkTag.name] = clkTag.url; } } else if (eventData.clickTag) { window.clickTag = eventData.clickTag; } relegateNavigation = eventData.relegateNavigation; } }; if (open.call) { window.open = function(open) { return function(url, name, features) { if (relegateNavigation === 'parent') { var message = {'clickTag': url, 'isPostClickTag': true}; parent.postMessage(JSON.stringify(message), '*'); } else { var args = [url, name]; if (features) { args.push(features); } open.apply(window, args); } }; }(window.open); } if (window.addEventListener) { window.addEventListener( 'message', handleClickTagMessage, false); } else { window.attachEvent('onmessage', handleClickTagMessage); } })(); </script>

Not sure about Pixi and Animate CC, it likely has to do with the setup and how both work with each other. Never crossed my mind to use the two together but I'll be looking into it. You could simulate that effect within Animate CC without having to use Pixi. It's not (currently) possible to natively animate the native filter effects in Animate CC since they've disabled that for performance reasons (see this link, Filter and Color Effects section). However, like that doc recommends, if you make a separate clip with the filter applied to the object, you can tween that clip overtop of the other clip (fading the blurred clip in and out), to simulate a blur effect. Sounds like the animated mask was a separate issue (it is possible, and easy, to do that with Animate CC using the timeline -- just make a keyframed mask layer with no tweening). As far as creating an animated mask via hand-coding with DOM elements, I guess you could use SVG for the mask and create a sequence of masked clips that you turn on and off. Otherwise, I don't think it's technically possible to do animated masks with actual DOM elements unless you're just using rectangles and square masks, you're back at using canvas at that point, and might be a fairly complex task to do if you're not familiar with it. it'd be cool to see some sort of library / plugin to make doing this specific task with canvas easy (cough cough). Agree that you should learn to hand-code too and make that part of your arsenal but don't throw away your timeline skills! There's a reason why apps like After Effects exists

Thank you very much, it worked well and achieved the look that I wanted!

Hello @Joooonatan and Welcome to the GreenSock forum! Here is a video tut of the position parameter that @PointC advised Happy Tweening! :0

Here is how you can do it. _gsTransform object is attached by GSAP on any objects that it animates, it lets you access all transformation properties.

Sorry, the engine doesn't and really can't work like that. An onComplete, by design, is fired when a tween has run for its full duration, not when a target value is reached. Consider an Elastic ease where the target value is met 4 or more times BEFORE the tween is finished: It would be very strange if an onComplete fired the instant the target value was reached. Same thing with a bounce. Also developers often rely on the precise timing of an onComplete firing so that they can make certain assumptions about the state of their animations before certain events happen. Assume you had 2 separate tweens that moved 2 boxes across the screen and you wanted them both to move down after 5 seconds TweenLite.to(".red", 5, {x:200}) TweenLite.to(".blue", 5, {x:300, onComplete:moveAllDivsDown}); function moveAllDivsDown() { TweenLite.to(".red, .blue", 1, {y:200}); } It would be very strange if some "outside force" set the ".blue" element to an x of 300 prematurely and then it called that tween's onComplete and forced both elements to move down before 5 seconds had transpired. -- I think in your case the best solution is to just have your own checks in place using onUpdate, onStart or whenever necessary.

transform values like x and y are relative to the objects natural position. If you have an item with left:100px and another with left:200px, their x value is 0. If you give them both an x of 100, they will move 100 pixels to the right of their current position landing at 200px and 300px respectively. The solution for you is to give all your balls position:absolute. This will in effect put them all in the same place with x:0, y:0. You can then place them in a row and space them however you like (I use a TweenLite.set()) and then if you tween them to the same x,y values they will end up in the same spot

I haven't looked at all the examples in depth but setting right:0 on the element will make it grow from the right when you increase its width. .mask2 { position:absolute; right:0; } The trick is just putting it in the proper place to begin with.

@friendlygiraffe whenever you are animating any element, make sure to set it's position. Otherwise you will see a lot of unexpected behavior. @craftedbygc When you are animating width, transform origin doesn't really matter. It is only taken in consideration when you are doing any transforms like scaling, animating skewX/skewY etc.

Hi, like this one Best regards Mikel

Welcome to the forums, @Kerry. The main problem is that your SVG artwork isn't set up correctly - those look like lines but they're actually filled shapes. In other words, instead of there being a single path running down the center of each line (stroked), you've got outlined shapes (almost like thin rectangles that are joined). That's why it seems like yoyo:false isn't working - it's just that the circles are following the outline of the shape which goes down and back up again on the other side. It's not yoyo-ing. Once you clean up the SVG artwork so that it's simple stroked paths, I can help you with significantly reducing the amount of code necessary to do the animations. You can use a function to do the repetitive work. As for the offsets, you probably don't need to set any offsets at all - just set this on each circle: TweenMax.set("#circle-1, #circle-2, #circle-3, #circle-4", {xPercent:-50, yPercent:-50, transformOrigin:"50% 50%"}); The xPercent/yPercent make it shift over and up by half the width/height of the shape itself. The transformOrigin just ensures that transforms take place from the center of the shape. Hope that helps.

And after writing all that, I noticed you were checking for a media query. That is not the same as a resize event. You should use a media query listener instead. It will only fire when the media changes, and not on every resize. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries https://docs.microsoft.com/en-us/microsoft-edge/dev-guide/css/media-query-listeners

I don't have any data to back this up, but I'm pretty sure that the only people who resize a browser window are developers. On top of that, resizing a window is somewhat limited to Mac users. Yes, you can resize stuff in Windows, but the UI is designed to snap the window into certain sizes, making resizes a lot less common. And then you have mobile devices, where resizes only happen when you rotate the device. Depending on the browser and device, events like resize, scroll, keydown, mousemove, touchmove, and pointermove will fire constantly, so you never want to do any work in those event handlers. Move the work to another function, and limit how often that function can be called. A common approach is to throttle or debounce the event, but there are problems with those approaches. With throttle, the last call may never happen. And with debounce, it may delay the call for too long. For most animation and UI related stuff, using requestAnimationFrame (rAF) is probably the best approach. That will ensure that any work you do will happen on the next screen render. Not too soon, not too late, just right. Here's how that might look. var requestId = null; window.addEventListener("resize", function() { if (!requestId) { requestId = requestAnimationFrame(update); } }); function update() { // run your update requestId = null; } The trick with using requestAnimationFrame is to make sure you don't call it more than once per animation frame. Doing so will add any additional calls to a queue, creating all sorts of problems. That's what the if statement inside the resize handler checks for. When you call requestAnimationFrame, it returns the id of the request. The first id will be 1, the next id will be 2, and so on. If you know your truthy values, every number except 0 will evaluate as true, so using the id is the same as setting a flag to true. When update gets called, do your work, and then set the requestId to null, allowing the next resize event to call requestAnimationFrame. If you're wondering why I'm using the id instead of a true/false flag for the if statement, it's because sometimes you may need to cancel a request. To do that, you have to pass in the id into cancelAnimationFrame.

Hi @kailash I think a better approach might be using the technique @PointC shows here. It doesn't require using the same color as the background.

Hello @OODNX and Welcome to the GreenSock Forum! As a rule of thumb, Its best to not use display:none on SVG child elements, and just set the SVG child elements visibility attribute or use the CSS property visibility property. Since the spec dictates that any SVG child element that uses CSS display none will cause that element to not be created in the render tree. So that will make sure you follow the SVG spec and have cross browser compatibility, when working with SVG. SVG display: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/display SVG visibility attribute: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/visibility CSS visibility property: https://developer.mozilla.org/en-US/docs/Web/CSS/visibility Happy Tweening!

Cool animation! I believe the issue has to do with the fact that Microsoft browsers won't accurately report getBBox() on an SVG element that's display:none, thus the transformOrigin isn't able to get set properly. So all you need to do is flip-flop these two lines: TweenMax.set([usabox, japanbox, ukbox], {display:"none"}) TweenMax.set([germanybox, usabox, japanbox, ukbox], {rotation:0}); The way it's shown above, you're setting display:none and then a transform property, so Microsoft inaccurately reports the bounds. See what I mean? Also, I'd strongly recommend updating to the latest version of GSAP, 1.20.3 as of now. Your codepen is using the "latest" which ironically is significantly out of date because CDNJS has refused to support "latest" for quite some time. We pleaded with them, but they just won't do it. Frustrating, I know. Happy tweening!

I think Sahil's way is quite good. When you get new values, rebuild all the animations. For performance and optimization reasons tweens record starting and ending values so that they don't have to keep checking on repeats / restarts. It would probably be good to throttle or debounce the resize event as they can fire many times a second. In the real world I don't think users spend a lot of time resizing their browser windows when they are viewing a site. Below is a technique I haven't tried before and its a bit crude. Basically it taps into the ModifiersPlugin which allows you to hijack the values a tween was going to set and lets you modify them. You can run the "normal" values through any function or operation you like. In the demo below I multiply the progress() of the tween by the dynamic "end value" which allows you to change the end value mid-tween by clicking the button. Read more about ModifiersPlugin here: https://greensock.com/1-19-0/ I don't think is the best solution for everything... but it gets the job done in this case.

Put your onComplete callback there. Same thing. The duration is based on all the tweens. If you're having issues, please make a simple demo so we can see what the problem is.

Sure, you can snag that value from the tween instance's "ratio" property. Does that help?

@OSUblake thanks for sharing! I like that article from Mozilla on The whole web at maximum FPS: How WebRender gets rid of jank. But she is wrong to think that a flip book would require 60 pages for each second, since traditional animation flip books by trade use 24fps or 30fps (29.97fps). Mostly a rough flip book can use 10-15 pages per second (fps) and still look silky smooth. But i understand her comparison with web 60fps, great article though That's pretty funny about z-index. I hate it when z-index is misused and abused like that

Thanks for the demo. It's usually recommended to avoid animating margin as it triggers layout changes in the browser. https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ https://csstriggers.com/ I did not see your demo stuttering, but I'm running some older iOS software. I think animating x or xPercent (uses css transforms) might do better. Please test this:

You can tween the progress() of a timeline and apply and ease for some pretty cool effects. In the demo below it will appear that the entire timeline slows down at the end although the same stagger settings are used for each element If you want to randomize the time between each animation you would do better to create separate timelines for each container (using a loop).

Hello @friendlygiraffe This issue is more of a CSS rendering issue than a GSAP issue. The reason you are dealing with this is basically CSS. Since you decide to use position offsets like position absolute. Then as a rule of thumb you should always set a default z-index on elements with position absolute and fixed. Most rendering issues have to due with missing CSS properties or wrong use of CSS properties! Even though z-index is a CSS thing, CSS is what drives rendering. And even though this is a stacking context issue, it is fixed by z-index on the right element. Since stacking context is dictated by the CSS used on the page, and that is why CSS affects stacking context. That is why the fixes and what defines a stacking context, is CSS That is why when you added the z-index:1 to #background_exit, it solved your issue. You not only are using position absolute, but also a transform on that same element. So that means the element will have a new stacking context regardless of z depth which is what z-index is. You either have to use the z-index:1 or give that same element a new stacking context with a simple CSS of translateZ(0px) and that will solve your issue as well. More about stacking context here. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context About z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index Also make sure that anytime you use position offsets like fixed or absolute, you must also have a parent that has position relative to make sure your elements are positioned the same cross browser. Without position relative the browser wont have that reference point, and then you will get different rendering behavior. This way your absolutely positioned elements are positioned relative to their parent. Never trust the body element as your main relative element for position offsets, otherwise be prepared for bug city cross browser. And this also could have been resolved by changing the order of your HTML markup. Happy Tweening

@WilliamBay btw you don't need callback in this particular situation, you can use a master timeline and labels to keep things simple. Also, you might be able to use custom ease to achieve same affect as throbber. Plus, you can set transformOrigin only once and setting it to '50% 50%' works instead of using absolute values. Finally, I don't know if it was intentional use or not, but when you use fromTo tween, you are animating particular property from certain value passed in first parenthesis to a certain value passed in second parenthesis. So in this situation you don't need fromTo tween. Neither do you need yoyo property, instead of jumping to start position while repeating yoyo animates it in reverse.

Had you gone to jQuery plugin school, you would know that setting the z-index to 9999 is the best way to make sure your content stays on top of everything else. If that doesn't work, try 99999. And if that doesn't work, just keep tacking on another 9 until it works. You'll eventually find that sweet spot, and land on a number that is large enough to put it on top. Don't actually do that. There is no need for a number that high. The z-index value only applies to the stacking context an element is in, so think of it as a local or relative value. It's sandboxed. If you're doing animations, there's a good chance you're creating stacking contexts. Figuring out what stacking context an element belongs to might require a little work. You have to walk up its tree and find the first element that matches one of the scenarios found here. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context Or you could use the Layers tool in Chrome / Opera. It will show you the reason a stacking context was created for an element. But what is a stacking context? A lot of people seem to be confused by the concept, and that's because they are looking at it from a CSS perspective. It's really not a feature of CSS. It's related to rendering. Think of a stacking context like a layer in a traditional cel animation. What gets rendered to the screen is a composite of all these layers stacked on top of each other. These layers (stacking contexts) are used to improve performance (transforms, will-change) or to correctly render stuff that has to be drawn in multiple steps/passes (opacity, filters). If you've ever used canvas and had to draw something to an offscreen canvas, a stacking context should make a lot sense because it's the exact same thing. Knowing that the browser draws stuff on different layers, you should be able to see why an element's z-index is limited to the layer it's drawn on. How do you make an element drawn on one layer appear over an element drawn on a layer above it? You can't. If you want to learn more about rendering, @Carl sent me a really great article. It's about how a new renderer coming to Firefox is going to work like a 3D game engine. It's a really interesting read, and does an excellent job explaining the whole rendering process, so it goes over stacking contexts. https://hacks.mozilla.org/2017/10/the-whole-web-at-maximum-fps-how-webrender-gets-rid-of-jank/

You're an absolute legend, works great. I'm starting to get the hang of this I think. Greensock is really a game changer, and as I am finding out this community is great too. Thanks so much @OSUblake! No more using plugins for me!

Hi @Cptgreen, Welcome to GreenSock Forums. This could be a way ... Happy tweening ... Mikel

It is css property 'transform-origin'. // You can set it on current Tween TweenMax.to('.slide', 1, {rotation: '+=360', repeat: -1, transformOrigin: '0% 100%'}); // Or you can set transformOrigin using set externally, // which basically shows that if you change origin once // it will affect all tweens on that element not just for 1 particular tween TweenMax.set('.slide', {transformOrigin: '100% 100%'}); TweenMax.to('.slide', 1, {rotation: '+=360', repeat: -1});

I don't know what you've been reading, but you can reverse TweenLite, TweenMax, TimelineLite and TimelineMax instances. It sounds like you might be expecting GSAP to behave more like a CSS animation. GSAP animations are not based on the original values of an element, like what's defined in a style sheet. When you create an animation, it will record the start and end values to animate between. Unless you're using something like a fromTo tween, the start values are going to be based on the object's current state. So if you create an animation and immediately reverse it, you're telling the animation to go back to the start values it just recorded, which is why it stops. The object is already at those starting values. So to reverse an animation, you should create it outside your event handler.

With the right stagger amount and position parameter you should be able to achieve pretty much anything Each container staggers in with a little overlap of previous container Each container staggers in after the previous one fully builds

Maybe this is what you are looking for, you can use '+=360' so instead of animating to 360 it will animate to 360 plus whatever current value is.

Looks like you've set up your function so that the duration of the speed is 100 - speed, thus once you exceed 100, you've got a NEGATIVE duration which is kinda impossible Also, all your tweens are going to a rotation of 360, thus when it hits that value, no subsequent tweens will do anything because it's already at the destination value. It's like saying "animation from 360 to 360" (nowhere to go). Make sense?

Sorry, this all seems related to how you are using ScrollMagic which I don't really use and we don't support. From what I do know it sounds like you may want to look into how pinning works with ScrollMagic http://scrollmagic.io/examples/basic/simple_pinning.html If you have any questions directly related to the GSAP API we will be happy to help.

Hi @msolari You're giving the element conflicting dimensions. It's position is fixed, so setting the width and height to 100% will fill the screen. But then you're telling it that every side has to be 5vw away from the edge of the screen. The browser had to make a choice, and it went with ignoring the right and bottom values. So to fix it, you don't need the width and height. There's one problem though. You set the width and height in your CSS, so you need to unset those values. TweenMax.to('.one', 1, { top: '5vw', left: '5vw', bottom: '5vw', right: '5vw', width: 'unset', height: 'unset', className:"+=fixed", ease:Linear.easeNone });

Below is a demo that creates 1 timeline called boxes that moves and rotates boxes at a constant (linear) speed. I create another timeline that immediately sets the timelineScale of boxes to 0.5 (half speed). 1 second later it tweens the timeScale of boxes to 2 to make the change more noticeable. You will see the animation smoothly speed up after 1 second. If you edit the pen you can change the showTimeScaleTweening value to false (line 1) to see how the boxes timeline would play normally.

Hi and welcome to the forums, As Sahil pointed out what you need to do may work. We don't officially support or add any special code for other languages, but you can try whatever you want for free on CodePen before purchasing a Club membership. Just fork Sahil's example and add your own code. You can get CodePen-safe versions of all the bonus plugins here:

Yeah, its always best to avoid conflicting tweens that fight for control of the same properties of the same element. You can add overwrite:"none" to the second tween so that the first tween doesn't get killed and will still play on restart() of the timeline tl.to(obj, 1, {x:200}) tl.to(obj, 1, {x:0, overwrite:"none"}, 0.5);

Hi @zadvorski I'm not seeing any lag either. What browser are you using? And do you see the lag on other sites besides Codepen? See how it behaves inside an incognito/private window with your dev tools closed. You might have some kind of browser extension that is interfering with it. And Codepen demos will run a lot faster when viewed in full page or debug mode. BTW, I really like your demo. I noticed you were doing inverse scaling, and I've been experimenting with an ease that will let you animate inverse scale without having to recalculate it on every update. And with FLIP animations, I know it's pretty much gospel that you're supposed to use getBoundingClientRect, but that's not correct. It will fail if your element has transforms on it. It's going to report the incorrect bounds. That's why you can't interrupt your animation. The fix is to calculate the bounding box of the element using element.offset{Top,Left,Width,Height}. I reworked your demo, and slowed it down so you can see the difference it makes.

Constructive criticism. jQuery is a crutch, and might be holding you back. Try to do all your demos without it. You'll quickly notice that it's not needed in 99.9% of the stuff you do.