Leaderboard

That's actually not a bug. And it demonstrates why we strongly recommend that you always apply transforms via GSAP instead of trying to mix CSS and GSAP... The browser always reports the calculated values as matrix() or matrix3d() which are inherently ambiguous when it comes to rotational data in particular. A scaleX(-1) results in exactly the same matrix as a scaleY(-1) rotate(180deg) or rotateY(180deg) or rotateY(-180deg) or many other options. GSAP must pick one. Your particular scenario is interpreted as scaleY:-1, rotation:180. Again, that's not a bug - it's a perfectly valid parsing of the matrix that the browser provides. If you set the value via GSAP, it always knows EXACTLY what you meant. Plus it is more performant (it can skip the parsing of the computed value on subsequent animations). More accuracy, better performance, and total reliability. It's fine if you set things in CSS if you want (to avoid an initial flash of unstyled content), but immediately set() them with GSAP too. Like: TweenMax.set(element, {scaleX:-1}); Make sense?

Create a function that is more descriptive. tl.to(".box", 1, { x: 100 }) .add(timelineFill(5)) function timelineFill(duration) { return TweenLite.to({}, duration, {}); }

Happy to help... and so was everyone else by the looks of things

Yep, @PointC and @Carl are right, of course. Also, one minor note: you're linking to the "/latest/" CDN directory which (strangely) is way out of date because CDNJS refused to support it years ago. So I'd recommend linking to /1.20.4/ (the actual latest version)

You have an error in your code. You've added a listener to the bar0 element, but the go() function doesn't exist. bar0.addEventListener("mouseover", go); Other than that, your selectors are fine and the SVG elements should animate correctly. You could also target the elements like this: TweenMax.set("#bars rect", {transformOrigin:"center bottom", scaleY: 0.01}); Happy tweening.

It was supposed to be, if ( target.classList && (target.classList.contains("map-card__header") || target.classList.contains("map-card__close")) ) { target = target.closest('.map-card'); } Why it still worked then? Because in your demo if dataset.mapCard is undefined then animation would reverse. That is used to stop event bubbling. What was happening was, you were listening to click event on map card and close button so when you clicked on close icon, your timeline would start reversing but then even would get bubbled to the parent that is map card and it would again play your animation so you must have felt that close doesn't work. In following demo animation is set to play or reverse when you click on '.container' but all three elements are listening to click event. So 1. if you click on edge of container then animation will play or reverse. 2. If you click on edge of wrapper then nothing will happen because event is getting bubbled twice 3. but if you click on center then animation will play or reverse because event is getting bubbled three times. So lets say animation is reversed, it will start reversing then playing and again reversing but you will only see it getting reversing because everything happens at the same time.

It's probably not a good idea to keep asking for the size of something 60/second. jQuery .width() and .height() uses stuff from this list. https://gist.github.com/paulirish/5d52fb081b3570c81e3a Maybe something like this.

Indeed, there is! It think you are correct in your investigations as it makes sense, behaviour-wise. To prevent that all you would need to do is check if the timeline is active (the playhead is moving) with the aptly named isActive() method. Then it is just a matter of amending the overlap by the desired amount: let observer = new IntersectionObserver(function(entries, self) { entries.forEach(entry => { if (entry.isIntersecting) { let overlap = '-=0.3'; if(tl.isActive() === false) { overlap = '+=0'; } tl.to(entry.target, 0.5, { autoAlpha: 1 }, overlap); self.unobserve(entry.target); } }); }, config);

Here's a second run at this with @OSUblake's invaluable assistance moving the resize calculations into an event handler outside of the modifiers. I realized, dufus that I am, that the original had a whole bunch of extra calculations of the object's size that were unnecessary all you had to do was calculate the parent's size. So here's my revised effort for Responsive Transforms Based on Parent ( in this case the Window). Note I added in the divide by 100 in the function to allow for the tween x and y to treat 100 as 100% percent of the parent/window size. Otherwise 1 would represent 100%. It can certainly be removed to reduce the calculations if you want to work with values of 0-1 instead of 0-100.

