Jonathan

Hello and Welcome to the GreenSock Forums.. Im not sure i understand your question.. are you saying that when you scale to zero the element still has the display:block property.. if thats the case.. scale doesn't change the display property, even though the element is scaled down, it does not mean the display property will be affected. If you want the element to have display:none than you will have to either tween the display property, or after the element has scaled down.. set the display property with the onComplete callback of the tween you can try this: /////////////////////////////////////////////////// // scaling from center origin function filterType(type,color){ TweenLite.to(".people ", 1, {css:{transformOrigin:"50% 50% 0", scale:0}); TweenLite.to("."+type, 1, {css:{{transformOrigin:"50% 50% 0", scale:1,backgroundColor:color}}); } /////////////////////////////////////////////////// // add a fade out and in when tweening autoAlpha (opacity and visibility) function filterType(type,color){ TweenLite.to(".people ", 1, {css:{autoAlpha:0, transformOrigin:"50% 50% 0", scale:0}); TweenLite.to("."+type, 1, {css:{{autoAlpha:1, transformOrigin:"50% 50% 0", scale:1, backgroundColor:color}}); } /////////////////////////////////////////////////// // tweening display property with scale function filterType(type,color){ TweenLite.to(".people ", 1, {css:{display:"none", scale:0}); TweenLite.to("."+type, 1, {css:{{display:"block", scale:1, backgroundColor:color}}); } /////////////////////////////////////////////////// // tweening display property in callback function filterType(type,color){ TweenLite.to(".people ", 1, {css:{scale:0}, onComplete:function{ TweenLite.set("."+type, {display:"none"}); } }); TweenLite.to("."+type, 1, {css:{{scale:1, display:"block", backgroundColor:color}}); } depending on how your elements are set up.. it would be best to have your elements absolutely positioned when applying transforms. Also instead of using the display property, why not use GSAP autoAlpha property.. which i think is much better than tweening the display property also some other questions i had: Are you trying to scale the elements from their center origin? What are the initial state of the elements when the page loads? Are you only trying to transform scale the elements form one direction? is there any type of delay between hiding and showing the elements? if you could provide a codepen or jsfiddle example for us, we could better help you..

its ok.. there alot of great people here willing to help... but just review the docs and keep them in a bookmark to always reference.. http://api.greensock.com/js/ also check out all these links to learn more about GSAP: http://www.greensock...get-started-js/ http://www.greensock.com/gsap-js/ http://www.greensock.com/css3/ http://www.greensock.../jump-start-js/ http://www.greensock.com/js/speed.html http://www.greensock.com/why-gsap/ http://labs.bebensig...?text=TweenLite http://www.gannon.tv/edge_demos/dna/ http://ahrengot.com/...ript-animation/ examples on GreenSock codepen (to pick apart js, css, and html): http://codepen.io/GreenSock

no worries... if you need to apply CSS properties for the initial state of the element, and you don't want to apply CSS in your style sheet for the starting values.. ...than instead of using the .to() method, having the duration zero, which is not recommended... use the .set() method instead http://api.greensock.com/js/com/greensock/TweenMax.html#set() change your code to this: TweenMax.set(".artIcon", {borderRadius: "50%"}); the .to() method is for tweening (animating) values.. the .set() method just sets the value statically so there is no tweening, its equivalent to using the jQuery .css() method but is quicker and remember if you are using the selector ".artIcon" .. you need to have jQuery loaded on your web page in order for GSAP to understand that selector.. that is very important does that make sense ?

Hello and Welcome to the Greensock Forums. have you tried the seek() method: http://api.greensock.com/js/com/greensock/TimelineLite.html#seek() //jumps to exactly 2 seconds myAnimation.seek(2); //jumps to exactly 2 seconds but doesn't suppress events during the initial move: myAnimation.seek(2, false); //jumps to the "myLabel" label myAnimation.seek("myLabel"); is this what you mean?

see this.. i modified your codepen: http://codepen.io/jonathan/pen/CAJaw on your codepen above you were missing the duration value in the tween.. if you are going to use as your selector ".artIcon" .. you have to have jQuery loaded to use that selector.. otherwise you have to use native javascript like document.getElementById you were trying to animate the border-radius on the images parent (div) not the image itself... In either case GSAP will be able to animate the image and/or its parent with no problem... also the GSAP docs are really helpful to learn how to use GSAP: http://api.greensock.com/js/com/greensock/TweenMax.html http://api.greensock.com/js/ does that help?

