Diaco
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by Diaco
-
Hi again at first thanks alot Carl , i`m so glad to hear that pls update the codepen with new one. and gui i changed the code , made a new codepen for your goal http://codepen.io/MAW/pen/wtshe
-
Hi gui I made a codepen for you , this is just a prototype code , but maybe that can give u a clue .... http://codepen.io/anon/pen/nsyLv hope this helps ...
-
How to position two staggerTo to run at the same time?
Diaco replied to gimperdaniel's topic in GSAP
please check this : Timeline Tip: Understanding the Position Parameter http://greensock.com/position-parameter -
How to position two staggerTo to run at the same time?
Diaco replied to gimperdaniel's topic in GSAP
When you want to define and mark special time for a label you can use .add() method , there's several methods to work with the labels... check this out : http://codepen.io/anon/pen/ejBxn -
How to position two staggerTo to run at the same time?
Diaco replied to gimperdaniel's topic in GSAP
Hi gimperdaniel With gap or label you can start tweens at the same time . you can use label to the timeline, making it easy to mark important positions/times : http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/addLabel/ with labe : http://codepen.io/anon/pen/sxtkb with gaps : http://codepen.io/anon/pen/ytsIi -
Hi RolandSoos it seems the empty tween is the best way and the only way for your target , at least that's i know ...
-
Hi Roscoeh if i understand correctly , you should to use " onThrowComplete : function() { } "
-
hi julien94270 yep , you can , but I recommend you that to use Timeline for your tween sequence instead of tweens with onComplete functions in this case ; you ill have same result , your code is more clear and have the benefits of Timelines . same result with Timeline : http://codepen.io/anon/pen/zqKdj and for your purple function you can choose one of these : set without tween : TweenLite.set(purple, {visibility:"visible"}) 2 way to tween : TweenLite.to(purple, 2, { autoAlpha:1}); TweenLite.fromTo(purple, 2, { opacity:0},{ opacity:1, visibility:"visible"});
-
hmmm.... ok , maybe these can helps to better understand about the Tween and Timeline ... Tween version : http://codepen.io/anon/pen/tDLKI Timeline version : http://codepen.io/anon/pen/sBorF
-
Hi julien94270 your code is correct , but you should to load " ScrollTo.js " too ... <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.2/plugins/ScrollToPlugin.min.js"></script> Let we know if you need any help ...
-
Hi khatkolekomal try this : preload your images , change your src attr with one Tween and easily control that : var anim = {frame:0} ; TweenMax.to(anim , 2 , {frame:"+=60", roundProps:"frame", onUpdate:updateHandler }); function updateHandler() { image.attr("src", "images/character"+anim.frame+".png"); } with this method you don't need extra DOM objects . ...
-
hi jack check the Jonathan codepen , same animation , but when going to other tab and came back can see the difference ! i mean that what happend specialy when have an animation to tell a story or other things in sequences . until i know css cant understand when i going to other tab and GSAP can
-
Hi and another great point about GSAP is that greensock use requestAnimationFrame and this means means less CPU, GPU, and memory usage and leading to much longer battery life , and CSS doesn't even know what that means
-
Hi Spiderian Rodrigo is right about delayedCall() , maybe this can help you : http://codepen.io/anon/pen/LIgHe but dont forget GSAP use requestAnimationFrame and this means when user going to other tab the delayedCall stop calling , and If you don't want that behavior , u can use this " TweenLite.ticker.useRAF(false); " to turn off and use setTimeout() to drive .
-
Hi your greensock codepen's using KineticJS framework ( Kinetic plugin ) and html5 canvas , for DOM obj use this method : http://codepen.io/GreenSock/pen/LuIJj and yes , i think it's the best way that you animate flapping wings at first and then create a bezierTween for the container of wings (butterfly) like flash workflow .
-
Hi jaxi123 this's a codepen for you , you have some syntax issue ( " staggerFrom " is correct ) , Anyway i didn't understand what you looking for !? do you want to trigger the animation for parallax scrolling or just want to play the animation when visible !? http://codepen.io/anon/pen/rlkpJ
-
Hi celli Yep , there's an easy way ; you can use xPercent and yPercent ( CSSPlugin) to positioning in responsive layout . http://codepen.io/GreenSock/pen/axzmb http://codepen.io/GreenSock/pen/axzrw http://codepen.io/GreenSock/pen/290c237a0f550288c84ed0312267f7ec
-
Hi you should use Youtube Api ; pls check this out : https://developers.google.com/youtube/js_api_reference?csw=1#Events http://css-tricks.com/play-button-youtube-and-vimeo-api/ http://stackoverflow.com/questions/7443578/youtube-iframe-api-how-do-i-control-a-iframe-player-thats-already-in-the-html http://stackoverflow.com/questions/12522291/pausing-youtube-iframe-api-in-javascript
-
Hi I'm glad it helped . i saw the codepen in this discussion ; for more explanation pls check this out : http://greensock.com/forums/topic/9470-draggable-on-mobile-how-to-manage-horizontal-draggable-and-native-vertical-scroll-webkit/?p=39023 anyway this's scrolling version of that with your codepen : http://codepen.io/anon/pen/KCyGs ...
-
repeat and yoyo not working?: multiple objects with randomised attributes
Diaco replied to robwebb364's topic in GSAP
Hi i changed your getRandom function and fix some syntax issue and works . http://codepen.io/anon/pen/IqELw -
Hi my friend your codepen generated ellipses completely , but they'r out of SVG viewbox ( 800 * 800 ) , var y=900 !!! and the syntax's correct . http://codepen.io/anon/pen/ncrFe
-
Hi tauab Check this out : http://codepen.io/x0b/pen/qmGis
-
Hi robwebb364 this works , you should use $("ellipse#wob")