I was on a mission to win 7 days straight, had to give up all hopes when I saw Blake online today. Looks like I will have to start over again someday. Still 2 more to go, if anybody has 10 questions please post them today when none of mods are online.

You can go to the home page and hit the download button or you can bookmark this page: https://cdnjs.com/libraries/gsap Happy tweening.

I'm also here to pad my stats. @Sahil is charging towards his membership in Comma Club and @OSUblake came back last night with one of his answer tornado sessions so I'm just trying to keep up with the cool kids.

Yup, PointC is exactly right. To see if animations worked I just got rid of the unnecessary code (eventlistener and circles) and put in a to() tween for the bars. You should be good to go.

Well, the end result will be the same. Creating canvas textures is nice if you don't want to make different versions of an image for different resolutions i.e. image@2x.png, image@3x.png. Raster images do not scale up nicely. console.log(window.devicePixelRatio || 1); On a normal desktop monitor, that will be 1. On a new phone, that will probably be 3, which means everything is being scaled 3x. Run these demos on your phone in debug/full page mode. The first one won't be that sharp. The second one should look really sharp. Adapting for resolution means more pixels have to be processed, so there will be a performance hit.

Hey @swampthang Here's a fork of your demo using the .bezierThrough() method that @GreenSock mentioned. It's usage can be a little confusing, but it can make some nice looking motion paths.

A lot of camera animations are interpolated on every frame, similar to what I show in this thread for mouse movement.