in your codepen.. you have the duration in your tween set to zero.. also in codepen you have to add the script by clicking the js sprocket icon to add your javascript file. also try absolutely positioning your image., try looking at my codepen example above and do tests of your own. Look over and see my css, html and javascript. This way you get a better idea on how to animate the border radius..

hello .. if you can please provide a codepen or jsfiddle example, it would be a great help in helping you find a better a solution, and to let you know why it works.. also.. when using the border-radius property.. you dont have to use the vendor prefixes, since the border-radius property is supported in the latest Chrome, Firefox, IE10, iE9.. without a vendor prefix http://caniuse.com/#search=border-radius plus the mask-image is only available in webkit browsers at the moment so wont be applied in Firefox or IE http://caniuse.com/#search=mask also here is codepen test showing GSAP animating the border-radius property on an image, which also works in Chrome: http://codepen.io/jonathan/pen/CmcrF

how and when are you implementing then kill() method.. do have an example ? not sure if this matters but i also noticed this style in your style.css on line 347.. have you tested to see how it behaves if you comment out the overflow:visible !important line: #our-work .offset-right, #social-stream .offset-right { margin-right: -10px; /*overflow: visible !important;*/ perspective-origin: 50% 50%; } do you see what i mean? when i commented that out, i no longer so the straggler items out of place, unless you see something different after commenting out that line?

here are some cool links to learn more about GSAP and what it can do: http://www.greensock.com/get-started-js/ http://www.greensock.com/gsap-js/ http://www.greensock.com/css3/ http://www.greensock.com/jump-start-js/ http://www.greensock.com/js/speed.html http://www.greensock.com/why-gsap/ http://labs.bebensiganteng.com/html5/experiment3/?text=TweenLite http://www.gannon.tv/edge_demos/dna/ http://ahrengot.com/tutorials/greensock-javascript-animation/ examples on GreenSock codepen: http://codepen.io/GreenSock

ok.. maybe trying isotope updateSortData() method. but also have you tried the reLayout method in Isotope ? http://isotope.metafizzy.co/demos/relayout.html // define isotope containing element var $container = $('#container'); // init isotope $container.isotope({ itemSelector: '.element', masonry : { columnWidth : 120 } }); // bind an event to each isotope item $container.on('.element', 'click', function(){ // trigger relayout of isotope items $container.isotope('reLayout'); }); you could also trigger the isotope reLayout() method at the end of the callback of the scroll i also noticed that the same animation you are using to fade in at the load of the page is being triggered each time the scroll is triggered have you tried to separate the initial fade animation when the page loads, and have a separate animation fade in / out the isotope items when scrolling the items into view?

I see what you mean by Jamie's example.. GSAP will be able to do this!. GSAP can animate attributes, css properties, css rules, DOM elements, canvas, javascript object properties, and much more. So i don't see a problem with GSAP not being able to do what you want to accomplish.. its the best animation platforms for Flash and JavaScript.

Hello.. Have you tried using the GSAP ticker property .. it basically fires an event every time the engine updates. It lets the browser be in charge of choosing the best time to execute the code, which will use less resource, and is more efficient. So instead of using setInterval() time or using the GSAP .to() method, to trigger drawing on the canvas, you would use the GSAP ticker. Its like if you were to use requestAnimationFrame, but the ticker property makes it cross browser, since setInterval is not reliable and requestAnimationFrame needs a little shim to work and detect each browser... http://api.greensock.com/js/com/greensock/TweenMax.html#ticker // add listener that requests an event object parameter, binds scope to the current scope (this), and sets priority to 1 so that it is called before any other listeners that had a priority lower than 1... TweenMax.ticker.addEventListener("tick", myFunction, this, true, 1); function myFunction(event) { // executes on every tick after the core engine updates } //to remove the listener later... TweenMax.ticker.removeEventListener("tick", myFunction); also here is a nice starter video tut on using canvas with GSAP, (it is in the last part of the video, around 16 minutes and 20 seconds in): http://gotoandlearn.com/play.php?id=161 a small example taken from that tut: var img, ctx; function init(){ ctx = document.getElementById("canvas").getContext("2d"); img = new Image(); img.src = "enemy.png"; img.xpos = 50; img.ypos = 50; img.onload = function(){ TweenMax.ticker.addEventListener("tick", loop); }; TweenMax.to(img, 1, {xpos:500, ypos:400, repeat:-1, yoyo:true}); } function loop(){ ctx.clearRect(0,0, 800, 600); // clears size of canvas tag each refresh ctx.drawImage(img, img.xpos, img.ypos); } instead of running your build through a for loop, and the update callback. You could use the ticker and have it trigger your function that has your canvas drawing functions each engine update also you can check this cool article by Carl Schooff, "Exploring Generative Canvas Art with TweenMax JS and KineticJS" : http://www.snorkl.tv/2012/06/exploring-generative-canvas-art-with-tweenmax-js-and-kineticjs/ here is also a previous reply to a post from Jack regarding this: http://forums.greensock.com/topic/6076-html5-canvas/?view=findpost&p=21509

