Leaderboard

@smallio You had typo in 'triggerElement'. The triggerHook has value between 0 to 1 that determines where your trigger is going to be. Always a good idea to turn on indicators while developing.

False alarm!! Caches were a foolin' me! It appeared Chrome 66 wasn't loading some elements on pages (other browsers were) ... I got a bit heated rather than taking a step back and thinking about the obvious: wifi going nuts but caches doing their work. All good here! ( other than the stutter I still see in my Pen above with Chrome )

I wasn't sure what part of the code you really needed help with. Its really best to reduce things as much as possible for support issues. I wasn't sure if we should be looking in the mousemove and mouseleave functions too. I agree with MindGamer, a recursive function call is probably best for what I think you are describing. Move something someplace, and when its done move it another place: This thread has some more advanced solutions

Actually, it would be totally inappropriate to set the {passive:true} flag on Draggable's listeners because that's essentially promising the browser that we'll never call preventDefault() on the event to cancel the scroll...but Draggable MUST do exactly that. Otherwise, when you press down on something and start dragging, the whole page would move with it. See what I mean? Don't worry about those "warnings" - they're not errors or anything. It's just Chrome trying to be "helpful" but it has no idea what the code actually needs to do or what would be appropriate in our context I appreciate you asking about this, though. Sometimes things like this are really useful for us to hear about.

You'd need to animate or set the opacity of new image in the callback. Here's another fork where I've added a 4th frame which appears at the end of the timeline. Happy tweening.

There may be a better way to to this, but I'd probably skip the repeat and the yoyo and call a function onComplete. That function would set a new set of random "to" coordinates, and then start another tween which calls the same function onComplete for a new set of randomized "to" coordinates. Etc. Etc. Cool CSS grain btw.

Forget Avengers: Infinity War. This summer’s must-see film is the latest offering from GreenSock Studios. Grab the kids and head to local multiplex for the next showing of ‘Easy SVG Drag and Drop with GreenSock's Draggable’ Academy award winning director Carl Schooff transports the audience into the jungle of SVG with his mastery of the craft. He knows how to get the most from his .icon actors. The fade and scale performances are completely believable and sure to win a multitude of awards. Nice job @Carl I honestly have no idea how someone could watch one of your videos and not immediately start using GSAP after seeing how easy it is to use.

Thanks so much, Craig. This made my day. We pushed really hard to get it out before Han Solo. We're expecting a strong opening weekend.

The newer version(s?) of Chrome are logging a warning about event listeners declared without a passive state. It looks harmless for now, I just wondered if there were plans to add this functionality, or if there's an existing option I'm not seeing that I just need to add. So far I'm only noticing it with Draggable.

Helpful Chrome? Isn't that an oxymoron?

Yep, I'd do exactly what @MindGamer recommended. Simple example: function random(min, max) { return min + Math.random() * (max - min); } function gotoRandomPlace() { //notice the onComplete points back to this same function, so it'll keep going to random coordinates TweenMax.to(...{x:random(-100, 100), y:random(-100, 100), onComplete:gotoRandomPlace}); } gotoRandomPlace(); As for vw/vh units, those aren't supported on transforms because to maximize performance, GSAP bakes everything into matrix() or matrix3d() values which are always px-based (although it does support percentage-based values as well by prepending a translate() or translate3d()). You should be able to relatively easily convert vw/vh on your own, though, like: //converts viewport units to pixels (like "50vw" or "20vh" into pixels) function toPX(value) { return parseFloat(value) / 100 * (/vh/gi.test(value) ? window.innerHeight : window.innerWidth); } //then, in your tween: TweenMax.to(... {x:toPX("50vw"), y:toPX("20vw")}); The only caveat is that since the end result is in px, things won't shift if the window gets resized AFTER the tween finishes. But you could certainly use an onComplete to set those units directly, like element.style.transform = "translate(50vw, 20vh)"; if that's essential for your context. Does that help?

Hi @tombra Welcome to the forum. I may not be understanding the question here, but couldn't you set the timeline to repeat a few times and then use an onComplete callback to show another image or play a new animation? Something like this: Doe that help? Happy tweening.

@Sahil Duh.. how did I miss that?! Thanks

Welcome to the forums, transformOrigin for DOM elements is naturally in the center. As Oliver said, it really shouldn't need to be set in your case. Here is a very simple demo showing scale of a single element. You can hit run pen > edit on CodePen and create a fork that shows what your code is doing differently. I'm sure once we see the problem we will be able to provide a solution.

Your code looks fine. It is working for me just as this shorter version: tl.from( element, duration, { scale: 0 } );

Hi everyone, Just wanted to let you all know that our HTML5 banner builder (of course, powered by Greensock) now also supports exporting zip files for Sizmek MDX 2.0/SAS and DSP platforms. We previously already support Adwords and DoubleClick compatible exports. Zip export for the different platforms requires a paid subscription, but just send me a PM if you want to test this feature out - and I'll set you up. Check out the tool on http://tweenui.com/animator and let me know what you think. As always, I'm very interested to get the feedback of this community. Keep on Tweening! Erik