Just reference a function. The first parameter is the index, the second is the target. TweenLite.to(".myObject", 1, { x: myFunction }); function myFunction(index, target) { //do some calculations with target return something; }

Maybe it's time for name change PointSVG?

Yep, exactly. If you change the timeScale of a timeline, it would of course affect all of its children (including delays) because the parent playhead is literally moving at a different pace. It would be really weird if the delays weren't affected because that would totally change their placement in the timeline (their startTime()) in relation to each other. That would be sorta like if you moved a <div> to new coordinates, but you only wanted its children to move without factoring in their padding or margin values. See what I mean? But yeah, you can totally get the effect you want, you'd just need to adjust each of the delays or startTimes accordingly, as @Sahil mentioned. Here's a function that might be helpful: function timeScaleSkipDelays(tl, timeScale) { var children = tl.getChildren(), ratio = timeScale / tl.timeScale(), i; for (i = 0; i < children.length; i++) { children[i].delay( children[i].delay() * ratio ); } tl.timeScale(timeScale); } Then you can just use that function to change the timeScale and it'll automatically alter the delays to compensate. Is that what you're looking for?

One more pen for the concept. I animated the size of the parent container so you can see how it works responsively without having to resize the window.

Hi @Hugh Nivers you are right it looks like CodePen gives /latest if you do a resource search but it gives the /1.20.3 if you use the Quick Add drop-down https://greensock.d.pr/zOhm9x

Also - if you want to use Club plugins on CodePen, this is another one to bookmark.

Fantastic, that did it! I can't begin to thank you enough with helping me through this process. I'll be updating the following Codepen so that anyone who should stumble across this can see how it all came together. Many thanks!

Hehe. I could never beat Jack at his own game.

AS3 > MP4 does a great job - no interactivity of course but for hiRes with lots of items animating concurrently it works better than the SWF. Shame it doesn't work with canvas but I've found that it doesn't take much to convert JS to AS3 and export from the FLA anyway.

Here’s another handy little SVG technique for the GS community. I was creating some infographics for a landscaping client and needed an interesting effect for a slider so I went with parallax viewBoxes. I hooked mine to a draggable, but you could tween on button clicks too. The trick is that you’re always showing the same size viewBox for each SVG, but the start point is offset for each one. In my demo, the SVG is 12,000 x 1,000 and the viewBox for each one is 2000 x 1000. The starting viewBox for each is (5000 0 2000 1000). That centers each one on the SVGs. At the extreme left position of the draggable the viewBoxes start at (foreground:0, middle:1500, background:3000). At the extreme right position of the draggable the viewBoxes end at (foreground:12000, middle: 10500, background: 9000). The math in the drag handler will be determined by your SVG size and the draggable min/max. If you want to try this, it’s best to plan how far you’ll be allowing each layer viewBox to travel while creating your artwork so you can line things up correctly. In my demo, the artwork on the foreground at x:0 will line up with the artwork at middle x:1500 and background x:3000. Adding guides in your vector software for those boundaries makes setup a breeze. Of course, you can make this work with any size SVG and the effect can be extreme or subtle depending on your needs. Happy tweening everyone.

Hello @Hugh Nivers For more on SVG export One extra tip if you want to export the WHOLE artboard with different layers etc you can export it by https://gyazo.com/e12f38bb3e754b715972acad4f4988a5 Also using Presentation attributes will save you a lot of headaches 1) 2) 3) Happy tweening

https://thebirdthebear.com/ After months of learning, and hitting walls, and throwing phones, and punching laptops, I've finally launched one of the most ambitious sites I've ever done. I learned SO much! And my Javascript skills have improved and evolved immensely. I'd love to hear your thoughts. Just about everything on this site is animated, and if it isn't text or photography, it's an SVG. If you see things that can be improved in any way, I'm open to hear about it. Special thanks to those that have responded to my posts and questions here in the forum: @OSUblake Big ups for your help with the dynamic ID thing! @Sahil, @Carl, @GreenSock You all have helped along the way too! Thanks a ton.

Hi, Seems we got to the bottom of this thanks a lot guys! Instead of removing the <base href="" ( not quite possible without a lot of pain for the rest of the site ) we changed the clip path: <g class="clipPathReveal3" clip-path="url(#theClipPath3)"> changed to <g class="clipPathReveal3" clip-path="url('/php-web-content-management-system/#theClipPath3')"> Cheers!

hmmmm... I do see that on iOS in your new link, but here is the exact same SVG in a CodePen. ( I pulled it straight from your site) In my demo, the clip-path seems to be working correctly and looks fine to me in iOS. The only difference is that the demo SVG isn't being influenced by any parent and/or CSS from the main site. There has to be something interfering somewhere that iOS doesn't like. It's a bit cumbersome to debug a live site though. Maybe try turning off the style-sheet or temporarily move the SVG out of its parent containers to see if that makes a difference.

Wow, Blake. Great demo! That does a great job of showing off the curviness property. Contrast that to the one from which it was forked. UPDATE: I added a fork of Blake's version with a field for setting curviness and a reset button for the bezier.

Hehe. I think most of the confusion surrounding it has been clarified, so it's OK to use again.

If you've ever heard about the FLIP animation technique, that's basically what @Sahil was showing you. https://aerotwist.com/blog/flip-your-animations/

Adding delay to tweens using delay method does not get affected by the TimeScale but it seems like it does get affected by globalTimeScale or timeScale of parent timeline. So you will need to set timescale on individual tweens instead of timeline. if you want to change globalTimeScale or parent timeline's timeScale and want the tweens to keep delay then you will need to update delay and multiply it with timeScale.

The simplest solution is probably to apply a scaleX and scaleY accordingly and set vector-effect: non-scaling-stroke on that element so that the stroke doesn't scale with it. Very little code, totally effective. If you really need to adjust all the coordinates in the path itself, here's a fork with a different technique that leverages MorphSVGPlugin's pathDataToRawBezier() functionality: I also dropped in a function at the bottom that'll take any path and spit back the transforms as a matrix array, just in case you want to essentially take the transforms and bake them into all the coordinates of a <path>. The solution I'm providing above doesn't have the limitations that the Stack Overflow one did. Good luck!

Nice question. I have had similar question but never bothered too much about it because it works. I will try to explain with what I know. JavaScript runs in a single thread so it will execute all statements before rendering/updating the page. So let's say on click event you are executing a function, JavaScript will execute all the statements before rendering the layout. In following demo you can see a there is a loop that executes 10 times it executes 20 statements of TweenMax and many more that you don't see from library. In console you can see that it takes about 2-8 miliseconds to execute the loop, it can vary depending from system to system. Once all statements are executed then browser will update the layout with any changes that occurred. Now for your animation to run at 60FPS browser must update any changes every 16 milliseconds so if you are doing a lot of animations that take more than 16ms, it will start degrading the performance by dropping the frames because JavaScript is busy executing other stuff. In demo, If you change the count to something like 5000, you will see that it takes browser about 1500ms to execute the loop. If you log the performance of the page using devtools you can see that for that time browser never rendered anything so no question of seeing jumps, just horrible user experience. Interestingly, just today a video was published about whole JavaScript event loop that talks in detail how JavaScript is executed, I haven't seen the video yet but it will be worth watching. You will find a lot more videos on that channel about everything in details. An article that talks about rendering and performance in details, https://developers.google.com/web/fundamentals/performance/rendering/ Another article worth reading that talks about how different scrolling methods affect the performance https://blogs.windows.com/msedgedev/2017/03/08/scrolling-on-the-web/#lvzozB8m1fZOWgTt.97 Another thing is how animating certain properties affects the layout, for example if you animate left, top, height or width it will trigger the layout and browser will have to recalculate entire page. While animating transforms won't cause layout trigger in most browsers. On following page you will find list of browsers and what property triggers what, so you want to avoid those triggers wherever possible for better performance. https://csstriggers.com/ About how animations work, at core GSAP just calculates over time with different easing formulas and set those values on the element. So basically you can animate numbers of any object, that's why it is very easy to use GSAP to animate different libraries like Three.js, PIXI js etc. GSAP uses the requestAnimationFrame function which makes sure everything animates at constant frame rate given that you don't animate too many pixels at once. Following is simple demo of how you can ease using simple Math, But of course GSAP does a lot more than simple easing, it makes sure that your animations execute at exact duration that you set and a lot of other work to work around different browser inconsistencies.

Hello @Hugh Nivers and Welcome to the GreenSock Forum! What browser and browser version do you see this difference of behavior? Also keep in mind that when you run your code in codepen edit mode, that it renders inside an iframe. You would have to view your codepen in debug mode so codepen renders without being in an iframe. So in your codepen URL you would change /pen/ to /debug/ If you still see the behavior difference than you can at least narrow down your issue isnt that your code is being run through an iframe. Which can cause render and functional problems sometimes when viewing in codepen.

You can do that by only start animating once scrollY is greater than element's offset. Then use window.innerHeight to set progress. You can use innerHeight to set the percentage, the way scrollMagic trigger works. https://www.kirupa.com/html5/get_element_position_using_javascript.htm https://stackoverflow.com/questions/19618545/body-scrolltop-vs-documentelement-scrolltop-vs-window-pageyoffset-vs-window-scro You can improve performance by avoiding calculating offset every time you scroll by saving it as Skroller property and calculating it on resize.

My GSAP story for the day. I was integrating some found code to add a peek-a-boo menu to a site update, the kind where the menu slides away as you scroll down but slides back in as you scroll up. It used css transitions but since they did what was intended I went with it. After spending awhile getiing it all plugged into Wordpress it worked fine in Safari and Chrome but Firefox was a disaster. Failed to work half the time. When it did work content mysteriously dissapeared huge ArrRRRGH! Now i could have spent ages trying to refactor my html, or css, or try to rewrite the triggering system in javascript or spend two hours investigating firefox bugs on forums... However 5 minutes to swap out css transitions for gsap and it works like a charm. So much for css transitions/animations.

Nobody's getting my badge.

As a GreenSock forum moderator you should know that the use of CSS transitions is expressly forbidden. Your badge is probably safe, but there must be punishment for this offense so you need to grab some chalk and start writing.

Hello @chris_hengst, Welcome to the forums! I'm not a sound designer nor have experience with sounds and the web other than having the occasional background elevator soundtrack added to a cheesy site. But, I think this issue of yours will be more a case of the "sum total" of the things that are going on in your app than a GSAP thing. GSAP alone only, at its core, just crunches numbers, it won't touch your sound files unless you tied them to a timeline and, even there, it won't cause it to play unless you have conflicting code trying to play and stop said timeline at the same time. As you said yourself, you're recoding it all. Better to wait until you clean your codebase up first before spending time troublesooting something that might go away after the spring clean.

Not possible out of box. But you can chain your tweens in timeline and adjust the position parameter to get desired effect for last elements. There is also option of cycle if you are trying to do something crazy but it will only let you change delay instead of duration, though probably not what you are looking for. https://greensock.com/cycle

Sure, now the Pixi Master shows up. I thought the agreement was you show instantly whenever PIxi or canvas are mentioned in a thread? It's been a couple days since this thread started. You're slipping. I know what you're saying about Pixi graphics. When I was first tinkering with my 2000 Posts demo, I did a little experiment generating sprites from a primitive graphic and that didn't look good at all. Generating the canvas texture from the graphic and sprites from the texture seemed fine though. More often than not I'm using a .png or sprite sheet of .pngs because I want more than a simple circle or star for my particles, but sometimes just a little burst of circles is all that's needed. Would your preference in those cases be generating the canvas texture from the primitive graphic? Or would a .png be the best choice even in those projects? At this point I'm still getting comfortable with the syntax, filter settings, different types of container properties etc. and I'm just happy when everything works correctly. But I'm always interested in hearing from the master.

So I guess this means @Dipscom is alive and well? Welcome back. I thought perhaps you had written some amazing code, sold it to a mega-corp and retired to a tropical island somewhere.

Hm, how about if roundProps could accept an object and for each property, you define a number that's the smallest gap, like: roundProps: { x: 0.1, //round to the closest tenth (0, 0.1, 0.2, 0.3, etc.) y: 5, //round to the closest 5 (0, 5, 10, 15, etc.) rotation: 45 //round to the closest 45 (0, 45, 90, 135, etc.) } Do you think that's intuitive? Here's an updated TweenMax with this functionality embedded (note: it required some tweaks to CSSPlugin too, so this wouldn't be backwards compatible for CSS properties): https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js Is that the kind of thing you're looking for? Does it work well for you?

It's not too confusing as long as rotation is not involved. It uses skew and scale. SVG and canvas could be a little different because the transform origin might be part of the matrix. matrix(a, b, c, d, tx, ty); But yeah, it looks like a possible bug. GSAP doesn't seem to handle translate as a percentage correctly. Compare it to setting the transform with jQuery. Definitely something @GreenSock should look at to confirm.

Thanks for the reply guys, really helped out a lot. In the end we decided to go with the class extension of Ease as that seemed like a clean way to do it. Here is how it turned out. class springEase extends Ease { constructor(tension, friction) { super() this.spring = new RK4({tension: tension, friction: friction}); this.time = this.spring.time() } getRatio(progress) { progress = this.spring.step(); return progress } } var ease = new springEase(200, 10) new TimelineMax().to(box, ease.time, { delay: 1, x: 400, y: 400, ease })

It amazes me how many features GSAP has. I was trying to wrap my brain around how this tween actually worked, and discovered that there is a plugin that tweens arrays: EndArrayPlugin Nothing fancy, but hey, it's there if you need it. http://codepen.io/osublake/pen/xbyvPb?editors=001