have you tried adding a jQuery ready() event to make sure all the DOM is ready as well as the window is loaded.. before applying animations? maybe your images are not fully loaded, have you tried adding a window.load event? // check when DOM is ready $(document).ready(function(){ // check when all images, links and assets have been loaded $(window).on('load',function(){ // place code here }); }); i presume its still in the masterTrainer.js... ??? when i view the network assets loading in my inspector, it looks like the images are trying to load before the DOM is ready.. but Fail... and then try to load again after the DOM is ready.. try the above and see if it helps ..

i wlll debug more when i get home.. but have you tried to set on line 740 of style.css .. adding a override !important: .isotope-item.isotope-hidden { pointer-events: none; z-index: 1; /* overrides inline styles */ visibility: hidden !important; opacity: 0 !important; filter: alpha(opacity=0) !important; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" !important; } also looks like Rodrigo has the right approach for a long term fix..

sorry im still kind of confused on what your trying to accomplish.. do you have an example of what your trying to achieve? what do you mean by mix html5 video into css3 animations? do you want to animate the video tag / container, etc.. ? what type of animation do you want to do? thx for any clarification

this might be a bug in angular, since others were getting this same issue a couple of months a go.. https://github.com/angular/angular.js/issues/2400 https://github.com/angular/angular.js/pull/2405 i see that same behavior from your link above.. but it looks like this is not a GSAP bug but a Angular issue since i am seeing that on that angular demo page and this bug has been reported on the Angular bug issue log.. it was reported as possibly fixed.. but looks like its still happening

also keep in mind.. that if you are using imagesloaded.js .. You do not need to include jquery.imagesLoaded.js, as it is included with jquery.masonry.js .. which is described in the link below. check this out in Masony does not fully load in Chrome: https://github.com/desandro/masonry/issues/122 im surprised your not using Isotope instead.. made by the same guy who made masonry: http://isotope.metafizzy.co/ also others had same issue with masonry and chrome/safari http://stackoverflow.com/questions/7476649/jquery-masonry-breaksstacks-images-in-chrome-safari-but-only-on-first-load yeah this looks more like a masonry or imagesloaded issue on how the images are being loaded.. but not an issue with GSAP... an example will be really helpful.. thx

I noticed that in your init() function your first line has this: // your using opacity TweenMax.staggerTo('.thumbnail', 3, {opacity:'1', delay:0.5, overwrite:"all"},0.07); And then when images are loaded you are using this: // Once images are loaded, init Packery and fade on images imagesLoaded(container, function() { pckry.layout(); // and here your using alpha TweenMax.staggerTo('.thumbnail', 2, {alpha:'1', delay:0.5, overwrite:"all"},0.1); }); Is there any reason why you are running this code before the images are loaded and then again inside the imagesLoaded callback? Also your using two different types of properties to animate.. first you try staggerTo opacity to 1 .. and then after images are loaded you try to set alpha to 1 Have you tried just commenting out the first staggerTo, and only use the staggerTo in the imagesLoaded callback also what about using autoAlpha:1 instead of opacity or alpha: var MasonryLayout = { // ------------------------------------------------- // SETUP // ------------------------------------------------- init: function() { // leave this line commented out // TweenMax.staggerTo('.thumbnail', 3, {opacity:'1', delay:0.5, overwrite:"all"},0.07); // Bind container and establish settings var container = document.querySelector('.masonry-holder'); var pckry = new Packery( container, { itemSelector: '.thumbnail', gutter:0, rowHeight: '.grid-unit-25' }); // Once images are loaded, init Packery and fade on images imagesLoaded(container, function() { pckry.layout(); // instead of alpha you could use autoAlpha: 1 or use opacity: 1 TweenMax.staggerTo('.thumbnail', 2, {alpha:'1', delay:0.5, overwrite:"all"},0.1); }); // force window resize to make sure content is centered $(window).trigger('resize'); } }; autoAlpha:1 basically sets the opacity to 1 and then sets the visibility to visible or inherit autoAlpha:0 basically sets the opacity to 0 and then sets the visibility to hidden you can learn about autoAlpha here, scroll down and find autoAlpha: http://api.greensock.com/js/com/greensock/plugins/CSSPlugin.html let us know if that helps

Hello.. Im looking at the site in latest Firefox and Chrome on windows 7 and i don't see that behavior... i viewed on Windows XP .. on latest Firefox and latest Chrome and so some delay but not a fast forward through the animation as described.. in Chrome it fades in but real slow.. What JS file on this page do you have the GSAP code running from, so we can better debug? Also what browser and OS are you seeing this on? when i viewed in the net panel in firebug in firefox it would show that there where 28 request but 0 bytes.. any additional info will help to help you.. thanks

hello, what are using as your click handler? have you tried to have the each argument pass to staggerFrom? jQuery( '.isotope' ).not( '.isotope-hidden' ).each( function(index,element) { var $this = $(element); // this basically equals 'this' element timeline.add( TweenMax.staggerFrom( $this, 3,{ css:{autoAlpha:1} }) ); } ); just as an example.. do you notice how i used the $this variable which references the element parameter, which equals the current element in the loop.. also you can try checking if each element has the .isotope-hidden class: jQuery( '.isotope' ).each( function(index,element) { var $this = $(element); // this basically equals 'this' element // check if element does not have .isotope-hidden class if( !$this.hasClass('.isotope-hidden') ){ timeline.add( TweenMax.staggerFrom( $this, 3,{ css:{autoAlpha:1} }) ); } } ); also if your just iterating through one collection of elements with the same class using the the jQuery each() method, you can try just using the GSAP .from() method instead, unless they are staggering in time Also i cant see all your code.. but if you have your own click event bound to a button which you are using as a trigger.. you can also use the jQuery .on() method which keeps listening for what selector you bind to it. $('.isotope:not(.isotope-hidden)').on('click', function(){ // TweenMax code goes here }); so even if the class is added to the DOM after this event runs, it will still listen for the above selector when clicked. Also you could give the handler context if your element is dynamically added to the DOM after the fact.. i hope this helps if im understanding your question.. or if you can provide an example

is the video your using being pulled from youtube or vimeo? if so they have a API's to control playback and such... youtube playback API: https://developers.google.com/youtube/js_api_reference vimeo playback API: http://developer.vimeo.com/player/js-api if your encoding your own video.. HTML5 VIDEO, hasn't been set in stone as far as video codecs as a standard.. so you can use a polyfill to bridge the gap: http://mediaelementjs.com/ also checking browser compatibility for the video tag element and codecs: http://caniuse.com/#search=video

Hello, and Welcome to the Greensock Forums, Are you trying to make animation sequence from those series of images while scrolling vertical or horizontal on the page or from within a container? do you have an example on codepen or jsfiddle of anything you can share, to better help understand what your trying to do? thx

hello.. im little kind of confused by your question.. what do you mean by mixing GSAP CSS3 Tweens with HTML5 video? do you mean animating the video's container, in and out, or around? what are you trying to do with the videos as far as animate or with CSS3 tweens? any clarification or info would be very helpful, thx

try this syntax instead of borderColor: t.add(TweenMax.to($("#p-13-box-102 .inner-rec"), 1, { css:{ 'borderTopColor': '#4c4c4c', 'borderRightColor': '#4c4c4c', 'borderBottomColor': '#4c4c4c', 'borderLeftColor': '#4c4c4c' } } ), 1); try this: http://jsfiddle.net/9eHVQ/21/ this is not a TimelineMax issue, but more of a firefox browser bug.. sometimes some browsers, have issues with animating shorthand properties. Even with jQuery this is an issue with animating borderColor.. so in this case its best to animate the individual border color properties: borderTopColor, borderRightColor, borderBottomColor, borderLeftColor ... instead of borderColor Its not related to the issue.. but I also noticed in your jsfiddle you had the external link for TweenMax.. so its also best to use TweenMax instead of TweenLIte in your syntax .. and you could use the CSS object for a slight speed boost Oh and by the way you can thank Jack and Carl for this great Animation Platform.. they are the ones who make it so awesome! hope this helps

hello ... have you looked at the CSSRule Plugin? http://api.greensock.com/js/com/greensock/plugins/CSSRulePlugin.html var rule = CSSRulePlugin.getRule(".myClass"); //get the rule TweenMax.to(rule, 3, {cssRule:{borderColor:"#0000FF"}}); you will need TweenMax since it includes CSSPlugin and CSSRulePlugin are you running the code after you have inserted the style tag into the DOM? also if you provide the link to your jsfiddle we can better help you, so we can see how your code is and the syntax your using.. thx..