Seems to run ok on my imac, on Chrome 66 with Yosemite. Some choppiness on Safari but not too bad. Best performance on Firefox similar to Shaun.

@Shaun Gorneau your second pen works great at mine. I have no words for how amazing that is! gonna show the final result when I finish the project

Oh... I have to disagree with @Sahil. You don't want to wander over to the other side of the forum. It's Thunderdome over there. @Sahil is a force to be reckoned with as he charges towards a membership in Comma Club.

Here is a new pen that does several things ... 1. Takes the background image applied to each <section>, prepends a new set of elements within each section and applies that background to the inner element. The reason it applies to the new inner element is to make it easy to tween the outer element without affecting the inline style of the inner. <div class="background-image-wrapper"><div class="background-image" style="background-image: url(//copied/from/<section>)"></div></div> 2. Now tweens the `y` of each background-image-wrapper (rather than the css image-background) along with a slight tween of the rotation to force hardware acceleration. Side note ... I prefer to Tween elements x/y with background images applied rather than the x/y of an <img> because responsive full-screen (or even just full-width) images are so much easier with css `background: cover`. 3. I've timed the slide tween to be perfectly in sync with the background-image-wrapper tween and increased the image tween distance ... makes for a better parallax effect. 4. Allow for down and right keys to move down the page, up and left key move up the page. 5. isScrolling is now set to `false` when the last Tween has completed. This should offer a better mouse-wheel experience. But ... I'm not sure ... I'm using swipe gestures on a trackpad and an Apple Magic Mouse. Not sure what it's like on a physical wheel without momentum. I've tested in MacOS High Sierra (10.13.4) ... Safari, Chrome, Firefox, and Opera on a 2013 MacBook Air ( i7 1.7Ghz, 8 GB ram, Intel HD Graphics 5000 1536 MB) ... fairly modest specs. The results I see are Safari 11.1 - Buttery smooth with the *occasional* minor snag Chrome 66 - Buttery smooth until it's not :/ It's perfect, then hangs for .5 seconds, then perfect again .. on pretty much each slide transition. No idea why. Opera 52 - Nearly identical to Chrome (to be expected) Firefox 59.0.2 - Holy sh*t! Didn't expect it to be so good ... I usually wrestle with Firefox. It's perfect there ... I just need to do some image preloading.

Browser support for filters isn't very good, and GSAP can't really "fix" that. It doesn't claim to support filters natively. But since you can animate any property of any JS object, you can certainly cobble together your own solution for browsers that do support it, like that codepen you linked to. Also keep in mind that GSAP can isolate individual numeric values inside more complex strings, and as long as they're in the same order, it'll animate them beautifully. Example: var filters = {value:"blur(15px) drop-shadow( 10px 10px 15px rgba(255,255,255,.7) )" }; TweenMax.to(filters, 2, {value: "blur(0px) drop-shadow( 0px 0px 0px rgba(255,255,255,.7)", onUpdate:function() { element.style.filter = filters.value; }}); Does that help?

Hi anthonygreco if i understood correctly what you'r looking for , pls check this out : http://codepen.io/MAW/pen/myZqbV

Hello musemega.. Have you tried using percentages instead? The Filter Brightness value can be: 0-1 or 0-100% Examples of using percentages: This uses a ui range slider (only Chrome): http://codepen.io/jonathan/pen/gxGLh This animates using onUpdate (only Chrome): http://codepen.io/jonathan/pen/rnBmf But it only works in Chrome due to Firefox / IE not supporting CSS filters yet without SVG, and the HTML5 input ui range slider. // set initial brightness value, in this case 0% TweenMax.set('#brightness img',{'-webkit-filter':'brightness(0%)'}); // animate the brightness value from 0 to 100% TweenMax.to({}, 2, { onUpdate: function(tl){ // convert timeline progress to a percentage var tlp = (tl.progress()*100) >> 0; // set brightness value on each update TweenMax.set('#brightness img',{ '-webkit-filter': 'brightness(' + tlp + '%)' }); }, onUpdateParams: ["{self}"] // references the tweens timeline }); Also, it could be done with TimelineLite or TimelineMax: // animates CSS filter brightness on timeline update function animateBrightness(tl) { // convert timeline progress to a percentage var tlp = (tl.progress()*100) >> 0; // set brightness value on each update TweenMax.set('#brightness img',{ '-webkit-filter': 'brightness(' + tlp + '%)' }); } // create TimelineMax instance var tl = new TimelineMax({ paused: true, onUpdateParams: ["{self}"], onUpdate: animateBrightness }); // set initial brightness value, in this case 0% tl.set('#brightness img',{'-webkit-filter':'brightness(0%)'}); // add other tweens here or not // tl.fromTo({}); // play timeline tl.play(0); Is it possible that you can setup a limited codepen demo example so we can see the behavior you describe.. Link to a video tut by GreenSock on how to create a codepen demo example: http://forums.greensock.com/topic/9002-read-this-first-how-to-create-a-codepen-demo/ UPDATE: Firefox 35 and up now suports CSS Filters: https://developer.mo...fox/Releases/35